Replace focus-ring-visible usage with Tailwind's built-in equivalent

Replace uses of our custom `focus-ring-visible` utility with Tailwind's built-in
equivalent styles (`focus-ring:visible focus-ring:outline-none`). The original
reason for our custom utility was to support a polyfill for `:focus-visible`,
but we no longer need/use that polyfill.

This looks the same as before but will be easier to migrate to Tailwind v4. In
Tailwind v3 `outline-none` doesn't actually generate `outline-style: none`, but
the result is equivalent for our purposes.  See
https://tailwindcss.com/docs/upgrade-guide#renamed-outline-utility.

The focus-ring-visible plugin is still included in the package because
downstream apps are still using it. We can remove it after the same migration is
applied there.

Author: robertknight

src/components/data/Table.tsx

@@ -62,7 +62,7 @@ export default function Table({
         aria-label={title}
         className={classnames(
           'w-full h-full',
-          'focus-visible-ring ring-inset',
+          'focus-visible:ring focus-visible:outline-none ring-inset',
           // Set the width of columns based on the width of the columns in the
           // first table row (typically headers)
           'table-fixed',

src/components/data/TableRow.tsx

@@ -43,7 +43,7 @@ export default function TableRow({
       ref={downcastRef(rowRef)}
       className={classnames(
         'group',
-        'focus-visible-ring ring-inset',
+        'focus-visible:ring focus-visible:outline-none ring-inset',
         {
           // Low-opacity backgrounds allow any scroll shadows to be visible
           'odd:bg-slate-9/[.03]': striped && !isHeadRow && !selected,

src/components/input/Button.tsx

@@ -96,7 +96,7 @@ export default function Button({
       {...htmlAttributes}
       className={classnames(
         {
-          'focus-visible-ring transition-colors whitespace-nowrap flex items-center':
+          'focus-visible:ring focus-visible:outline-none transition-colors whitespace-nowrap flex items-center':
             styled,
         },
         themed && {

src/components/input/IconButton.tsx

@@ -51,7 +51,7 @@ export default function IconButton({
       {...htmlAttributes}
       classes={classnames(
         {
-          'focus-visible-ring transition-colors rounded whitespace-nowrap':
+          'focus-visible:ring focus-visible:outline-none transition-colors rounded whitespace-nowrap':
             styled,
           'flex items-center justify-center': styled,
         },

src/components/input/Input.tsx

@@ -14,7 +14,7 @@ export type InputStylesOptions = {
 
 export function inputStyles({ classes, feedback }: InputStylesOptions) {
   return classnames(
-    'focus-visible-ring ring-inset border rounded w-full p-2',
+    'focus-visible:ring focus-visible:outline-none ring-inset border rounded w-full p-2',
     'bg-grey-0 focus:bg-white disabled:bg-grey-1',
     'placeholder:text-grey-6 disabled:placeholder:text-grey-7',
 

src/components/input/RadioGroup.tsx

@@ -42,7 +42,7 @@ function Radio<T extends RadioValue>({
       aria-checked={isSelected}
       aria-disabled={disabled}
       className={classnames(
-        'focus-visible-ring rounded-lg px-3 py-2 flex-1 group',
+        'focus-visible:ring focus-visible:outline-none rounded-lg px-3 py-2 flex-1 group',
         {
           'hover:bg-grey-3/25 aria-checked:bg-grey-3/50 cursor-pointer':
             !disabled,

src/components/input/Select.tsx

@@ -396,7 +396,7 @@ function SelectMain<T>({
       <button
         id={buttonId ?? defaultButtonId}
         className={classnames(
-          'focus-visible-ring transition-colors whitespace-nowrap',
+          'focus-visible:ring focus-visible:outline-none transition-colors whitespace-nowrap',
           'w-full flex items-center justify-between gap-x-2',
           'bg-grey-0 disabled:bg-grey-1 disabled:text-grey-6',
           // Buttons are center-aligned by default. Overwrite it.

src/components/navigation/Link.tsx

@@ -40,7 +40,7 @@ export default function Link({
       {...htmlAttributes}
       className={classnames(
         styled && {
-          'focus-visible-ring rounded': true,
+          'focus-visible:ring focus-visible:outline-none rounded': true,
           // underline
           // TODO: Underline should be controlled by `variant` and should default
           // to `always`

src/components/navigation/LinkButton.tsx

@@ -43,7 +43,7 @@ export default function LinkButton({
       elementRef={downcastRef(elementRef)}
       classes={classnames(
         styled && {
-          'focus-visible-ring transition-colors whitespace-nowrap rounded': true,
+          'focus-visible:ring focus-visible:outline-none transition-colors whitespace-nowrap rounded': true,
           inline: inline,
           'flex items-center': !inline,
         },

src/components/navigation/TabList.tsx

@@ -47,7 +47,7 @@ export default function TabList({
       {...htmlAttributes}
       ref={downcastRef(tabListRef)}
       className={classnames(
-        'flex focus-visible-ring',
+        'flex focus-visible:ring focus-visible:outline-none',
         { 'flex-col': vertical },
         classes,
       )}