A11y report fixes

[aalves08]

Summary

Fixes #14556

Work done was based on this report with 219 violations:

accessibility-report (5).zip

Current status after this PR is 64 violations, as per:

Occurred changes and/or fixed issues

• Fixes "low-hanging" fruit from a11y test report, as per the following description:

item 2: All page content should be contained by landmarks

Commit: e281019

Changes:

• page level content like SlideInPanel, PluginInfoPanel, SlideInPanelManager and AppModal wasn't being contained by landmark items

4. Elements must only use permitted ARIA attributes

Commit: 41bb10e

Changes:

• fix missing or wrong roles in different pages/components

6. ARIA attributes must conform to valid values

Commit: b85b1f7

Changes:

• Fix wrong usage of aria-controls and add missing role and id

7. "ul" and "ol" must only directly contain "li", "script" or "template" elements

Commit: a4b3a8d

Changes:

• replace div for li as direct child of ul in Wizard component

8. Interactive controls must not be nested

Commit: f472572

Changes:

• Change side nav Group component in order to have "chevron" tabbable item as sibling of router-link in order to comply with a11y specs

Before PR

After PR (no visual or usability regresssions)

10. ARIA toggle fields must have an accessible name

Commit: d1154ef

Changes:

• Fix Checkbox component where using labelKey the translation tag <t> wasn't inherithing the id used for internal aria-labelledby

11. autocomplete attribute must be used correctly

Commit: 264c72f

Changes:

• Fix wrongful usage of autocomplete attribute

12. Form elements must have labels

Commit: 0189291 + a1ab1d8

Changes:

• add aria-hidden to "hidden" inputs so that assistive technologies and a11y tests won't pick them up

14. ARIA input fields must have an accessible name

Commit: 5796087

Changes:

• Add missing aria-label on NamespaceFilter component

15. Buttons must have discernible text

Commit: 97d9003

Changes:

• add missing aria-label to header actions (buttons) coming from extensions + plus and minus actions on Tabbed (Tabs) component

16. Images must have alternative text

Commit: b62608e

Changes:

• add missing alt to header actions (buttons) icons coming from extensions

17. ARIA role should be appropriate for the element

Commit: 4df25b8 + ad80144

Changes:

• Fix issue where input type="number" had wrongful role="textbox" (role is inherent) + label html elements cannot have role="columnheader"

Technical notes summary

Areas or cases that should be tested

Areas which could experience regressions

Screenshot/Video

Checklist

• The PR is linked to an issue and the linked issue has a Milestone, or no issue is needed
• The PR has a Milestone
• The PR template has been filled out
• The PR has been self reviewed
• The PR has a reviewer assigned
• The PR has automated tests or clear instructions for manual tests and the linked issue has appropriate QA labels, or tests are not needed
• The PR has reviewed with UX and tested in light and dark mode, or there are no UX changes
• The PR has been reviewed in terms of Accessibility

[aalves08]

@rak-phillip add pr comments addressed. Ready for another go

[nwmac]

Looks reasonable to me

[rak-phillip]

LGTM

[torchiaf]

We found a regression introduced by current PR, @aalves08 could you take a look ?

[aalves08]

We found a regression introduced by current PR, @aalves08 could you take a look ?

On it @torchiaf 👍