[Change Request]: Research aria attributes on components

[chromaticWaster]

What type of enhancement/feature is this?

Behaviour Changes to existing UI Components, Documentation Improvements, Other

Description

Investigate using aria attributes on existing web components.

Currently the web components developed does not have full accessibility support. This is required for future proofing the components to cater for accessibility.

The following should be confirmed

How the current testing implementation of the components can be streamlined.
What accessibility attributes will be required for specific components (Labels vs Inputs).

Use Case/Reasoning for enhancement/feature.

Simplify the tests written for components.
Provide accessibility compliant components.
Understand which aria roles and aria attributes will be required for each component.

Code of Conduct

• I agree to follow this project's Code of Conduct
• I have searched for existing issues and to the best of my knowledge this is not a duplicate
• This is a single enhancement/feature

[chromaticWaster]

Note the following test case the aria-label attribute was added to the text field component a comparison using the browser extension lighthouse was used to compare the results of the same view on the Omni-components doc site.

Before aria-label added

After aria-label added

[chromaticWaster]

The following aria attributes should be considered (Note this comment will have edits as more attributes are confirmed)

aria-label
aria-disabled
aria-checked
aria-error