focus-visible update

wri · Oct 24, 2024 · 7d7b653 · 7d7b653
1 parent e71ece1
commit 7d7b653
Show file tree

Hide file tree

Showing 5 changed files with 7 additions and 8 deletions.
diff --git a/package.json b/package.json
@@ -10,7 +10,6 @@
   ],
   "scripts": {
     "dev": "react-scripts start",
-    "start": "yarn storybook",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

diff --git a/src/components/Button/styled.ts b/src/components/Button/styled.ts
@@ -49,7 +49,7 @@ export const PrimaryButton = styled(BaseButton)`
         box-shadow: 0px 4px 6px -1px #0000001A;
       }
 
-      &:focus {
+      &:focus-visible {
         outline-color: ${getThemedColor(theme.colors, 'primary', 700)};
         background-color: ${getThemedColor(theme.colors, 'primary', 500)};
         border: 2px solid ${getThemedColor(theme.colors, 'primary', 500)};
@@ -90,7 +90,7 @@ export const SecondaryButton = styled(BaseButton)`
         box-shadow: 0px 4px 6px -1px #0000001A;
       }
 
-      &:focus {
+      &:focus-visible {
         outline-color: ${getThemedColor(theme.colors, 'primary', 700)};
       }
     `
@@ -131,7 +131,7 @@ export const BorderlessButton = styled(BaseButton)`
         box-shadow: 0px 4px 6px -1px #0000001A;
       }
 
-      &:focus {
+      &:focus-visible {
         outline-color: ${getThemedColor(theme.colors, 'primary', 700)};
       }
     `
@@ -169,7 +169,7 @@ export const OutlineButton = styled(BaseButton)`
         border: 1px solid ${getThemedColor(theme.colors, 'primary', 900)} !important;
       }
 
-      &:focus {
+      &:focus-visible {
         outline-color: ${getThemedColor(theme.colors, 'primary', 700)};
         background-color: ${getThemedColor(theme.colors, 'primary', 100)};
       }

diff --git a/src/components/NavigationRail/types.ts b/src/components/NavigationRail/types.ts
@@ -7,7 +7,7 @@ export type NavigationRailTabProps = {
 } & ButtonProps
 
 export type NavigationRailProps = {
-  tabs?: NavigationRailTabProps[]
+  tabs: NavigationRailTabProps[]
   isOnLeft?: boolean
   defaultActiveTabId?: string
   onTabClick?: (tabId: string) => void

diff --git a/src/components/Radio/styled.ts b/src/components/Radio/styled.ts
@@ -20,9 +20,8 @@ export const StyledRadio = styled(Radio)<{
       ${({ theme }) => getThemedColor(theme.colors, 'primary', 500)}40;
   }
 
-  &:focus,
   &:focus-visible,
-  &[data-focus] {
+  &[data-focus-visible] {
     outline: 2px solid
       ${({ theme }) => getThemedColor(theme.colors, 'primary', 700)};
     outline-offset: 2px;

diff --git a/src/components/index.ts b/src/components/index.ts
@@ -1,3 +1,4 @@
 export { default as Switch } from './Switch'
 export { default as Button } from './Button'
 export { default as NavigationRail } from './NavigationRail'
+export { default as RadioGroup } from './Radio/RadioGroup'