[Dashboard management UI][SCREEN READER]: Dual range slider inputs need accessible labels that include the `prepended` string

[1Copenut]

Description The dual range slider in the Dashboard UI do not have meaningful, semantic labels. The underlying EuiDualRangeSlider component has the ability to add ARIA attributes into the minInputProps and maxInputProps, so I think we can construct meaningful labels. I've included a screenshot and relevant code snippets to (hopefully) make the ask clear.

Steps to reproduce

1. Start a screen reader of your choosing
2. Log into a QA environment and open a new classic Deployment
3. Turn on the sample dashboards and navigate to one. I used the E-commerce sample data for this demo.
4. Tab through until the Quantity slider has focus. Make sure the first input has the focus.
5. Verify the input is announced as a spinbox or number input, but the "Quantity" label is never read

Screenshots

Proposed solution The EuiDualRangeSlider allows for the ARIA attributes we need. I want to add an aria-label to each input, and an ID to each input and the prepended string. This will allow us to concatenate the prepended text with the input's accessible label to make each one more meaningful.

See range_slider_control.tsx#L199

! range_slider_control.tsx

minInputProps={{
  ...getCommonInputProps({
    inputValue: displayedValue[0],
    testSubj: 'lowerBoundFieldNumber',
    placeholder: String(min ?? -Infinity),
  }),
+ "aria-label": "minimum value" // or another value that makes sense and is internationalized
+ "aria-labelledby": "PREPENDED_ID THIS_MIN_ID"
+ id="THIS_MIN_ID"
}}

maxInputProps={{
  ...getCommonInputProps({
    inputValue: displayedValue[0],
    testSubj: 'lowerBoundFieldNumber',
    placeholder: String(min ?? -Infinity),
  }),
+ "aria-label": "maximum value" // or another value that makes sense and is internationalized
+ "aria-labelledby": "PREPENDED_ID THIS_MAX_ID"
+ id="THIS_MAX_ID"
}}

Actual Result

• The input label is never read

Expected Result

• The minimum and maximum inputs read off the prepended "Quantity" label plus their own accessible labels
• No axe-core violations are thrown by the code change

Kibana Version: 8.14.0

OS: MacOS

Browser: Chrome latest

Screen reader VoiceOver

Relevant WCAG Criteria:

• Understanding SC 4.1.2 Name, Role, Value (Level A)

[elasticmachine]

Pinging @elastic/kibana-accessibility (Project:Accessibility)

[elasticmachine]

Pinging @elastic/kibana-presentation (Team:Presentation)