UI - A11Y - Add focus state styling (BC Reg Header)

[LizGovier]

4.0 SBC Common Component

• Add border style to anything focused via a tab in SBC Header

Main Keyboard Actions: Tab: Move forward through all interactive elements Shift + Tab: Go backwards to a previous interactive element Enter: Select or activate an interactive element Spacebar: To expand a drop-down menu, or select a radio button. Up and down arrows: To scroll through a page, or open/navigate through options in a drop-down menu. Esc: to exit a dropdown, dialog box or modal

See Figma Design for details

Note: 'Skip to Main Content' is covered in ticket #21791 (Landmarks)

[LizGovier]

Hey team! Please add your planning poker estimate with Zenhub @cameron-eyds @chdivyareddy @dimak1 @doug-lovett

[dimak1]

This ticket is pending screenshare with @LizGovier.

[dimak1]

@seeker25 PR is open and ready for review.

[dimak1]

Ready in DEV.

[chdivyareddy]

Hey @dimak1 , all the header functionality is working as expected, but the MHR search dropdown options are not functioning when the down arrow or tab buttons are used to navigate through the MHR search options. Please take a look at the screen recording from Chrome browser or you can try in DEV env, thank you!!

Private Zenhub Video

[dimak1]

Hi @chdivyareddy, appreciate thorough testing, but the MHR Search dropdown is not part of this ticket. This is just a Header related work. I see in the video that the MHR Search dropdown is losing focus. There might be more work to be done besides just styling and it could be its own ticket or combined with other items that also lose focus. That's my opinion, please let me know what you think. Thanks

[chdivyareddy]

@dimak1 , thanks for your input, will create a new ticket for this issue and move the current ticket along:)