Challenge Portal Header

[r-bartlett-gsa]

Note: This work needs to be deployed to challenge portal eval dev environment (challenge_gov repo > eval main branch)

User Story

As a site user with challenge manager or public solver roles, in order to build my trust using challenge.gov site, I would like to see consistent branding and styling from any page of the site.

Acceptance criteria:

• Challenge.gov header and main nav are displayed for logged-in users using challenge management and submissions portal
• When the user is logged-in, Logout button is displayed (instead of Login)
  • User logout Challenge_platform#24

Tasks:

• Dev task 1
• Dev task 2

Definition of Done

Doing (dev team)

• Code complete
• Code is organized appropriately
• Any known trade offs are documented in the associated GH issue
• Code is documented, modules, shared functions, etc.
  - [ ] Automated testing has been added or updated in response to changes in this PR
• The feature is smoke tested to confirm it meets requirements
  - [ ] Database changes have been peer reviewed for index changes and performance bottlenecks
• PR that changes or adds UI
  • include a screenshot of the WAVE report for the altered pages
  • Confirm changes were validated for mobile responsiveness
• PR approved / Peer reviewed
• Security scans passed
  - [ ] Automate accessibility tests passed
• Build process and deployment is automated and repeatable
  - [ ] Feature toggles if appropriate
• Deploy to staging
• Move card to testing column in the board

---

Staging

• Accessibility tested (Marni)
  • Keyboard navigation
  • Focus confirmed
  • Color contrast compliance
  • Screen reader testing
• Usability testing: mobile and desktop (Tracy or Marni)
• Cross browser testing - UI rendering is performant on below listed devices/browsers (Tracy or Marni)
  • Windows/Chrome
  • Windows/Edge
  • Mac/Chrome
  • Mac/Safari
  • iOS/Safari
• AC review (Renata)
• Deploy to production (production-like environment for eval capability) (dev team)
• Move to production column in the board

---

Production

• User and security documentation has been reviewed for necessary updates (Renata/Tracy/Dev team)
• PO / PM approved (Jarah or Renata)
• AC is met and it works as expected (Jarah or Renata)
• Move to done column in the board (Jarah or Renata)

[r-bartlett-gsa]

Figma link: https://www.figma.com/design/VfdBFG8ShVnOStdSNYy9fR/Challenge.Gov-Component-Library?node-id=783-40675&t=63ttnQ9V6X1V72A5-0

[r-bartlett-gsa]

Work progress document: https://docs.google.com/document/d/11blju-lsqhzP4RlJ5f7vkR39q1eXFjnybFXkVeb-JjE/edit?usp=sharing

[jairoanaya]

Trade off: the original header nav was removed to open place holder for utility menu

WAVE Report

Wave report logged out

Wave report Logged In

Evidences

Header Gov Notice Logged out

Header Gov Notice Logged out - responsive

Header Gov Notice Collapsed Logged out - responsive

Header menu responsive - logged out

Header Gov Notice Logged In responsive

Header Menu Responsive Logged In

Header Gov Notice Expanded Logged In

Header Gov Notice Collapse Logged In

[jairoanaya]

Work done:

• Code understanding from challenge_platform and challenges & prizes
• Code was adapted from challenge_platform and challenges & prizes
• Team feedback document created on Google - https://docs.google.com/document/d/11blju-lsqhzP4RlJ5f7vkR39q1eXFjnybFXkVeb-JjE/edit?usp=drive_link
• Team feedback received for implementation
• CSS update
• Testing in Desktop and Responsive
• Deploying into staging
• Feature ready for testing on staging
• Branch recreation from eval - new instruction
• Testing in Desktop and Responsive locally
• Feature ready for testing on eval-main staging - https://challenge-portal-eval-dev.app.cloud.gov/

Notes:

Due to a new branching instruction - a new branch was recreated from eval-main in order to deploy the feature into Eval version. Previous branches were deleted or archived.

[r-bartlett-gsa]

@jairoanaya Same request as in other user stories, please check the Definition of Done list.
Also, please update the header background to white, instead of grey.
Also also, after opening and closing the menu on mobile, there's empty space on the right hand side, the page size does not reset correctly: https://app.screencast.com/TGHNkgaMzHbTq

[jairoanaya]

@r-bartlett-gsa definition of done addressed.

Regarding changing the background could you confirm it should look like the following screenshot:

I confirm I replicated the unexpected responsive behavior. Reviewing the issue in detail. Expect to provide additional inputs.

[r-bartlett-gsa]

Thank you @jairoanaya! I confirm the background color in your comment above.

[jairoanaya]

@jairoanaya Same request as in other user stories, please check the Definition of Done list. Also, please update the header background to white, instead of grey. Also also, after opening and closing the menu on mobile, there's empty space on the right hand side, the page size does not reset correctly: https://app.screencast.com/TGHNkgaMzHbTq

@r-bartlett-gsa after reviewing this issue I found the following:

The reported problem occurs because an internal element is not responsive as shown in the following picture.

This issue is expected to be resolved (by itself) by implementing #1388. I suggest waiting for the implementation of the 'Manager's dashboard.' Do you agree?

[r-bartlett-gsa]

@jairoanaya Sounds like a plan. Let's wait until #1388 is completed and reassess then. Thank you!

[jairoanaya]

@r-bartlett-gsa I confirm the background color has been changed (on the logged in state), please review if the changes satisfy the acceptance criteria.

[TCKapGrp]

Hi @jairoanaya and @r-bartlett-gsa , in the screenshots from wireframes as well as the mobile responsive view, the logout button is white. On the desktop view, the button is blue. I'm pinging @mhotch24 for responsive and a11y testing.

[r-bartlett-gsa]

@jairoanaya and @TCKapGrp No changes to button colors and styles are needed at this time. The consistency of button colors and styles across all apps will be addressed as part of fit & finish updates at a later time.

[mhotch24]

@r-bartlett-gsa

Usability Findings:

• Still seeing inconsistencies between the headers of Rails and Portal-dev; header bg color, body bg color, logo sizing, switch task button.

Feature Accessibility Findings:

• Some issues with labelling/voice over. Inconsistencies with how items are Rails are named so it's not a consistent experience:
• Examples: 'Find a Challenge' voices 'Active Challenges'. It needs to say 'Find a Challenge'.

[r-bartlett-gsa]

@jairoanaya Please address the following accessibility issue by updating header nav button aria labels so they match the actual label text:

Some issues with labelling/voice over:
Examples: 'Find a Challenge' voices 'Active Challenges'. It needs to say 'Find a Challenge'.

[jairoanaya]

@mhotch24

Context: for this feature I combined the header from Challenge.gov and eval platform. I have the following questions:

Switch Task does not have any function, still implementing the button?
All arias and labels should follow eval platform?

@r-bartlett-gsa changing the color for logout button requires a minimum effort and can be done on this usability feedback, should I include it now or wait for fit & finish?

[r-bartlett-gsa]

@jairoanaya Please do not implement Switch Task button and do not update the current Logout button at this time. These items will be updated at a later time, consistently across all apps.

Please update aria labels so they meet A11y requirements (even if it does not match/follow eval)

[jairoanaya]

@r-bartlett-gsa @mhotch24 the following feedback has been implemented and deployed to https://challenge-portal-eval-dev.app.cloud.gov/

• header bg color to white.
• body bg color to white
• logo sizing as is eval platfrom
• switch task button not implemented.
• labelling/voice over have resolved and have the same behavior than eval platform.