[A11y] [Header] Fix search bar element focus order (@W-12627142@)

[adamraya]

Description

Redo of PR #1910 with an isomorphic solution.

Fixes the search bar element in the header to the correct keyboard focus order for Desktop and Mobile, left to right and top to bottom.

Types of Changes

• Bug fix (non-breaking change that fixes an issue)
• New feature (non-breaking change that adds functionality)
• Documentation update
• Breaking change (could cause existing functionality to not work as expected)
• Other changes (non-breaking changes that does not fit any of the above)

Breaking changes include:

• Removing a public function or component or prop
• Adding a required argument to a function
• Changing the data type of a function parameter or return value
• Adding a new peer dependency to package.json

Changes

• Isomorphic fix focus order of the header search bar.

How to Test-Drive This PR

1. Checkout this branch a11y-header-order-focus-ssr and start the retail react app npm start
2. Click on the header and press the tab key to move the focus to the different elements in the header.
3. Verify the tab focus order follows the expected left to right, top to bottom.
4. Verify the are no render issues server/client http://localhost:3000/?__server_only

Checklists

General

• Changes are covered by test cases
• CHANGELOG.md updated with a short description of changes (not required for documentation updates)

Accessibility Compliance

You must check off all items in one of the follow two lists:

• There are no changes to UI

or...

• Changes were tested with a Screen Reader (iOS VoiceOver or Android Talkback) and had no issues
• Changes comply with WCAG 2.0 guidelines levels A and AA
• Changes to common UI patterns and interactions comply with WAI-ARIA best practices

Localization

• Changes include a UI text update in the Retail React App (which requires translation)

[vmarta]

🤔 what does display: contents do?

It actually got replaced by another more-specific css selector. So display: none is what actually got used.

[adamraya]

That's the expected behavior on the desktop screen. Check the styles used on mobile, and you'll see display: contents on mobile.

[vmarta]

If we want to make it more general, we can have the user override any props. Something like this:

export const HideOnDesktop = ({children, ...rest}) => (
    <Box display={{base: 'block', lg: 'none'}} {...rest}>
        {children}
    </Box>
)

[vmarta]

Just comments re: the prop types.