feat(core): use focus-visible instead of focus (#644)

bigcommerce · Mar 13, 2024 · a2ce3b5 · a2ce3b5
1 parent 604f60a
commit a2ce3b5
Show file tree

Hide file tree

Showing 31 changed files with 95 additions and 73 deletions.
diff --git a/.changeset/empty-icons-fold.md b/.changeset/empty-icons-fold.md
@@ -0,0 +1,7 @@
+---
+"@bigcommerce/components": patch
+"@bigcommerce/catalyst-core": patch
+"@bigcommerce/docs": patch
+---
+
+Use focus-visible instead of focus for focus-related styling
diff --git a/apps/core/app/[locale]/(default)/account/page.tsx b/apps/core/app/[locale]/(default)/account/page.tsx
@@ -17,7 +17,7 @@ interface AccountItem {
 const AccountItem = ({ children, title, description, href }: AccountItem) => {
   return (
     <Link
-      className="flex items-center border border-gray-200 p-6 focus:outline-none focus:ring-4 focus:ring-primary/20"
+      className="flex items-center border border-gray-200 p-6 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
       href={href}
     >
       {children}

diff --git a/apps/core/app/[locale]/(default)/blog/page.tsx b/apps/core/app/[locale]/(default)/blog/page.tsx
@@ -44,7 +44,7 @@ export default async function BlogPostPage({ params: { locale }, searchParams }:
       <nav aria-label="Pagination" className="mb-12 mt-10 flex justify-center text-primary">
         {blogPosts.posts.pageInfo.hasPreviousPage ? (
           <Link
-            className="focus:outline-none focus:ring-4 focus:ring-primary/20"
+            className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
             href={`/blog?before=${String(blogPosts.posts.pageInfo.startCursor)}`}
             scroll={false}
           >
@@ -56,7 +56,7 @@ export default async function BlogPostPage({ params: { locale }, searchParams }:
         )}
         {blogPosts.posts.pageInfo.hasNextPage ? (
           <Link
-            className="focus:outline-none focus:ring-4 focus:ring-primary/20"
+            className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
             href={`/blog?after=${String(blogPosts.posts.pageInfo.endCursor)}`}
             scroll={false}
           >

diff --git a/apps/core/app/[locale]/(default)/blog/tag/[tagId]/page.tsx b/apps/core/app/[locale]/(default)/blog/tag/[tagId]/page.tsx
@@ -35,7 +35,7 @@ export default async function BlogPostPage({ params: { tagId, locale }, searchPa
       <nav aria-label="Pagination" className="mb-12 mt-10 flex justify-center text-primary">
         {blogPosts.posts.pageInfo.hasPreviousPage ? (
           <Link
-            className="focus:outline-none focus:ring-4 focus:ring-primary/20"
+            className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
             href={`/blog/tag/${tagId}?before=${String(blogPosts.posts.pageInfo.startCursor)}`}
             scroll={false}
           >
@@ -47,7 +47,7 @@ export default async function BlogPostPage({ params: { tagId, locale }, searchPa
         )}
         {blogPosts.posts.pageInfo.hasNextPage ? (
           <Link
-            className="focus:outline-none focus:ring-4 focus:ring-primary/20"
+            className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
             href={`/blog/tag/${tagId}?after=${String(blogPosts.posts.pageInfo.endCursor)}`}
             scroll={false}
           >

diff --git a/apps/core/app/[locale]/maintenance/page.tsx b/apps/core/app/[locale]/maintenance/page.tsx
@@ -40,7 +40,7 @@ export default async function MaintenancePage() {
           <p className="flex items-center gap-2">
             <Phone aria-hidden="true" />
             <a
-              className="text-primary hover:text-secondary focus:outline-none focus:ring-4 focus:ring-primary/20"
+              className="text-primary hover:text-secondary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
               href={`tel:${contact.phone}`}
             >
               {contact.phone}

diff --git a/apps/core/components/compare-drawer/index.tsx b/apps/core/components/compare-drawer/index.tsx
@@ -62,7 +62,7 @@ const CompareItem = ({
       </small>
       <Button
         aria-label={t('removeProductAriaLabel', { product: product.name })}
-        className="grow-1 ms-auto w-auto border-0 bg-transparent p-0 text-black hover:bg-transparent hover:text-primary focus:text-primary"
+        className="grow-1 ms-auto w-auto border-0 bg-transparent p-0 text-black hover:bg-transparent hover:text-primary focus-visible:text-primary"
         onClick={removeItem}
         type="button"
       >

diff --git a/apps/core/components/footer/contact-information.tsx b/apps/core/components/footer/contact-information.tsx
@@ -22,7 +22,7 @@ export const ContactInformation = async () => {
       </address>
       {contact.phone ? (
         <a
-          className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+          className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
           href={`tel:${contact.phone}`}
         >
           <p>{contact.phone}</p>

diff --git a/apps/core/components/header/index.tsx b/apps/core/components/header/index.tsx
@@ -48,7 +48,7 @@ export const Header = async ({ cart }: { cart: ReactNode }) => {
                 <div className="group/account flex cursor-pointer items-center">
                   <Link
                     aria-label="Account"
-                    className="p-3 focus:outline-none focus:ring-4 focus:ring-primary/20"
+                    className="p-3 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
                     href="/account"
                   >
                     <User aria-hidden="true" />
@@ -57,55 +57,55 @@ export const Header = async ({ cart }: { cart: ReactNode }) => {
                   <ul className="absolute -right-12 top-full z-10 hidden cursor-default bg-white p-6 pb-8 shadow-md group-hover/account:block [&>li]:mb-2">
                     <li>
                       <Link
-                        className="whitespace-nowrap font-semibold focus:outline-none focus:ring-4 focus:ring-primary/20"
+                        className="whitespace-nowrap font-semibold focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
                         href="/account"
                       >
                         My account
                       </Link>
                     </li>
                     <li>
                       <Link
-                        className="whitespace-nowrap focus:outline-none focus:ring-4"
+                        className="whitespace-nowrap focus-visible:outline-none focus-visible:ring-4"
                         href="/account/orders"
                       >
                         Orders
                       </Link>
                     </li>
                     <li>
                       <Link
-                        className="whitespace-nowrap focus:outline-none focus:ring-4"
+                        className="whitespace-nowrap focus-visible:outline-none focus-visible:ring-4"
                         href="/account/messages"
                       >
                         Messages
                       </Link>
                     </li>
                     <li>
                       <Link
-                        className="whitespace-nowrap focus:outline-none focus:ring-4"
+                        className="whitespace-nowrap focus-visible:outline-none focus-visible:ring-4"
                         href="/account/addresses"
                       >
                         Addresses
                       </Link>
                     </li>
                     <li>
                       <Link
-                        className="whitespace-nowrap focus:outline-none focus:ring-4"
+                        className="whitespace-nowrap focus-visible:outline-none focus-visible:ring-4"
                         href="/account/wishlists"
                       >
                         Wish lists
                       </Link>
                     </li>
                     <li>
                       <Link
-                        className="whitespace-nowrap focus:outline-none focus:ring-4"
+                        className="whitespace-nowrap focus-visible:outline-none focus-visible:ring-4"
                         href="/account/recently-viewed"
                       >
                         Recently viewed
                       </Link>
                     </li>
                     <li>
                       <Link
-                        className="whitespace-nowrap focus:outline-none focus:ring-4"
+                        className="whitespace-nowrap focus-visible:outline-none focus-visible:ring-4"
                         href="/account/settings"
                       >
                         Account Settings

diff --git a/apps/core/components/link/index.tsx b/apps/core/components/link/index.tsx
@@ -46,7 +46,7 @@ export const Link = forwardRef<ElementRef<'a'>, Props>(
     return (
       <NavLink
         className={cn(
-          ' hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20',
+          ' hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
           className,
         )}
         href={href}

diff --git a/apps/core/components/product-card/index.tsx b/apps/core/components/product-card/index.tsx
@@ -121,7 +121,7 @@ export const ProductCard = ({
         <ProductCardInfoProductName>
           {product.path ? (
             <Link
-              className="focus:outline focus:outline-4 focus:outline-offset-2 focus:outline-primary/20 focus:ring-0"
+              className="focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-2 focus-visible:outline-primary/20 focus-visible:ring-0"
               href={product.path}
             >
               <span aria-hidden="true" className="absolute inset-0 bottom-20" />

diff --git a/apps/core/components/quick-search/index.tsx b/apps/core/components/quick-search/index.tsx
@@ -85,7 +85,7 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
       <SheetTrigger asChild>
         <Button
           aria-label="Open search popup"
-          className="border-0 bg-transparent p-3 text-black hover:bg-transparent hover:text-primary focus:text-primary"
+          className="border-0 bg-transparent p-3 text-black hover:bg-transparent hover:text-primary focus-visible:text-primary"
         >
           <Search />
         </Button>
@@ -119,13 +119,13 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
                     role="combobox"
                     value={term}
                   >
-                    <InputIcon className="start-3 peer-hover:text-primary peer-focus:text-primary">
+                    <InputIcon className="start-3 peer-hover:text-primary peer-focus-visible:text-primary">
                       <Search />
                     </InputIcon>
                     {term.length > 0 && !pending && (
                       <Button
                         aria-label="Clear search"
-                        className="absolute end-1.5 top-1/2 w-auto -translate-y-1/2 border-0 bg-transparent p-1.5 text-black hover:bg-transparent hover:text-primary focus:text-primary peer-hover:text-primary peer-focus:text-primary"
+                        className="absolute end-1.5 top-1/2 w-auto -translate-y-1/2 border-0 bg-transparent p-1.5 text-black hover:bg-transparent hover:text-primary focus-visible:text-primary peer-hover:text-primary peer-focus-visible:text-primary"
                         onClick={handleTermClear}
                         type="button"
                       >
@@ -145,7 +145,7 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
             <SheetClose asChild>
               <Button
                 aria-label="Close search popup"
-                className="w-auto justify-self-end border-0 bg-transparent p-2.5 text-black hover:bg-transparent hover:text-primary focus:text-primary peer-hover:text-primary peer-focus:text-primary"
+                className="w-auto justify-self-end border-0 bg-transparent p-2.5 text-black hover:bg-transparent hover:text-primary focus-visible:text-primary peer-hover:text-primary peer-focus-visible:text-primary"
               >
                 <small className="me-2 hidden text-base md:inline-flex">Close</small>
                 <X />
@@ -173,7 +173,7 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
                     return (
                       <li className="mb-3 last:mb-6" key={name}>
                         <a
-                          className="align-items mb-6 flex gap-x-6 focus:outline-none focus:ring-4 focus:ring-primary/20"
+                          className="align-items mb-6 flex gap-x-6 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
                           href={path}
                         >
                           {name}
@@ -192,7 +192,7 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
                     return (
                       <li key={product.entityId}>
                         <a
-                          className="align-items mb-6 flex gap-x-6 focus:outline-none focus:ring-4 focus:ring-primary/20"
+                          className="align-items mb-6 flex gap-x-6 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
                           href={product.path}
                         >
                           {product.defaultImage ? (
@@ -236,7 +236,7 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
                     return (
                       <li className="mb-3 last:mb-6" key={name}>
                         <a
-                          className="align-items mb-6 flex gap-x-6 focus:outline-none focus:ring-4 focus:ring-primary/20"
+                          className="align-items mb-6 flex gap-x-6 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
                           href={path}
                         >
                           {name}

diff --git a/apps/core/components/sharing-links/index.tsx b/apps/core/components/sharing-links/index.tsx
@@ -24,15 +24,15 @@ export const SharingLinks = ({
     <div className="mb-10 flex items-center [&>*:not(:last-child)]:me-2.5">
       <h3 className="text-xl font-bold lg:text-2xl">Share</h3>
       <a
-        className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+        className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
         href={`https://facebook.com/sharer/sharer.php?u=${encodedUrl}`}
         rel="noopener noreferrer"
         target="_blank"
       >
         <SiFacebook size={24} title="Facebook" />
       </a>
       <a
-        className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+        className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
         href={`mailto:?subject=${encodedTitle}&body=${encodedUrl}`}
         rel="noopener noreferrer"
         target="_self"
@@ -42,7 +42,7 @@ export const SharingLinks = ({
         </Mail>
       </a>
       <button
-        className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+        className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
         onClick={() => {
           window.print();
 
@@ -55,23 +55,23 @@ export const SharingLinks = ({
         </Printer>
       </button>
       <a
-        className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+        className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
         href={`https://twitter.com/intent/tweet/?text=${encodedTitle}&url=${encodedUrl}`}
         rel="noopener noreferrer"
         target="_blank"
       >
         <SiX size={24} title="X" />
       </a>
       <a
-        className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+        className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
         href={`https://www.linkedin.com/shareArticle?mini=true&url=${encodedUrl}&title=${encodedTitle}&summary=${encodedTitle}&source=${encodedUrl}`}
         rel="noopener noreferrer"
         target="_blank"
       >
         <SiLinkedin size={24} title="LinkedIn" />
       </a>
       <a
-        className="hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20"
+        className="hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
         href={`https://pinterest.com/pin/create/button/?url=${encodedUrl}&media=${blogPostImageUrl}&description=${encodedTitle}`}
         rel="noopener noreferrer"
         target="_blank"

diff --git a/apps/docs/stories/blog-post-card.stories.tsx b/apps/docs/stories/blog-post-card.stories.tsx
@@ -25,7 +25,7 @@ export const BlogPostCardWithImage: Story = {
         <div>
           <BlogPostImage>
             <a
-              className="block w-full focus:outline-none focus:ring-4 focus:ring-primary/20"
+              className="block w-full focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
               href="/"
             >
               <div className="flex h-full w-full items-center justify-center bg-gray-200 text-2xl font-bold lg:text-3xl">
@@ -34,7 +34,10 @@ export const BlogPostCardWithImage: Story = {
             </a>
           </BlogPostImage>
           <BlogPostTitle>
-            <a className="focus:outline-none focus:ring-4 focus:ring-primary/20" href="/">
+            <a
+              className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
+              href="/"
+            >
               Blog Post Title
             </a>
           </BlogPostTitle>
@@ -63,7 +66,10 @@ export const BlogPostCardWithoutImage: Story = {
             </BlogPostDate>
           </BlogPostBanner>
           <BlogPostTitle>
-            <a className="focus:outline-none focus:ring-4 focus:ring-primary/20" href="/">
+            <a
+              className="focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20"
+              href="/"
+            >
               Blog Post Title
             </a>
           </BlogPostTitle>

diff --git a/packages/components/src/components/accordion/accordion.tsx b/packages/components/src/components/accordion/accordion.tsx
@@ -22,7 +22,7 @@ const AccordionTrigger = React.forwardRef<
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
       className={cn(
-        'flex flex-1 items-center justify-between py-[9.5px] text-lg font-bold outline-none transition-all hover:text-secondary focus:text-secondary [&[data-state=open]>svg]:rotate-180',
+        'flex flex-1 items-center justify-between py-[9.5px] text-lg font-bold outline-none transition-all hover:text-secondary focus-visible:text-secondary [&[data-state=open]>svg]:rotate-180',
         className,
       )}
       ref={ref}

diff --git a/packages/components/src/components/breadcrumbs/breadcrumbs.tsx b/packages/components/src/components/breadcrumbs/breadcrumbs.tsx
@@ -31,7 +31,7 @@ const BreadcrumbItem = forwardRef<ElementRef<'li'>, BreadcrumbItemProps>(
         <Comp
           aria-current={isActive ? `page` : undefined}
           className={cn(
-            'p-1 font-semibold hover:text-primary focus:outline-none focus:ring-4 focus:ring-primary/20',
+            'p-1 font-semibold hover:text-primary focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
             isActive && 'cursor-default font-extrabold hover:text-black',
             className,
           )}

diff --git a/packages/components/src/components/button/button.tsx b/packages/components/src/components/button/button.tsx
@@ -5,7 +5,7 @@ import { ComponentPropsWithRef, ElementRef, forwardRef } from 'react';
 import { cn } from '~/lib/utils';
 
 export const buttonVariants = cva(
-  'inline-flex w-full justify-center items-center border-2 py-2.5 px-[30px] text-base leading-6 font-semibold border-primary disabled:border-gray-400 focus:outline-none focus:ring-4 focus:ring-primary/20',
+  'inline-flex w-full justify-center items-center border-2 py-2.5 px-[30px] text-base leading-6 font-semibold border-primary disabled:border-gray-400 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-primary/20',
   {
     variants: {
       variant: {

diff --git a/packages/components/src/components/calendar/calendar.tsx b/packages/components/src/components/calendar/calendar.tsx
@@ -32,7 +32,7 @@ export const Calendar = ({
           'relative flex h-10 w-10 items-center justify-center p-0 text-center text-xs font-normal focus-within:relative focus-within:z-20 focus-within:rounded focus-within:border focus-within:border-primary/20',
         ),
         day: cn(
-          'h-8 w-8 p-0 text-base hover:bg-secondary/10 focus:outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:hover:bg-primary aria-selected:hover:text-white',
+          'h-8 w-8 p-0 text-base hover:bg-secondary/10 focus-visible:outline-none aria-selected:bg-primary aria-selected:text-white aria-selected:hover:bg-primary aria-selected:hover:text-white',
         ),
         day_today: 'bg-secondary/10',
         day_disabled: 'text-gray-400 aria-selected:bg-gray-100 aria-selected:text-white',