diff --git a/package-lock.json b/package-lock.json index 981fa2bac..edc42f30a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21,7 +21,7 @@ "react-focus-lock": "2.9.2", "react-id-generator": "3.0.2", "react-popper": "2.3.0", - "react-tabs": "5.1.0", + "react-tabs": "6.0.0", "react-transition-group": "4.4.5", "relative-luminance": "2.0.1" }, @@ -31818,9 +31818,9 @@ } }, "node_modules/react-tabs": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-5.1.0.tgz", - "integrity": "sha512-jsPVEPuhG7JljTo8Q4ujz4UKRpG90nHlDClAdvV5KrLxCHU+MT/kg7dmhq8fDv8+frciDtaYeFFlTVRLm4N5AQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz", + "integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==", "dependencies": { "clsx": "^1.1.0", "prop-types": "^15.5.0" @@ -60719,9 +60719,9 @@ } }, "react-tabs": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-5.1.0.tgz", - "integrity": "sha512-jsPVEPuhG7JljTo8Q4ujz4UKRpG90nHlDClAdvV5KrLxCHU+MT/kg7dmhq8fDv8+frciDtaYeFFlTVRLm4N5AQ==", + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/react-tabs/-/react-tabs-6.0.0.tgz", + "integrity": "sha512-8jKLKrlwxmn5/+xsa76yi27ZdB8E/WhlhQZw739O5UlOeUGtVoVeWnpqIewv/KbjTw7gQf/uA51zWUNt4IVygQ==", "requires": { "clsx": "^1.1.0", "prop-types": "^15.5.0" diff --git a/package.json b/package.json index b54d2e2b0..f7798820e 100644 --- a/package.json +++ b/package.json @@ -59,7 +59,7 @@ "react-focus-lock": "2.9.2", "react-id-generator": "3.0.2", "react-popper": "2.3.0", - "react-tabs": "5.1.0", + "react-tabs": "6.0.0", "react-transition-group": "4.4.5", "relative-luminance": "2.0.1" }, diff --git a/packages/tabs/components/Tabs.tsx b/packages/tabs/components/Tabs.tsx index 1a9422d50..a70f9aa4b 100644 --- a/packages/tabs/components/Tabs.tsx +++ b/packages/tabs/components/Tabs.tsx @@ -43,9 +43,15 @@ injectGlobal` } } -.react-tabs__tab:focus { - outline: none; - background: ${themeBgHover} +/* Focusing on tabs with a mouse will not display an outline */ +.react-tabs__tab:focus:not(:focus-visible) { + outline: 0; +} + +/* Focusing tabs with a keyboard will add a light gray background color */ +.react-tabs__tab:focus-visible { + outline: 0; + background-color: ${themeBgHover} } .react-tabs__tab--selected { @@ -147,6 +153,7 @@ const Tabs = ({ // eslint-disable-next-line @typescript-eslint/no-empty-function onSelect={onSelect ? onSelect : () => {}} data-cy="tabs" + focusTabOnClick={false} > {tabs} {tabsContent}