Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(react): improve accessibility with targeted :focus-visible focus styles for non-pointer devices #796

Merged
merged 16 commits into from
Oct 23, 2023
Merged

feat(react): improve accessibility with targeted :focus-visible focus styles for non-pointer devices #796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
82b91af
feat: implement `:focus-visible` for the Tree component with targeted…
cheton Aug 29, 2023
ee86cd9
feat: implement `:focus-visible` for the Menu component with targeted…
cheton Aug 29, 2023
cfceebe
feat: implement `:focus-visible` for the Switch component with target…
cheton Aug 31, 2023
831a22e
feat: remove the `type` attribute from `SwitchControlBox`
cheton Sep 18, 2023
39a0cd8
feat: implement `:focus-visible` for the Checkbox component with targ…
cheton Sep 18, 2023
42e794e
feat: implement `:focus-visible` for the Radio component with targete…
cheton Sep 18, 2023
9ad5b53
chore: code prettify
cheton Sep 18, 2023
a06eb82
feat: implement `:focus-visible` for the Tabs component with targeted…
cheton Sep 29, 2023
4ce1a31
feat: utilize `outline` instead of `box-shadow` for `:focus-visible` …
cheton Oct 7, 2023
6ccd907
feat: implement `:focus-visible` for close button components with tar…
cheton Oct 7, 2023
7667d65
feat: implement `:focus-visible` for the Button component with target…
cheton Oct 8, 2023
d853ca5
docs: update examples in button, button-group, and button-link
cheton Oct 9, 2023
b101e87
feat: only use `aria-selected` with these roles: `option`, `tab`, `me…
cheton Oct 9, 2023
6218f96
feat: implement `:focus-visible` for the Pagination component with ta…
cheton Oct 9, 2023
dd5a832
feat: apply same `:focus-visible` style to secondary variant button f…
cheton Oct 10, 2023
7c8fe72
docs: apply :focus-visible style to icon button components
cheton Oct 10, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 62 additions & 35 deletions packages/react-docs/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {
Box,
Button,
ButtonBase,
Icon,
Image,
Link,
Expand Down Expand Up @@ -103,6 +104,10 @@ const Header = forwardRef((
light: 'rgba(0, 0, 0, 0.12)',
dark: 'rgba(255, 255, 255, 0.12)',
}[colorMode];
const focusVisibleOutlineColor = {
dark: 'blue:60',
light: 'blue:60',
}[colorMode];

return (
<Box
Expand Down Expand Up @@ -236,58 +241,80 @@ const Header = forwardRef((
</MenuList>
</Menu>
</Box>
<Box
<ButtonBase
data-track={`Header|click_codesandbox`}
as="a"
color={colorStyle.color.secondary}
_hover={{
color: colorStyle.color.primary,
cursor: 'pointer',
}}
onClick={() => handleClickOpenInCodeSandbox()}
display="inline-flex"
textDecoration="none"
title="Open in CodeSandbox"
sx={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: colorStyle.color.secondary,
width: '8x',
height: '8x',
_hover: {
color: colorStyle.color.primary,
cursor: 'pointer',
},
_focusVisible: {
outlineColor: focusVisibleOutlineColor,
outlineStyle: 'solid',
outlineWidth: '1h',
},
}}
>
<CodeSandboxIcon size={24} />
</Box>
<Box
</ButtonBase>
<ButtonBase
data-track={`Header|click_toggle_color_mode|${colorMode === 'light' ? 'dark' : 'light'}`}
as="a"
color={colorStyle.color.secondary}
_hover={{
color: colorStyle.color.primary,
cursor: 'pointer',
}}
_visited={{
color: colorStyle.color.secondary,
}}
onClick={() => toggleColorMode()}
display="inline-flex"
title="Toggle color mode"
sx={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: colorStyle.color.secondary,
width: '8x',
height: '8x',
_hover: {
color: colorStyle.color.primary,
cursor: 'pointer',
},
_focusVisible: {
outlineColor: focusVisibleOutlineColor,
outlineStyle: 'solid',
outlineWidth: '1h',
},
}}
>
{colorMode === 'light' && (
<Icon icon="moon" size={24} />
)}
{colorMode === 'dark' && (
<Icon icon="sun" size={24} />
)}
</Box>
<Box
</ButtonBase>
<ButtonBase
data-track={`Header|click_github_repo_url|${GITHUB_REPO_URL}`}
as="a"
href={GITHUB_REPO_URL}
target="_blank"
color={colorStyle.color.secondary}
display="inline-flex"
_hover={{
color: colorStyle.color.primary,
cursor: 'pointer',
}}
_visited={{
onClick={() => window.open(GITHUB_REPO_URL, '_blank')}
title="GitHub repository"
sx={{
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
color: colorStyle.color.secondary,
width: '8x',
height: '8x',
_hover: {
color: colorStyle.color.primary,
cursor: 'pointer',
},
_focusVisible: {
outlineColor: focusVisibleOutlineColor,
outlineStyle: 'solid',
outlineWidth: '1h',
},
}}
title="GitHub repository"
>
<FontAwesomeIcon
icon={['fab', 'github']}
Expand All @@ -296,7 +323,7 @@ const Header = forwardRef((
height: 24,
}}
/>
</Box>
</ButtonBase>
</Box>
</Box>
</Box>
Expand Down
25 changes: 9 additions & 16 deletions packages/react-docs/components/IconButton.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,34 +14,27 @@ const IconButton = forwardRef((props, ref) => {
dark: 'white:primary',
light: 'black:primary',
}[colorMode];
const activeColor = color;
const focusColor = color;
const focusHoverColor = hoverColor;
const focusActiveColor = activeColor;
const focusVisibleOutlineColor = {
dark: 'blue:60',
light: 'blue:60',
}[colorMode];

return (
<ButtonBase
ref={ref}
border={1}
borderColor="transparent"
color={color}
transition="all .2s"
height="8x"
width="8x"
_hover={{
color: hoverColor,
}}
_active={{
color: activeColor,
}}
_focus={{
color: focusColor,
}}
_focusHover={{
color: focusHoverColor,
}}
_focusActive={{
color: focusActiveColor,
_focusVisible={{
outlineColor: focusVisibleOutlineColor,
outlineOffset: '-1h',
outlineStyle: 'solid',
outlineWidth: '1h',
}}
{...props}
/>
Expand Down
10 changes: 10 additions & 0 deletions packages/react-docs/components/NavLink.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,10 @@ const NavLink = forwardRef((
dark: 'rgba(255, 255, 255, 0.1)',
}[colorMode];
const activeColor = colorStyle.color.primary;
const focusVisibleOutlineColor = {
dark: 'blue:60',
light: 'blue:60',
}[colorMode];
const hoverBackgroundColor = {
light: 'rgba(0, 0, 0, 0.12)',
dark: 'rgba(255, 255, 255, 0.12)',
Expand All @@ -48,6 +52,12 @@ const NavLink = forwardRef((
backgroundColor: activeBackgroundColor,
color: activeColor,
}}
_focusVisible={{
outlineColor: focusVisibleOutlineColor,
outlineOffset: '-1h',
outlineStyle: 'solid',
outlineWidth: '1h',
}}
_hover={{
backgroundColor: hoverBackgroundColor,
}}
Expand Down
Loading
Loading