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

[cheton]

Enhance accessibility with selective :focus-visible focus styles for non-pointer devices:

packages/react

• Button
  

• ButtonGroup
  

• ModalCloseButton
  

• DrawerCloseButton
  

• ToastCloseButton
  

• AlertCloseButton
  

• TagCloseButton
  

• Checkbox
  

• Radio
  

• Switch
  

• Menu
  

• Pagination
  

• Tabs
  

• Tree
  

packages/react-docs

• Side navigation menu
  

• Action buttons of the example code
  

Reference

https://hidde.blog/focus-visible-more-than-keyboard/

:focus-visible should apply to interactions via keyboard or some other non-pointing device.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

[trendmicro-frontend-bot]

Tonic UI Demo

• 2023-10-18 13:25:23 +0000 The PR feat(react): improve accessibility with targeted :focus-visible focus styles for non-pointer devices #796 (7c8fe72) has been deployed to https://trendmicro-frontend.github.io/tonic-ui-demo/react/pr-796/

[codecov]

Codecov Report

Attention: 19 lines in your changes are missing coverage. Please review.

Comparison is base (d5089ed) 71.76% compared to head (7c8fe72) 71.35%.

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #796      +/-   ##
==========================================
- Coverage   71.76%   71.35%   -0.41%     
==========================================
  Files         374      374              
  Lines        6243     6256      +13     
==========================================
- Hits         4480     4464      -16     
- Misses       1763     1792      +29     

Flag	Coverage Δ
react	73.04% <87.66%> (-0.50%)	⬇️
react-hooks	87.58% <ø> (ø)
react-lab	14.04% <ø> (ø)
styled-system	91.73% <ø> (ø)
theme	100.00% <ø> (ø)
utils	70.28% <ø> (ø)

Flags with carried forward coverage won't be shown. Click here to find out more.

Files	Coverage Δ
packages/react/src/button/Button.js	75.00% <ø> (ø)
packages/react/src/button/styles.js	97.14% <100.00%> (+0.08%)	⬆️
packages/react/src/checkbox/Checkbox.js	55.55% <100.00%> (+2.61%)	⬆️
packages/react/src/checkbox/CheckboxControlBox.js	100.00% <100.00%> (ø)
packages/react/src/checkbox/styles.js	100.00% <100.00%> (ø)
packages/react/src/drawer/styles.js	100.00% <100.00%> (ø)
packages/react/src/menu/styles.js	70.83% <100.00%> (-1.17%)	⬇️
packages/react/src/modal/styles.js	100.00% <100.00%> (ø)
packages/react/src/pagination/PaginationItem.js	100.00% <ø> (ø)
packages/react/src/radio/RadioControlBox.js	100.00% <100.00%> (ø)
... and 10 more

... and 1 file with indirect coverage changes

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.