Window Button Accessibility

[KrashLeviathan]

Issue type

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

• [ ] bug report
• [X] feature request

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
   • Example: The first showcase on https://akveo.github.io/nebular/docs/components/window/overview#nbwindowservice
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