USWDS - Header: Search input appears last in menu for mobile header. #6037

cathybaptista · 2024-08-27T20:25:08Z

Summary

Removed the CSS order property from mobile header navigation. Now, the visual order of the component matches the tab order.

Details

This change visually moves the search bar to appear last in the list of menu items in the mobile header. This change results in the header being compliant with WCAG criterion 2.4.3 (Focus order) in mobile view.

Breaking change

⚠️ This is a breaking change.

This change causes the search bar to appear at the bottom of the menu. If you would like to visually keep the search bar at the top of the menu, you will need to reorder your markup in the mobile view.

Related issue

Closes #5971, closes #3526, closes #3920.

Related pull requests

Changelog uswds/uswds-site#2798

Preview link

Preview link: Header Component

Problem statement

Summarize the problem this PR solves in a clear and concise statement.

Web pages should be able to be navigated in an order that preserves meaning and operability. Currently, the tab order in the mobile header menu does not match the visual order. Therefore, the component does not meet WCAG criterion 2.4.3 (Focus order).

Solution

By removing the order: 2; style from .usa-nav__primary, the search bar appears at the bottom of the menu in the mobile header, maintaining tab order and preserving meaning. This approach was chosen based on a conversation in dev sync on 8/6/24. This will impact users that wish to visually keep the search bar at the top of the menu; these users will need to reorder their markup in the mobile view.

Testing and review

In Storybook, select the header component.
Resize the browser to minimum width so that the menu is collapsed.
Select the "menu" button and validate that the search input field appears after other sample links in the menu.
Confirm the tab order is appropriate and consistent for each of the header variants.

I am looking for confirmation that the tab order makes sense and that it is consistent with WCAG criterion 2.4.3 (Focus order),

Confirm that this code follows the 18F Front End Coding Style Guide and Accessibility Guide.
Run git pull origin [base branch] to pull in the most recent updates from your base and check for merge conflicts. (Often, the base branch is develop).
Run npm run prettier:sass to format any Sass updates.
Run npm test and confirm that all tests pass.
Run your code through HTML_CodeSniffer and make sure it’s error free.

mahoneycm

Thanks @cathybaptista! The headers are looking consistent across the board.

One minor change to add an empty line before the anchor declaration

packages/usa-nav/src/styles/_usa-nav.scss

mahoneycm

Lgtm!

Header search placement is consistent across variants
Tab order matches expectation

Important

We'll want to mark this change our release notes. If we offer the suggestion to reapply order via CSS, we should flag that it goes against accessibility guidelines.

amyleadem

Thanks for this work @cathybaptista! I confirmed that the tab order now matches the visual order.

I noticed that the vertical margins between mobile nav elements are a bit different across variants. Can you update the margins in the Default variant above the search bar and primary navigation to align with the margins in the Extended megamenu variant? I've highlighted the differences in the screenshot below:

cathybaptista · 2024-09-10T20:08:05Z

Hi, @amyleadem!

2785b67 resolves spacing above the search bar

and

3a6c114 resolves spacing.

Thank you SO MUCH for all of your help with this!
:)
Cathy

amyleadem

Thanks @cathybaptista.

I noticed that there is still a difference in the spacing between the search bar and link list. The basic variant has a margin-top of .5rem while the extended has a margin-top of 1rem.

Instead of the changes you made to usa-header.scss, I'm wondering if we can use the margin-top rule from .usa-nav__secondary .usa-search (line 342 of usa-nav.scss) and make it so that it applies more generically (potentially line 113 of the same file). Curious what you think!

cathybaptista · 2024-09-11T16:55:18Z

@amyleadem, I think this is a great idea! Ensures the top margin is consistent. :) check out 7e420b6 and http://localhost:6006/?path=/story/components-header--extended

Changes have been made since approval. Needs re-review.

amyleadem

Looks good to me! Thanks @cathybaptista

@mahoneycm I am clearing your review since some changes have been made since you last saw it. Can you take another look when you get a moment?

…ds/uswds into cb-remove-order-from-usa-nav

mahoneycm

I noticed a regression in desktop views! Would you mind looking into this?

packages/usa-nav/src/styles/_usa-nav.scss

…r megamenu and default.

packages/usa-nav/src/styles/_usa-nav.scss

aduth · 2024-09-17T19:39:17Z

Does this fix #3920 and/or #3526?

mahoneycm · 2024-09-18T19:44:19Z

@aduth it looks like it!

mahoneycm

lgtm!

…ds/uswds into cb-remove-order-from-usa-nav

mejiaj

@cathybaptista nice job.

Functionally, everything looks and works well. Tested on both mobile and desktop breakpoints. No issues found with tabbing. One minor note to confirm on the header margin — I can approve once confirmed.

I've also updated the PR description to link the other issues that this feature closes.

- Closes #5971
+ Closes #5971, closes #3526, closes #3920.

Thanks for flagging that @aduth.

packages/usa-header/src/styles/_usa-header.scss

mejiaj · 2024-09-18T21:08:51Z

packages/usa-header/src/styles/_usa-header.scss

