Slider input has no accessible name

[kirsty-hames]

Subject of the issue

Client feedback has reported the following:
The accessible name of the slider itself must be set (referring to the <input type="range">). See in the screenshot below the name property is blank.

Your environment

• v5.28.15 Framework but applies to latest
• v4.3.7 Slider but applies to latest

Expected behaviour

The slider <input type="range"> should have an appropriate aria-label or aria-labelledby property set.

Note, same issue applies to the confidenceSlider.

[kirsty-hames]

Looking at Mozilla ARIA slider role, An accessible name is required. If the range's role is applied to an HTML <input> element (or <meter> or <progress> element), the accessible name can come from the associated <label>. Otherwise use aria-labelledby if a visible label is present or aria-label if a visible label is not present.

As we don't use <label>, I'd suggest we use aria-labelledby if labelStart and labelEnd exist. Otherwise, use aria-label and make this a required property to set a name for the slider?

[kirsty-hames]

In addition, Mozilla ARIA slider role best practice states HTML's <input type="range"> implicitly has the role of slider. Do not use aria-valuemax or aria-valuemin attributes on <input type="range"> elements; use min and max instead. Otherwise, any global aria-* attributes and any other aria-* attributes applicable to the slider role.

Slider already uses min and max properties but maybe we should remove role="slider", aria-valuemax and aria-valuemin as suggested? UPDATE: raised as separate issue #191