(A11y) Increase visibility of focus outline

DTS-STN · Nov 15, 2024 · b314f0d · b314f0d
1 parent 67742fe
commit b314f0d
Show file tree

Hide file tree

Showing 4 changed files with 5 additions and 4 deletions.
diff --git a/__tests__/components/ActionButton.test.tsx b/__tests__/components/ActionButton.test.tsx
@@ -19,7 +19,7 @@ describe('ActionButton', () => {
     render(<ActionButton text="my-button-text" style="primary" />)
     const sut = screen.getByText('my-button-text')
     expect(sut).toHaveClass(
-      'inline-flex justify-center items-center font-display align-middle border shadow-sm focus:ring-1 focus:ring-offset-2 focus:ring-black focus:text-basic-white disabled:opacity-70 disabled:cursor-not-allowed disabled:shadow-none disabled:pointer-events-none undefined px-3.5 py-2.5 rounded text-base border-blue-dark bg-blue-dark text-basic-white focus:bg-blue-normal hover:bg-blue-normal active:bg-blue-active',
+      'inline-flex justify-center items-center font-display align-middle border shadow-sm focus:ring-2 focus:ring-offset-2 focus:ring-black focus:text-basic-white disabled:opacity-70 disabled:cursor-not-allowed disabled:shadow-none disabled:pointer-events-none undefined px-3.5 py-2.5 rounded text-base border-blue-dark bg-blue-dark text-basic-white focus:bg-blue-normal hover:bg-blue-normal active:bg-blue-active',
     )
   })
 

diff --git a/src/components/ActionButton.tsx b/src/components/ActionButton.tsx
@@ -40,7 +40,7 @@ const ActionButton = ({
   type,
 }: ActionButtonProps) => {
   const baseClasses =
-    'align-middle border font-display inline-flex items-center justify-center shadow-sm disabled:cursor-not-allowed disabled:opacity-70 disabled:pointer-events-none disabled:shadow-none focus:ring-1 focus:ring-black focus:ring-offset-2'
+    'align-middle border font-display inline-flex items-center justify-center shadow-sm disabled:cursor-not-allowed disabled:opacity-70 disabled:pointer-events-none disabled:shadow-none focus:ring-2 focus:ring-black focus:ring-offset-2'
   const fullWidthClasses = fullWidth ? 'w-full' : undefined
   const sizeClasses = sizes[size ?? 'md']
   const styleClasses = styles[style ?? 'default']

diff --git a/src/components/LinkButton.tsx b/src/components/LinkButton.tsx
@@ -39,7 +39,7 @@ const LinkButton = ({
   style,
 }: LinkButtonProps) => {
   const baseClasses =
-    'align-middle border font-display inline-flex items-center justify-center no-underline shadow-sm text-center focus:ring-1 focus:ring-black focus:ring-offset-2'
+    'align-middle border font-display inline-flex items-center justify-center no-underline shadow-sm text-center focus:ring-2 focus:ring-black focus:ring-offset-2'
   const fullWidthClasses = fullWidth ? 'w-full' : undefined
   const sizeClasses = sizes[size ?? 'md']
   const styleClasses = styles[style ?? 'default']

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -7,7 +7,8 @@
   /* consistent focus styles on all components */
   * {
     @apply focus:outline-none;
-    @apply focus-visible:ring-1;
+    @apply focus-visible:ring-2;
+    @apply focus-visible:ring-offset-2;
     @apply focus-visible:ring-black;
   }