@@ -150,7 +151,7 @@ $z-index-overlay: 400;
    .usa-nav {
      @include u-flex("row", "align-center", "justify-end");
      display: flex;
-      padding: 0 0 units(0.5) units(1);
+      padding: 0 0 units(1) units(1);


thought: The clarity of this is nice. We can shorthand, but this approach seems better.

mejiaj

I was able to successfully test and confirm that the search input appears last.

I compared the feature branch with what's currently on develop. Before/after links below.

Before	After
Develop	Feature branch

thisisdano

This one is probably technically a breaking change because of the UX and design implications — but it might be worth noting that I don't believe teams will have to make any changes to their code to make this work, so change does not introduce a breaking change on the code side

thisisdano · 2024-10-03T03:54:37Z

I approve this PR, but we may want to double-check the changelog entry and release notes.

amyleadem · 2024-10-03T15:18:02Z

@thisisdano Added a suggestion to the changelog in an attempt to clarify the user action for the breaking change here. Once we figure out a solution in the changelog, we can include the changelog in the release notes and PR description.

Removed order style so dropdown appears at bottom of menu.

46697eb

cathybaptista changed the title ~~USWDS - Header: Search input appears at end of menu items.~~ USWDS - Header: Search input last in menu. Aug 29, 2024

cathybaptista changed the title ~~USWDS - Header: Search input last in menu.~~ USWDS - Header: Search input appears last in menu for mobile header. Aug 29, 2024

cathybaptista mentioned this pull request Aug 29, 2024

USWDS-Site: Add changelog for Search input appears last in mobile header [#6037] uswds/uswds-site#2798

Merged

cathybaptista requested review from mejiaj, mahoneycm, amyleadem and RachelCorsino August 29, 2024 18:28

cathybaptista marked this pull request as ready for review August 29, 2024 18:29

mahoneycm suggested changes Aug 30, 2024

View reviewed changes

packages/usa-nav/src/styles/_usa-nav.scss Outdated Show resolved Hide resolved

maintain hr between style and declaration.

f07f8e8

cathybaptista requested a review from mahoneycm September 3, 2024 14:21

mahoneycm previously approved these changes Sep 3, 2024

View reviewed changes

amyleadem suggested changes Sep 4, 2024

View reviewed changes

cathybaptista added 3 commits September 10, 2024 14:06

just make sure we've got the latest.

1a88d63

correct spacing above search bar.

2785b67

remove additional margin from nav

3a6c114

cathybaptista requested a review from amyleadem September 10, 2024 19:30

amyleadem suggested changes Sep 10, 2024

View reviewed changes

cathybaptista added 2 commits September 11, 2024 11:54

reduce spacing in header nav.

ec2aada

applied consistent margin to all search inputs in header.

7e420b6

cathybaptista force-pushed the cb-remove-order-from-usa-nav branch from 3a6c114 to 7e420b6 Compare September 11, 2024 16:46

cathybaptista requested a review from amyleadem September 11, 2024 16:55

amyleadem approved these changes Sep 11, 2024

View reviewed changes

amyleadem added 2 commits September 11, 2024 14:28

Merge branch 'cb-remove-order-from-usa-nav' of https://github.com/usw…

84f6a1e

…ds/uswds into cb-remove-order-from-usa-nav

Run prettier

a68ac1d

mahoneycm suggested changes Sep 16, 2024

View reviewed changes

packages/usa-nav/src/styles/_usa-nav.scss Show resolved Hide resolved

change margin-top to 0 to avoid visual regression on desktop views fo…

adb5ba9

…r megamenu and default.

mahoneycm reviewed Sep 17, 2024

View reviewed changes

packages/usa-nav/src/styles/_usa-nav.scss Show resolved Hide resolved

add a lf before media query to improve readability.

701dd1a

cathybaptista requested a review from mahoneycm September 17, 2024 15:31

mahoneycm mentioned this pull request Sep 18, 2024

USWDS-Site: Documentation updates for 3.9.0 uswds/uswds-site#2812

Merged

3 tasks

mahoneycm approved these changes Sep 18, 2024

View reviewed changes

amyleadem added 2 commits September 18, 2024 13:39

Merge branch 'cb-remove-order-from-usa-nav' of https://github.com/usw…

90bb597

…ds/uswds into cb-remove-order-from-usa-nav

Run prettier

bbc3779

mejiaj reviewed Sep 18, 2024

View reviewed changes

cathybaptista requested a review from mejiaj September 20, 2024 14:15

mejiaj approved these changes Sep 25, 2024

View reviewed changes

mejiaj requested review from heymatthenry and thisisdano and removed request for RachelCorsino September 25, 2024 16:47

thisisdano approved these changes Oct 3, 2024

View reviewed changes

thisisdano merged commit c970584 into develop Oct 3, 2024
5 checks passed

thisisdano deleted the cb-remove-order-from-usa-nav branch October 3, 2024 16:13

thisisdano mentioned this pull request Oct 4, 2024

USWDS 3.9.0 #6096

Merged

acouch mentioned this pull request Jan 27, 2025

[Issue #3434] React USWDS, React, Next.JS upgrade HHS/simpler-grants-gov#3515

Merged

USWDS - Header: Search input appears last in menu for mobile header. #6037

USWDS - Header: Search input appears last in menu for mobile header. #6037

Uh oh!

Conversation

cathybaptista commented Aug 27, 2024 • edited by amyleadem Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Details

Breaking change

Related issue

Related pull requests

Preview link

Problem statement

Solution

Testing and review

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

cathybaptista commented Sep 10, 2024

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

cathybaptista commented Sep 11, 2024

Uh oh!

amyleadem left a comment

Choose a reason for hiding this comment

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

aduth commented Sep 17, 2024

Uh oh!

mahoneycm commented Sep 18, 2024

Uh oh!

mahoneycm left a comment

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

mejiaj Sep 18, 2024

Choose a reason for hiding this comment

Uh oh!

mejiaj left a comment

Choose a reason for hiding this comment

Uh oh!

thisisdano left a comment

Choose a reason for hiding this comment

Uh oh!

thisisdano commented Oct 3, 2024

Uh oh!

amyleadem commented Oct 3, 2024

Uh oh!

Uh oh!

Uh oh!

cathybaptista commented Aug 27, 2024 •

edited by amyleadem

Loading