search

akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Window Button Accessibility #3167

Open KrashLeviathan opened 1 year ago

KrashLeviathan commented 1 year ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior: The header buttons on Window components (e.g. minimize, expand, close) do not meet WCAG accessibility standards (they do not have aria labels that can be read by a screen reader). When you tab to one of the buttons with a screen reader enabled, it just says "button".

Expected behavior: Each button should have an aria-label attribute so that it says something like "Close Window" when you tab to the button with a screen reader enabled.

Steps to reproduce:

  1. Install screen reader software like NVDA (free) or JAWS.
  2. Run a website that uses the Nebular framework and has a dialog window component
  3. Open the window
  4. With the screen reader enabled, use the tab key to navigate fields in the window
    • When the close button is in focus, the screen reader should say something like "Close Window button". Instead, it just says "button" because the HTML button element has no aria-label (or equivalent) attribute.

Related code: View on the Nebular - Window Angular UI Component page in the first showcase

The fix would be to add something like this to each button (just the aria-label attribute):

<button aria-label="Close" ...>
  <nb-icon icon="close-outline" ...>
    ...
  </nb-icon>
</button>

Other information:

https://www.w3.org/TR/WCAG22/ https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-label