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
• Tab
• Tree
• Pagination

packages/react-docs

• Side navigation menu

Reference

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

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

Examples

ButtonBase

Change outline: 0 to the following:

sx={{
  ':focus:not(:focus-visible)': {
    outline: 0,
  },
}}

Tab

diff --git a/packages/react/src/tabs/styles.js b/packages/react/src/tabs/styles.js
index 94e04e10a..d0a53505b 100644
--- a/packages/react/src/tabs/styles.js
+++ b/packages/react/src/tabs/styles.js
@@ -135,6 +135,7 @@ const useTabStyle = ({
       _focus: {
         borderColor: getBorderColorStyleWithFallback(focusBorderColor),
         color: getColorStyleWithFallback(focusColor),
+        outline: 0, // Disable the default outline to utilize our custom focus style with a border
       },
       _selected: {
         border: 'none',
@@ -291,6 +292,7 @@ const useTabStyle = ({
         px: '3x',
         py: '2x',
         zIndex: 1,
+        outline: 0, // Disable the default outline to utilize our custom focus style with a border
       },
       _selected: {
         backgroundColor: getBackgroundColorStyleWithFallback(selectedBackgroundColor),