[fields] Switch to next section when pressing `Tab`

[jameshulse]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Steps to reproduce 🕹

Link to live example: https://codesandbox.io/s/dawn-moon-3szlw1?file=/src/App.js

Steps:

1. Click the month part of the Mui date picker
2. Press the key

Current behavior 😯

Focus is moved away from the text field to the calendar icon?

Expected behavior 🤔

Focus should move from the 'month' part of the text field to the 'year' part. I would expect the same from <shift + tab> moving back.

Context 🔦

I am used to using my keyboard for navigation and this is the functionality I expect from a date picker as this is how the default browser picker works (at least in Chrome).

Your environment 🌎

npx @mui/envinfo

System: OS: Linux 6.0 Pop!_OS 22.04 LTS Binaries: Node: 16.13.1 - ~/.nvm/versions/node/v16.13.1/bin/node Yarn: 1.22.15 - ~/.yarn/bin/yarn npm: 8.1.2 - ~/.nvm/versions/node/v16.13.1/bin/npm Browsers: Chrome: 113.0 Firefox: 113.0 npmPackages: @emotion/react: ^11.11.0 => 11.11.0 @emotion/styled: ^11.11.0 => 11.11.0 @mui/base: 5.0.0-alpha.128 @mui/core-downloads-tracker: 5.12.3 @mui/icons-material: ^5.11.16 => 5.11.16 @mui/material: ^5.12.3 => 5.12.3 @mui/private-theming: 5.12.3 @mui/styled-engine: 5.12.3 @mui/system: 5.12.3 @mui/types: 7.2.4 @mui/utils: 5.12.3 @mui/x-data-grid: 6.4.0 @mui/x-data-grid-pro: ^6.4.0 => 6.4.0 @mui/x-date-pickers: ^6.5.0 => 6.5.0 @mui/x-license-pro: 6.0.4 @types/react: 17.0.59 react: ^18.2.0 => 18.2.0 react-dom: ^18.2.0 => 18.2.0 styled-components: ^4.4.1 => 4.4.1

Browser: Chromium Version 113.0.5672.92

Order ID or Support key 💳 (optional)

No response

[flaviendelangle]

Cc @LukasTy

I initially implemented the navigation with Tab in #7797 but stalled the work due to some unanswered questions.

[LukasTy]

Thank you for reporting this behavior discrepancy. We are aware (#6384) of it and the current behavior is intentional. The issue is that our current field components implementation lacks proper a11y support. Making the Tab navigate between the sections of the field would only highlight the a11y shortcoming even more and might disorient certain screen reader users.

We have planned a refactor of the fields with better a11y support and in turn your expected keyboard navigation behavior for the next major. 😉

[jameshulse]

Okay, I will look forward to the next major version. Thanks.

Is it possible to extend our implementation to take advantage of the tab handler from #7797? We unfortunately won't be able to cater our whole application to screen readers at this stage, but could still make use of better keyboard support.

[flaviendelangle]

Sure, here it is

It will not work in right to left, in order to fix it we would need to expose the internal information about the visual order in RTL or methods like selectNextSection / selectPreviousSection in fieldRef (which would be a nice higher-level information).

[LukasTy]

Sure, here it is

Just don't forget to move the event.preventDefault inside of each of the if blocks or refactor code to allow for regular tabulation to still work (tab out of the field). 👌

[flaviendelangle]

Your right! I edited the demo :+1:

[jameshulse]

Fantastic. Thank you for taking the time @flaviendelangle.