[pickers] getViewSwitchingButtonText prop does not work

[jhallvertigis]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Current behavior 😯

Note: There are different issues for the DatePicker, DateRangePicker, DateTimePicker, and TimePicker components. See notes below. Let me know if this issue should be split into different bug tickets for each bug occurrence.

In the DatePicker and DateRangePicker components, attempting to override the view switching button's aria-label via getViewSwitchingButtonText property does not currently change the aria-label at all.

In the DateTimePicker component, the view switch button does not show up at all, even though showToolbar is set to true. This results in getViewSwitchingButtonText not doing anything at al.

In the TimePicker component, getViewSwitchingButtonText isn't a supported prop despite the component having a view switch button when showToolbar is set to true.

Expected behavior 🤔

DatePicker & DateRangePicker: Supplying a getViewSwitchingButtonText prop should override the aria-label in the view switching button.

DateTimePicker: The view switching button needs to show up so getViewSwitchingButtonText can be usable.

TimePicker: getViewSwitchingButtonText needs to be a supported prop, as this component has a view switching button when showToolbar is set to true.

Steps to reproduce 🕹

Sample: https://codesandbox.io/embed/sharp-ramanujan-3topgp?fontsize=14&hidenavigation=1&theme=dark

Steps:

1. Open the DatePicker.
2. Use the browser console and inspect the view switching button.
3. Find the aria-label for the element in the browser console.

Context 🔦

I am adding these date/time pickers to my application that supports multiple languages. I'm using useViewSwitchingButtonText in each of these components to translate the aria-label of these buttons for each language.

Your environment 🌎

`npx @mui/envinfo`

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Browser: Google Chrome Version 99.0.4844.82 (Official Build) (64-bit)
System:
    OS: Windows 10 10.0.19041
  Binaries:
    Node: 14.16.0 - C:\Program Files\nodejs\node.EXE
    Yarn: 1.22.17 - ~\AppData\Roaming\npm\yarn.CMD
    npm: 6.14.11 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Spartan (44.19041.1266.0), Chromium (99.0.1150.39)
  npmPackages:
    @emotion/react:  11.5.0
    @emotion/styled:  11.3.0
    @mui/base:  5.0.0-alpha.73
    @mui/icons-material:  5.2.5
    @mui/lab:  5.0.0-alpha.74
    @mui/material:  5.5.2
    @mui/private-theming:  5.4.4
    @mui/styled-engine:  5.5.2
    @mui/system:  5.5.2
    @mui/types:  7.1.3
    @mui/utils:  5.4.4
    @types/react:  17.0.34
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ~4.4.4 => 4.4.4

[m4theushw]

@alexfauquette started to work on adding support for different languages in #4517

In the DatePicker and DateTimePicker getViewSwitchingButtonText works:

In the TimePicker component, getViewSwitchingButtonText isn't a supported prop despite the component having a view switch button when showToolbar is set to true.

The component has previous and next buttons. getViewSwitchingButtonText is only applied when the view switcher is the small arrow next to the year select. Despite that, this should be improved as for the user it doesn't matter.

With the support for different languages we may remove props like getViewSwitchingButtonText in favor of changing the translations in one single place. Anyway, we should make clear where the label is used.

[alexfauquette]

I think we are not talking about the same text.

getViewSwitchingButtonText was only wor switching between year and date views in calendars. So it has been renamed calendarViewSwitchingButtonAriaLabel

I think you are looking for getMobileKeyboardInputViewButtonText which is applied on the pen. I will open a PR to add this translation in the localText prop

For the DateTimePicker yes it can only appear in mobile mode for now. Should be fixed

[alexfauquette]

Seems to be fixed

Here are the 3 components with showToolbar they all have a view switching and are supported by nex localization
https://codesandbox.io/s/blissful-surf-e5qjug?file=/demo.tsx