Skip to content

Commit 1b40562

Browse files
danilo-lealdanilo-leal
authored
[base-ui][docs] Update the Accessibility page demos design (#40995)
1 parent e8e4cc0 commit 1b40562

File tree

6 files changed

+170
-109
lines changed

6 files changed

+170
-109
lines changed

‎docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,7 +162,7 @@ const Select = React.forwardRef(function CustomSelect(props, ref) {
162162
return {
163163
...resolvedSlotProps,
164164
className: clsx(
165-
`${isDarkMode ? 'dark' : ''} z-10x`,
165+
`${isDarkMode ? 'dark' : ''} z-10`,
166166
resolvedSlotProps?.className,
167167
),
168168
};

‎docs/data/base/components/select/UnstyledSelectIntroduction/tailwind/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -181,7 +181,7 @@ const Select = React.forwardRef(function CustomSelect<
181181
return {
182182
...resolvedSlotProps,
183183
className: clsx(
184-
`${isDarkMode ? 'dark' : ''} z-10x`,
184+
`${isDarkMode ? 'dark' : ''} z-10`,
185185
resolvedSlotProps?.className,
186186
),
187187
};

‎docs/data/base/getting-started/accessibility/FocusRing.js‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -26,59 +26,70 @@ const Slider = styled(BaseSlider)(
2626
height: 6px;
2727
width: 100%;
2828
padding: 16px 0;
29-
display: inline-block;
29+
display: inline-flex;
30+
align-items: center;
3031
position: relative;
3132
cursor: pointer;
3233
touch-action: none;
3334
-webkit-tap-highlight-color: transparent;
3435
35-
&:hover {
36-
opacity: 1;
37-
}
38-
3936
& .${sliderClasses.rail} {
4037
display: block;
4138
position: absolute;
4239
width: 100%;
4340
height: 4px;
44-
border-radius: 2px;
41+
border-radius: 6px;
4542
background-color: currentColor;
46-
opacity: 0.4;
43+
opacity: 0.3;
4744
}
4845
4946
& .${sliderClasses.track} {
5047
display: block;
5148
position: absolute;
5249
height: 4px;
53-
border-radius: 2px;
50+
border-radius: 6px;
5451
background-color: currentColor;
5552
}
5653
5754
& .${sliderClasses.thumb} {
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
5858
position: absolute;
59-
width: 16px;
60-
height: 16px;
6159
margin-left: -6px;
62-
margin-top: -6px;
60+
width: 20px;
61+
height: 20px;
6362
box-sizing: border-box;
6463
border-radius: 50%;
6564
outline: 0;
66-
border: 3px solid currentColor;
67-
background-color: #fff;
65+
background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
66+
transition-property: box-shadow, transform;
67+
transition-timing-function: ease;
68+
transition-duration: 120ms;
69+
transform-origin: center;
70+
71+
&:hover {
72+
box-shadow: 0 0 0 6px ${alpha(
73+
theme.palette.mode === 'light' ? blue[200] : blue[300],
74+
0.3,
75+
)};
76+
}
6877
69-
:hover,
7078
&.${sliderClasses.focusVisible} {
71-
box-shadow: 0 0 0 0.25rem ${alpha(
72-
theme.palette.mode === 'light' ? blue[400] : blue[300],
73-
0.15,
79+
box-shadow: 0 0 0 8px ${alpha(
80+
theme.palette.mode === 'light' ? blue[200] : blue[400],
81+
0.5,
7482
)};
83+
outline: none;
7584
}
7685
7786
&.${sliderClasses.active} {
78-
box-shadow: 0 0 0 0.25rem ${alpha(
79-
theme.palette.mode === 'light' ? blue[200] : blue[300],
80-
0.3,
87+
box-shadow: 0 0 0 8px ${alpha(
88+
theme.palette.mode === 'light' ? blue[200] : blue[400],
89+
0.5,
8190
)};
91+
outline: none;
92+
transform: scale(1.2);
8293
}
8394
}
8495
`,

‎docs/data/base/getting-started/accessibility/FocusRing.tsx‎

Lines changed: 31 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -26,59 +26,70 @@ const Slider = styled(BaseSlider)(
2626
height: 6px;
2727
width: 100%;
2828
padding: 16px 0;
29-
display: inline-block;
29+
display: inline-flex;
30+
align-items: center;
3031
position: relative;
3132
cursor: pointer;
3233
touch-action: none;
3334
-webkit-tap-highlight-color: transparent;
3435
35-
&:hover {
36-
opacity: 1;
37-
}
38-
3936
& .${sliderClasses.rail} {
4037
display: block;
4138
position: absolute;
4239
width: 100%;
4340
height: 4px;
44-
border-radius: 2px;
41+
border-radius: 6px;
4542
background-color: currentColor;
46-
opacity: 0.4;
43+
opacity: 0.3;
4744
}
4845
4946
& .${sliderClasses.track} {
5047
display: block;
5148
position: absolute;
5249
height: 4px;
53-
border-radius: 2px;
50+
border-radius: 6px;
5451
background-color: currentColor;
5552
}
5653
5754
& .${sliderClasses.thumb} {
55+
display: flex;
56+
align-items: center;
57+
justify-content: center;
5858
position: absolute;
59-
width: 16px;
60-
height: 16px;
6159
margin-left: -6px;
62-
margin-top: -6px;
60+
width: 20px;
61+
height: 20px;
6362
box-sizing: border-box;
6463
border-radius: 50%;
6564
outline: 0;
66-
border: 3px solid currentColor;
67-
background-color: #fff;
65+
background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
66+
transition-property: box-shadow, transform;
67+
transition-timing-function: ease;
68+
transition-duration: 120ms;
69+
transform-origin: center;
70+
71+
&:hover {
72+
box-shadow: 0 0 0 6px ${alpha(
73+
theme.palette.mode === 'light' ? blue[200] : blue[300],
74+
0.3,
75+
)};
76+
}
6877
69-
:hover,
7078
&.${sliderClasses.focusVisible} {
71-
box-shadow: 0 0 0 0.25rem ${alpha(
72-
theme.palette.mode === 'light' ? blue[400] : blue[300],
73-
0.15,
79+
box-shadow: 0 0 0 8px ${alpha(
80+
theme.palette.mode === 'light' ? blue[200] : blue[400],
81+
0.5,
7482
)};
83+
outline: none;
7584
}
7685
7786
&.${sliderClasses.active} {
78-
box-shadow: 0 0 0 0.25rem ${alpha(
79-
theme.palette.mode === 'light' ? blue[200] : blue[300],
80-
0.3,
87+
box-shadow: 0 0 0 8px ${alpha(
88+
theme.palette.mode === 'light' ? blue[200] : blue[400],
89+
0.5,
8190
)};
91+
outline: none;
92+
transform: scale(1.2);
8293
}
8394
}
8495
`,

‎docs/data/base/getting-started/accessibility/KeyboardNavigation.js‎

Lines changed: 50 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
import * as React from 'react';
2+
import PropTypes from 'prop-types';
23
import { Select as BaseSelect, selectClasses } from '@mui/base/Select';
34
import { Option as BaseOption, optionClasses } from '@mui/base/Option';
45
import { Dropdown } from '@mui/base/Dropdown';
56
import { Menu } from '@mui/base/Menu';
67
import { MenuButton as BaseMenuButton } from '@mui/base/MenuButton';
78
import { MenuItem as BaseMenuItem, menuItemClasses } from '@mui/base/MenuItem';
8-
import { styled } from '@mui/system';
9+
import { styled, alpha } from '@mui/system';
10+
import UnfoldMoreRoundedIcon from '@mui/icons-material/UnfoldMoreRounded';
911

1012
export default function KeyboardNavigation() {
1113
return (
@@ -23,7 +25,7 @@ export default function KeyboardNavigation() {
2325
</Select>
2426

2527
<Dropdown>
26-
<MenuButton>Edit</MenuButton>
28+
<MenuButton>Open menu</MenuButton>
2729
<Menu slots={{ listbox: Listbox }}>
2830
<MenuItem>Cut</MenuItem>
2931
<MenuItem>Copy</MenuItem>
@@ -36,7 +38,7 @@ export default function KeyboardNavigation() {
3638

3739
const Select = React.forwardRef(function Select(props, ref) {
3840
const slots = {
39-
root: Button,
41+
root: SelectButton,
4042
listbox: Listbox,
4143
popup: Popup,
4244
...props.slots,
@@ -45,6 +47,21 @@ const Select = React.forwardRef(function Select(props, ref) {
4547
return <BaseSelect {...props} ref={ref} slots={slots} />;
4648
});
4749

50+
const SelectButton = React.forwardRef(function SelectButton(props, ref) {
51+
const { ownerState, ...other } = props;
52+
return (
53+
<StyledSelectButton type="button" {...other} ref={ref}>
54+
{other.children}
55+
<UnfoldMoreRoundedIcon />
56+
</StyledSelectButton>
57+
);
58+
});
59+
60+
SelectButton.propTypes = {
61+
children: PropTypes.node,
62+
ownerState: PropTypes.object.isRequired,
63+
};
64+
4865
const blue = {
4966
50: '#F0F7FF',
5067
100: '#DAECFF',
@@ -69,8 +86,9 @@ const grey = {
6986
900: '#24292f',
7087
};
7188

72-
const Button = styled('button')(
89+
const StyledSelectButton = styled('button')(
7390
({ theme }) => `
91+
position: relative;
7492
font-family: 'IBM Plex Sans', sans-serif;
7593
font-size: 0.875rem;
7694
box-sizing: border-box;
@@ -79,36 +97,34 @@ const Button = styled('button')(
7997
border-radius: 8px;
8098
text-align: left;
8199
line-height: 1.5;
82-
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
83-
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
100+
background: ${theme.palette.mode === 'dark' ? alpha(grey[900], 0.4) : '#fff'};
101+
border: 1px solid ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
84102
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
85-
box-shadow: 0px 4px 6px ${
86-
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
103+
box-shadow: 0px 2px 6px ${
104+
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.2)' : 'rgba(0,0,0, 0.1)'
87105
};
88106
89107
transition-property: all;
90108
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
91109
transition-duration: 120ms;
92110
93111
&:hover {
94-
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
95-
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
112+
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
113+
border-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[300]};
96114
}
97115
98116
&.${selectClasses.focusVisible} {
117+
outline: 0;
99118
border-color: ${blue[400]};
100-
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
101-
}
102-
103-
&.${selectClasses.expanded} {
104-
&::after {
105-
content: '▴';
106-
}
119+
box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
107120
}
108121
109-
&::after {
110-
content: '▾';
111-
float: right;
122+
& > svg {
123+
font-size: 1rem;
124+
position: absolute;
125+
height: 100%;
126+
top: 0;
127+
right: 10px;
112128
}
113129
`,
114130
);
@@ -120,14 +136,14 @@ const Listbox = styled('ul')(
120136
box-sizing: border-box;
121137
padding: 6px;
122138
margin: 12px 0;
123-
min-width: 150px;
139+
min-width: 200px;
124140
border-radius: 12px;
125141
overflow: auto;
126142
outline: 0px;
127143
background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
128-
border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
144+
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
129145
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
130-
box-shadow: 0px 4px 6px ${
146+
box-shadow: 0px 2px 6px ${
131147
theme.palette.mode === 'dark' ? 'rgba(0,0,0, 0.50)' : 'rgba(0,0,0, 0.05)'
132148
};
133149
`,
@@ -154,15 +170,15 @@ const Option = styled(BaseOption)(
154170
color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
155171
}
156172
157-
&:focus-visible {
158-
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
159-
}
160-
161173
&.${optionClasses.highlighted}.${optionClasses.selected} {
162174
background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
163175
color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
164176
}
165177
178+
&:focus-visible {
179+
outline: 3px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
180+
}
181+
166182
&.${optionClasses.disabled} {
167183
color: ${theme.palette.mode === 'dark' ? grey[700] : grey[400]};
168184
}
@@ -212,18 +228,19 @@ const MenuButton = styled(BaseMenuButton)(
212228
border-radius: 8px;
213229
padding: 8px 16px;
214230
line-height: 1.5;
215-
background: transparent;
231+
background: ${
232+
theme.palette.mode === 'dark' ? alpha(grey[900], 0.5) : alpha(grey[50], 0.5)
233+
};
216234
border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
217-
color: ${theme.palette.mode === 'dark' ? blue[300] : blue[500]};
218-
cursor: pointer;
235+
color: ${theme.palette.mode === 'dark' ? grey[200] : grey[800]};
219236
220237
transition-property: all;
221238
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
222239
transition-duration: 120ms;
223240
224241
&:hover {
225-
background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
226-
border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
242+
background: ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
243+
border-color: ${theme.palette.mode === 'dark' ? grey[700] : grey[300]};
227244
}
228245
229246
&:focus-visible {
@@ -235,7 +252,7 @@ const MenuButton = styled(BaseMenuButton)(
235252

236253
const Container = styled('div')`
237254
display: flex;
238-
gap: 10px;
255+
gap: 12px;
239256
`;
240257

241258
const Popup = styled('div')`

0 commit comments

Comments
 (0)