bug(a11y): ion-range does not have an accessible name

[eric-horodyski]

Bug Report

Ionic version:

[ ] 4.x
[x] 5.x

Current behavior:

When using an ion-range component that contains an aria-label or aria-labelledby property, it is not rendered as part of the component. The range component does not contain properties for either of those values.

When using an ion-range in tandem with an accessibility checking tool, such as @axe-core/react, the following axe issue manifests:

serious: ARIA input fields must have an accessible name https://dequeuniversity.com/rules/axe/4.2/aria-input-field-name?application=axeAPI
Fix any of the following:

• aria-label attribute does not exist or is empty
• aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
• Element has no title attribute

Expected behavior:

Either aria-label or aria-labelledby should be rendered as part of the component.

Steps to reproduce:

1. Pull the reproduction linked in the section below.
2. Run npm install then npm start
3. Observe the issue within Chrome DevTools' console

Note: It may take a few refreshes for the issue to print to the console. An alternative way to check is to inspect the output HTML of the ion-range component and observe the missing aria-labelledby property.

Related code:

Reproduction Case: https://github.com/eric-horodyski/fw-react-a11y-range

Other information:

Ionic info:

Ionic:

   Ionic CLI       : 6.14.1 (/Users/eric/npm-global/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/react 5.6.6

Capacitor:

   Capacitor CLI   : 2.4.7
   @capacitor/core : 2.4.7

Utility:

   cordova-res                          : 0.15.3
   native-run (update available: 1.3.0) : 1.2.2

System:

   NodeJS : v14.17.0 (/Users/eric/.volta/tools/image/node/14.17.0/bin/node)
   npm    : 7.12.1
   OS     : macOS Big Sur

[liamdebeasi]

Thanks for the issue. This has been resolved via #23338, and a fix will be available in an upcoming release of Ionic Framework.

ion-range will now grab the value of any ion-label associated with it inside of an ion-item. Alternatively, you can set aria-label directly on ion-range, and it will be inherited to the inner knob elements.

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.