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: https://github.com/rancher/dashboard/pull/14530/commits/e28101963f42c8aab503eeec7b90d463dbea0274

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: https://github.com/rancher/dashboard/pull/14530/commits/41bb10efd230113f72f5744b30fe195a1862bec6

Changes:

• fix missing or wrong roles in different pages/components

6. ARIA attributes must conform to valid values

Commit: https://github.com/rancher/dashboard/pull/14530/commits/b85b1f7a582128ba98748e86bd0ac0c88ca19fd2

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: https://github.com/rancher/dashboard/pull/14530/commits/a4b3a8d2f2dfd2bbf2ba74fcfb55300a643f091b

Changes:

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

8. Interactive controls must not be nested

Commit: https://github.com/rancher/dashboard/pull/14530/commits/f472572e66b81b9dfccf591f5d71374c215a77c5

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: https://github.com/rancher/dashboard/pull/14530/commits/d1154efed593e3f9b9f51576355e4f2a4ecb121a

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: https://github.com/rancher/dashboard/pull/14530/commits/264c72f0497b8f9f9f7282b672f4bd4107b08522

Changes:

• Fix wrongful usage of autocomplete attribute

12. Form elements must have labels

Commit: https://github.com/rancher/dashboard/pull/14530/commits/0189291952d81b79dd395cc08a30752d0d7a4e85 + https://github.com/rancher/dashboard/pull/14530/commits/a1ab1d8dbaab423e0727b6258b29ad6a61405def

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: https://github.com/rancher/dashboard/pull/14530/commits/5796087cfd60ffa6b978cc1ffdfe71b9eca8c581

Changes:

• Add missing aria-label on NamespaceFilter component

15. Buttons must have discernible text

Commit: https://github.com/rancher/dashboard/pull/14530/commits/97d90030490c017269205f4dfef227d68a1095cb

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: https://github.com/rancher/dashboard/pull/14530/commits/b62608e6f278015011de391e47aa6da94e34fb1f

Changes:

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

17. ARIA role should be appropriate for the element

Commit: https://github.com/rancher/dashboard/pull/14530/commits/4df25b8d50862cd46cd80b5f18a3bef53c31e466 + https://github.com/rancher/dashboard/pull/14530/commits/ad801445949149b810fb59de5e1c97d867f46642

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

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

[aalves08]

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

[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 👍