[pickers] Remove clear button in tab sequence

[oliviertassinari]

Steps to reproduce

Link to live example: (required)

Steps:

1. Open https://mui.com/x/react-date-pickers/date-picker/#clearing-the-value

https://github.com/user-attachments/assets/fb386989-7da6-47e0-910e-8b5dbc4cb044

Current behavior

The clear button is in the Tab sequence.

Expected behavior

The clear button is not in the tab sequence.

Context

Started to discuss this in https://github.com/mui/mui-x/pull/13289#discussion_r1721293102.

In the autocomplete we ruled to not have it in the tab sequence:

• https://github.com/mui/material-ui/issues/30815#issuecomment-1028935533
• https://github.com/mui/material-ui/issues/30815#issuecomment-2296573576

It would make sense to me to do the same here for the sake of being simple to navigate inside a complex form with the keyboard. The date picker seems simpler to clear than an autocomplete:

• I tab into it. In both cases, everything is selected, so pressing delete once empties the field.
• I have just selected a value. In both cases, I select all + press delete
• I have just selected a value. I spam the delete key, the autocomplete usually has more characters to remove, so is a bit slower.

More on this: https://scottaohara.github.io/clear-text-field-button/.

The clear button is purposefully not in the tabbing order of the web page. Keyboard users can use the Delete or Backspace keys (or first select all the text field's text and then use these keys) to delete the contents of the text field.

Your environment

npx @mui/envinfo

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

Search keywords: -

[michelengelen]

Seems like a valid change and with good reasoning. I did add this to the board so we can sicuss further in the grooming! 👍🏼

[GBvanDam]

In the autocomplete, the dropdown icon is not in the tab sequence either, should the openPickerIcon be in the tab sequence, or should this one be removed from the tab sequence too? I wouldn't mind if this icon would be removed from the tab sequence too.

The only consequence it will have is that people should have the possibility to open the calendar by keyboard whilst focusing on the field. If I'm not mistaken, if you press space on the field right now, the calendar won't open. The calendar will only open when you press space whilst focussing on the openPickerIcon specifically. This might be fixed if pressing space on the field in general would open the calendar?

[LukasTy]

@GBvanDam for a widget with the dropdown role your mentioned behavior is expected, but for Pickers using a text field or a group of spinbutton elements that is not necessarily the default "norm". We are closely following the guidelines of https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/ but native date input element does indeed open on Space click. I will create an issue for this topic to discuss among the team. 👍

TL/DR: Yes, using Space to open the Picker makes sense, but no, I disagree with removing the open button from the tab sequence. 😉

[github-actions[bot]]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue. Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

[GBvanDam]

@LukasTy completely agree! Great to hear that you at least thought about it, and if I understand you correctly the open on space will be added, which is great! Thanks for your support!