[Slider] Add getAriaLabel prop

[city41]

• I have followed (at least) the PR section of the contributing guide.

Fixes #17231

I followed the pattern set by getAriaValueText. I noticed its documentation wasn't quite right (missed @returns {string} so I added that to both functions.

The only test I added is for the console warning, which matches the test coverage of getAriaValueText.

Also, should aria-labelledby have an equivalent getAriaLabelledBy?

[mui-pr-bot]

Details of bundle changes.

Comparing: f55f3a4...76b3746

bundle	parsed diff	gzip diff	prev parsed	current parsed	prev gzip	current gzip
@material-ui/core	+0.01% 🔺	+0.01% 🔺	330,879	330,921	90,349	90,361
@material-ui/core/Paper	0.00%	0.00%	68,774	68,774	20,485	20,485
@material-ui/core/Paper.esm	0.00%	0.00%	62,148	62,148	19,214	19,214
@material-ui/core/Popper	0.00%	0.00%	28,466	28,466	10,190	10,190
@material-ui/core/Textarea	0.00%	0.00%	5,094	5,094	2,137	2,137
@material-ui/core/TrapFocus	0.00%	0.00%	3,834	3,834	1,613	1,613
@material-ui/core/styles/createMuiTheme	0.00%	0.00%	16,385	16,385	5,827	5,827
@material-ui/core/useMediaQuery	0.00%	0.00%	2,541	2,541	1,058	1,058
@material-ui/lab	+0.03% 🔺	+0.05% 🔺	153,137	153,179	46,644	46,669
@material-ui/styles	0.00%	0.00%	51,492	51,492	15,303	15,303
@material-ui/system	0.00%	0.00%	15,668	15,668	4,359	4,359
Button	0.00%	0.00%	78,661	78,661	24,053	24,053
Modal	0.00%	0.00%	14,344	14,344	5,019	5,019
Portal	0.00%	0.00%	2,907	2,907	1,318	1,318
Rating	0.00%	0.00%	70,014	70,014	21,866	21,866
Slider	+0.06% 🔺	+0.08% 🔺	74,240	74,282	22,994	23,012
colorManipulator	0.00%	0.00%	3,904	3,904	1,543	1,543
docs.landing	0.00%	0.00%	52,253	52,253	13,780	13,780
docs.main	0.00%	0.00%	597,355	597,355	190,798	190,798
packages/material-ui/build/umd/material-ui.production.min.js	+0.02% 🔺	+0.04% 🔺	301,797	301,843	86,659	86,692

Generated by 🚫 dangerJS against 76b3746

[city41]

renamed the commit to make the new PR name

[oliviertassinari]

This looks great! Should we update http://material-ui.com/components/slider/#accessibility too? Like

diff --git a/docs/src/pages/components/slider/slider.md b/docs/src/pages/components/slider/slider.md
index c85ada73f..bc9d5a4a0 100644
--- a/docs/src/pages/components/slider/slider.md
+++ b/docs/src/pages/components/slider/slider.md
@@ -53,7 +53,7 @@ Continuous sliders allow users to select a value along a subjective range.
 The component handles most of the work necessary to make it accessible.
 However, you need to make sure that:

-- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop).
-- Each thumb has a user-friendly name for its current value.
+- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop).
+- Each thumb has a user-friendly text for its current value.
 This is not required if the value matches the semantics of the label.
 You can change the name with the `getAriaValueText` or `aria-valuetext` prop.

[oliviertassinari]

Don't worry about the commit name, we erase it when we merge.

[mbrookes]

While we're here, should we @ignore the aria-* props? As a rule we don't document standard props in the API documentation.

[oliviertassinari]

I think that we should keep it because we have a non default behavior, the aria prop is not applied on the root element.

[mbrookes]

the aria prop is not applied on the root element

The API docs don't mention that, they simply document the standard aria props. If that implementation detail is important, it could be mentioned in the accessibility section.

Speaking of which, what does "This is not required if the value matches the semantics of the label." mean?

[city41]

I updated the messages as well as slider.md's accessibility section (didn't realize that existed, thanks for the heads up)

[eps1lon]

This is a great step towards better a11y of range sliders.

Could you add a test with a range slider and getAriaLAbel? I think you can use getByLabelText() and check that it has the slider role. That should cover most a11y concerns of this feature.

updated

[eps1lon]

Just a minor nitpick about test failure messages.

[oliviertassinari]

Awesome

[angel-langdon]

getAriaLabel doesn't work.
I am applying this function

labeltext(index) {
   console.log(this.state.data[index])
  return this.state.data[index]; // "string"
}

but it seems getAriaLabel isn't even being called

[eps1lon]

@007sya Please open a new issue and fill out the template. It's hard to to resolve in an already merged PR.