Add visible focus rings to interactive widget elements

hypothesis · Apr 14, 2023 · c8518ae · c8518ae
1 parent 695192f
commit c8518ae
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 2 deletions.
diff --git a/src/components/data/Table.tsx b/src/components/data/Table.tsx
@@ -45,6 +45,7 @@ const TableNext = function Table({
         aria-label={title}
         className={classnames(
           'w-full h-full',
+          'focus-visible-ring ring-inset',
           // Set the width of columns based on the width of the columns in the
           // first table row (typically headers)
           'table-fixed',

diff --git a/src/components/data/TableRow.tsx b/src/components/data/TableRow.tsx
@@ -45,11 +45,11 @@ const TableRowNext = function TableRow({
       ref={downcastRef(rowRef)}
       className={classnames(
         'group',
+        'focus-visible-ring ring-inset',
         {
           // Low-opacity backgrounds allow any scroll shadows to be visible
           'odd:bg-slate-9/[.03]': !isHeadRow && !selected,
           'bg-slate-7 text-color-text-inverted': selected,
-          'focus-visible-ring ring-inset': tableContext?.interactive,
           'hover:bg-slate-9/[.08]': tableContext?.interactive && !selected,
           'group/unselected': !selected,
           'group/selected': selected,

diff --git a/src/components/navigation/TabList.tsx b/src/components/navigation/TabList.tsx
@@ -46,7 +46,11 @@ const TabListNext = function TabList({
       data-component="TabList"
       {...htmlAttributes}
       ref={downcastRef(tabListRef)}
-      className={classnames('flex', { 'flex-col': vertical }, classes)}
+      className={classnames(
+        'flex focus-visible-ring',
+        { 'flex-col': vertical },
+        classes
+      )}
       role="tablist"
       aria-orientation={vertical ? 'vertical' : 'horizontal'}
     >