DP-23099 org page a11y keyboard nav fix

[ygannett]

Any PRs being created needs a changelog.txt file before being merged into dev. See: Change Log Instructions

Description

Issue 5. Unable to leave the navigation container in the middle as a user wish.

• Set up to close div.ma__organization-navigation__subitem with ESC key wherever focus in the container, and set focus on the container's associated. In mobile, closing behaviors are in 3 levels:

1. top menu
2. sub menu fly-out
3. [I want to only] accordions

• ESC close an open container and focus on its parent menu label.

Issue 10. The org nav dropdown content is announced as its menu button gets focus even when the menu is not expanded. Also, the buttons are not announced as buttons, interactive elements.

• Set visibility: hidden; to hide the menu containers from keyboard and screen readers when they are not visible. Toggle it as menu buttons are clicked.

Issue 13. The org nav dropdown doesn't open by hitting either ENTER or SPACE. No access to the dropdown container.

• Change the event trigger from focus to click.

Issue 14. The "Search this org." button label doesn't give enough context to screen reader users. For screen reader users, it's not clear the button is a search button to trigger search or a search component button.

• Add aria-label to distinguish from the "search" button.
• Add aria-describedby to provide the information about this search component.

<button class="ma__organization-navigation__search--toggle js-search-toggle"
  aria-label="open the search box for the organization specific search"
  aria-describedby="org-search-note"
>
  <svg aria-hidden="true" focusable="false"><use xlink:href="#96c973c3985894519e07c190c6a2e604"></use></svg> 
  <span class="search-label">Search this organization</span>
</button>
...
<!-- set this container with "display: none;".  Secreen readers still announces its content through arai-describedby. --> 
<div id="org-search-note">
You can search within this organization with this search box. When you hit the search button, you'd leave this page. <-- REPLACE WITH PROPER TEXT.
</div>

Issue 15. No state of the button is announced.

• Add aria-expanded to the button, and set up to change its value to reflect the button's state: aria-expanded="true/false"
• This is set up in all buttons in the org nav as the mobile version has more layers.

Issue 17. When the org search component opens, the close button has focus and it gets announced.

Because of missing context, not quite sure what to do as next step. Not clear that what the button closes.

• Add aria-label to the button to explain what the button close.

<button class="ma__organization-navigation__search--toggle js-search-toggle" aria-label="close search this organization box">

Issue 18. After the close button is announced as "button close", NVDA also announces its pseudo content as a button, "button times." The button is announced as "close times."

Screen readers announce pseudo content. In this case particularly, the use of pseudo content is not ideal since it's decorative. Decorative content, which doesn't provide any information, shouldn't be visible to screen readers like decorative images.

• Remove the style and hide the "x" from screen readers. Hide the replacement content in span with css.

<button class="ma__organization-navigation__search--toggle js-search-toggle">
  <svg aria-hidden="true" focusable="false"><use xlink:href="#96c973c3985894519e07c190c6a2e604"></use></svg> 
  <span class="search-label">Close</span>
  <span class="ma__visally-hidden">x</span>
</button>

Related Issue / Ticket

• JIRA issue
• Github issue

Steps to Test

Screenshots

Use something like licecap to capture gifs to demonstrate behaviors.

Additional Notes:

Anything else to add?

Impacted Areas in Application

@todo

Today I learned...