Landmarks & ARIA

  • Navigation rail: <nav id="ed-rail" aria-label="Admin groups"> provides a clear landmark for assistive tech.
  • Flyout panel: <aside id="ed-flyout" aria-label="Group menu panel" aria-hidden="true"> is hidden from screen readers when closed and exposed when opened.
  • List semantics: the flyout list container is role="list" and each item link is role="listitem".
  • Global Search modal:
    • Dialog scaffold: role="dialog" aria-modal="true" aria-labelledby="ed-modal-title".
    • Results list: #ed-global-results is role="listbox" with aria-live="polite" so updates are announced without being intrusive.
    • Result items: each result is role="option" with a roving tabindex (current item tabindex="0", others -1).
    • Search field: #ed-global-search is type="search" with a descriptive ARIA label.
  • Group controls: each .ed-group-btn declares aria-controls="ed-flyout" and aria-haspopup="true". The active group is reflected with aria-current="true" on the triggering button.
  • Decorative icons: Dashicons inside the UI carry aria-hidden="true". Image-based icons are created with alt="" plus explicit dimensions and async decoding hints.

Keyboard & focus behavior

  • Open a group with keyboard: pressing Enter or Space on a .ed-group-btn opens that group.
  • Close behaviors: Escape closes both the flyout and the search modal; clicking outside also closes the flyout.
  • Search navigation: when the modal is open and focus is in the search input, Arrow Down/Up moves focus through results; Enter on a focused result follows the link.
  • Focus management: opening the Search modal moves focus to #ed-global-search; the page behind is scroll-locked while the dialog is open.
  • Visible focus states: .ed-group-btn and .ed-link-btn style :focus-visible; .ed-item styles :focus, providing clear, high-contrast cues without relying solely on default outlines.

Live regions & state

  • aria-live="polite" on the results list announces new search results without interrupting.
  • aria-hidden is toggled on the flyout and modal containers to accurately reflect visibility to assistive technologies.
  • Buttons use aria-current to announce the currently active group.

Motion & comfort

  • Respects user preference: under @media (prefers-reduced-motion: reduce), transition animations for the flyout are disabled.

Internationalization (a11y-adjacent)

  • All user-facing labels (including ARIA labels) are passed through WordPress i18n functions with the ed-admin-ux text domain, so screen reader text is localized along with the UI.

File touchpoints (for reference)

  • Markup & attributes: inc/UI/Menu.php (rail, flyouts, search modal, ARIA roles/labels).
  • Keyboard & focus logic: assets/src/js/main.js (Enter/Space to open, Escape to close, Arrow key navigation, roving tabindex, aria-hidden toggling, scroll lock while modal is open).
  • Focus visuals & reduced motion: assets/src/css/index.css (:focus-visible/:focus styles, @media (prefers-reduced-motion: reduce)).