You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
-[core] Fix the release prepare steps (#47951) @silviuaavram
32
+
-[core] Remove Joy UI code and docs (#47939) @mnajdova
33
+
-[code-infra] Add previously missed export of themeCssVarsAugmentation (#47918) @brijeshb42
34
+
-[docs-infra] Import font module for nextjs transpilation (#47935) @brijeshb42
35
+
-[docs-infra] Migrate simpler modules from docs to mui-docs (#47897) @brijeshb42
36
+
-[test] Fix detached anchorEl elements in tests (#47929) @Janpot
37
+
38
+
All contributors of this release in alphabetical order: @Ahmad-Alaziz, @aman44444, @brijeshb42, @GerardasB, @Janpot, @mnajdova, @sai6855, @silviuaavram, @siriwatknp, @ZeeshanTamboli
Copy file name to clipboardExpand all lines: docs/data/material/components/steppers/steppers.md
+2Lines changed: 2 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -72,6 +72,8 @@ The use of the `StepButton` here demonstrates clickable step labels, as well as
72
72
flag. However because steps can be accessed in a non-linear fashion, it's up to your own implementation to
73
73
determine when all steps are completed (or even if they need to be completed).
74
74
75
+
Actionable steps mean that they control the content update of a section. From an accessibility standpoint, this means that each `StepButton` requires an `aria-controls` attribute pointing at the content section element.
Copy file name to clipboardExpand all lines: docs/data/material/migration/upgrade-to-v9/upgrade-to-v9.md
+79Lines changed: 79 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -118,6 +118,46 @@ This also fixes an issue where props like `color` were consumed by the Grid inst
118
118
</Grid>
119
119
```
120
120
121
+
### TablePagination numbers are formatted by default
122
+
123
+
Pagination numbers in `TablePagination` are now formatted using `Intl.NumberFormat` according to the locale.
124
+
For example, `103177` is displayed as `103,177` in `en-US` or `103.177` in `de-DE`.
125
+
126
+
To opt out of number formatting, provide a custom `labelDisplayedRows` function:
127
+
128
+
```jsx
129
+
<TablePagination
130
+
labelDisplayedRows={({ from, to, count }) =>
131
+
`${from}–${to} of ${count !==-1? count :`more than ${to}`}`
132
+
}
133
+
/>
134
+
```
135
+
136
+
Or when using a locale:
137
+
138
+
```jsx
139
+
import { enUS } from'@mui/material/locale';
140
+
141
+
consttheme=createTheme(
142
+
{
143
+
palette: {
144
+
primary: { main:'#1976d2' },
145
+
},
146
+
},
147
+
enUS,
148
+
{
149
+
components: {
150
+
MuiTablePagination: {
151
+
defaultProps: {
152
+
labelDisplayedRows: ({ from, to, count }) =>
153
+
`${from}–${to} of ${count !==-1? count :`more than ${to}`}`,
154
+
},
155
+
},
156
+
},
157
+
},
158
+
);
159
+
```
160
+
121
161
### Theme
122
162
123
163
`MuiTouchRipple` has been removed from the theme `components` types (`ComponentsProps`, `ComponentsOverrides`, and `ComponentsVariants`).
@@ -147,3 +187,42 @@ If you were using `MuiTouchRipple` in your theme, remove it and use global CSS w
147
187
### JSDOM support
148
188
149
189
v9 removes all usage of `process.env.NODE_ENV === 'test'`. The `NODE_ENV` variable will exclusively be used for for tree-shaking. Our libraries have been updated to auto-detect DOM environments that don't support layout such as [JSDOM](https://github.com/jsdom/jsdom) and [happy-dom](https://github.com/capricorn86/happy-dom) through user agent sniffing.
190
+
191
+
### Stepper, Step and StepButton
192
+
193
+
The `Stepper` and `Step` markups have changed to improve their semantics:
194
+
195
+
-`Stepper` returns a `<ol>` element instead of `<div>`.
196
+
-`Step` returns a `<li>` element instead of `<div>`.
197
+
198
+
The `Stepper` component now supports keyboard navigation when used with `StepButton` descendants. The navigation is implemented as a roving tabindex, supporting Arrow Keys as well as Home and End. Only one `StepButton` is focusable at a time, by having `tabindex="0"`, while the rest all have `tabindex="-1"`. Once selection is changed by Arrow Keys or Home / End, the `tabindex` value is also updated.
199
+
200
+
The markup for a `Stepper` with `StepButton` descendants has changed further to reflect this behavior. These changes apply on top of the tag changes described above.
201
+
202
+
The `Stepper` has:
203
+
204
+
- The `role` of `tablist`.
205
+
- The `aria-orientation` added. The value is either `horizontal` or `vertical` depending on the `orientation` prop.
206
+
207
+
The `StepButton` has:
208
+
209
+
- The `role` of `tab`.
210
+
- The `aria-current` changed to `aria-selected`. The value is `true` when step is selected, and `false` otherwise.
211
+
- The `aria-setsize` added. The value is the total number of steps.
212
+
- The `aria-posinset` added. The value is the index of the step inside the list, 1-based.
213
+
214
+
### Tabs
215
+
216
+
The `tabindex` attribute for each tab will be changed on Arrow Key or Home / End navigation. Previously, we only moved the focus on keyboard navigation. Now, we move the focus and also add the `tabindex="0"` to the focused element. The previously focused element will have its `tabindex` updated to `-1` in order to keep only one focusable `Tab` at a time.
217
+
218
+
Selecting a `Tab` will update the focus and `tabindex` as before.
219
+
220
+
### Menu and MenuList
221
+
222
+
The `tabindex` attribute for each menu item will be changed on Arrow Key, Home / End or Character Key navigation. Previously, we only moved the focus on keyboard navigation. Now, we move the focus and also add the `tabindex="0"` to the focused element. The previously focused element will have its `tabindex` updated to `-1` in order to keep only one focusable `MenuItem` at a time.
223
+
224
+
This change also applies to the `Menu` since it uses `MenuList`.
225
+
226
+
Selecting a `MenuItem` will update the focus and `tabindex` as before.
227
+
228
+
The `autoFocus` prop in `MenuList` does not set `tabindex="0"` on the `List` component anymore. It will always stay as `-1`.
0 commit comments