Skip to content

Commit

Permalink
[docs] Improve Pickers accessible DOM migration section description (m…
Browse files Browse the repository at this point in the history
  • Loading branch information
LukasTy committed Dec 19, 2024
1 parent 911ee2c commit b8cc28f
Showing 1 changed file with 6 additions and 3 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,13 @@ Feel free to [open an issue](/~https://github.com/mui/mui-x/issues/new/choose) for

## New DOM structure for the field

Before version `v8.x`, the fields' DOM structure consisted of an `<input />`, which held the whole value for the component,
but unfortunately presents a few limitations in terms of accessibility when managing multiple section values.
Before version `v7.x`, the fields' DOM structure consisted of an `<input />`, which held the whole value for the component.
Unfortunately it presented accessibility limitations, which are impossible to resolve.

Starting with version `v8.x`, all the field and picker components come with a new DOM structure that allows the field component to set aria attributes on individual sections, providing a far better experience with screen readers.
Starting with version `v7.x`, we have introduced a new DOM structure that allows the field component to set aria attributes on individual sections, providing a far better experience on screen readers.
This approach is recommended in [W3C ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/spinbutton/examples/datepicker-spinbuttons/) example and is also used by native date HTML input element under the hood.

Starting with version `v8.x`, the new DOM structure is the default for all fields.

### Fallback to the non-accessible DOM structure

Expand Down

0 comments on commit b8cc28f

Please sign in to comment.