🎨 more accessibility

sanityv3/schemas/textSnippets.ts

@@ -816,6 +816,11 @@ const snippets: textSnippet = {
     defaultValue: `Please don't enter any personal information`,
     group: groups.common,
   },
+  categories: {
+    title: 'Categories',
+    defaultValue: 'Categories',
+    group: groups.common,
+  },
 }
 
 type textSnippetGroup = { title: string; hidden?: boolean }

web/core/Tabs/TabList.tsx

@@ -2,14 +2,17 @@ import { forwardRef } from 'react'
 import * as RadixTabs from '@radix-ui/react-tabs'
 import envisTwMerge from '../../twMerge'
 
-export type TabListProps = RadixTabs.TabsListProps
+export type TabListProps = {
+  /* Provides a label that describes the purpose of the set of tabs. */
+  'aria-label': string
+} & RadixTabs.TabsListProps
 
 export const TabList = forwardRef<HTMLDivElement, TabListProps>(function TabList(
-  { children, className = '', ...rest },
+  { 'aria-label': ariaLabel, children, className = '', ...rest },
   ref,
 ) {
   return (
-    <RadixTabs.List ref={ref} className={envisTwMerge(`flex flex-wrap`, className)} {...rest}>
+    <RadixTabs.List ref={ref} className={envisTwMerge(`flex flex-wrap`, className)} aria-label={ariaLabel} {...rest}>
       {children}
     </RadixTabs.List>
   )

web/core/Tabs/TabPanel.tsx

@@ -1,15 +1,23 @@
-import { forwardRef } from 'react';
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { forwardRef } from 'react'
+import * as RadixTabs from '@radix-ui/react-tabs'
+import envisTwMerge from '../../twMerge'
 
-export type TabPanelProps = RadixTabs.TabsContentProps;
+export type TabPanelProps = RadixTabs.TabsContentProps
 
 export const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(function TabPanel(
-  { children, ...rest },
-  ref
+  { className = '', children, ...rest },
+  ref,
 ) {
   return (
-    <RadixTabs.Content ref={ref} {...rest}>
+    <RadixTabs.Content
+      ref={ref}
+      className={envisTwMerge(
+        `focus-visible:envis-outline dark:focus-visible:envis-outline-invert outline-offset-4`,
+        className,
+      )}
+      {...rest}
+    >
       {children}
     </RadixTabs.Content>
-  );
-});
+  )
+})

web/core/Tabs/Tabs.tsx

@@ -1,15 +1,12 @@
-import { forwardRef } from 'react';
-import * as RadixTabs from '@radix-ui/react-tabs';
+import { forwardRef } from 'react'
+import * as RadixTabs from '@radix-ui/react-tabs'
 
-export type TabsProps = RadixTabs.TabsProps;
+export type TabsProps = RadixTabs.TabsProps
 
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { children, ...rest },
-  ref
-) {
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs({ children, ...rest }, ref) {
   return (
     <RadixTabs.Root ref={ref} {...rest}>
       {children}
     </RadixTabs.Root>
-  );
-});
+  )
+})

web/pageComponents/search/SearchResults.tsx

@@ -7,6 +7,7 @@ import NewsHit from './NewsHit'
 import TopicHit from './TopicHit'
 import TotalResultsStat from './TotalResultsStat'
 import { useSortBy, UseSortByProps, useHits, useInstantSearch } from 'react-instantsearch'
+import { FormattedMessage, useIntl } from 'react-intl'
 
 const { TabList, Tab, TabPanel } = Tabs
 
@@ -20,7 +21,7 @@ type SearchResultsProps = {
 const SearchResults = (props: SearchResultsProps) => {
   const { resultsRef } = props
   const { refine, currentRefinement, options } = useSortBy(props)
-
+  const intl = useIntl()
   const { results } = useHits()
   const { scopedResults, indexUiState } = useInstantSearch()
   const [userClicked, setUserClicked] = useState(false)
@@ -73,9 +74,14 @@ const SearchResults = (props: SearchResultsProps) => {
             activationMode="manual"
             onValueChange={handleTabChange}
           >
-            <TabList>
+            <TabList aria-label={intl.formatMessage({ id: 'categories', defaultMessage: 'Categories' })}>
               {options.map((item) => (
-                <Tab key={item.label} value={item.label} className="text-sm flex gap-2">
+                <Tab
+                  id={`tab-trigger-${item.label}`}
+                  key={item.label}
+                  value={item.label}
+                  className="text-sm flex gap-2"
+                >
                   {item.label}
                   <span>
                     (
@@ -89,7 +95,7 @@ const SearchResults = (props: SearchResultsProps) => {
               ))}
             </TabList>
             {options.map((it) => (
-              <TabPanel key={it.label} value={it.label}>
+              <TabPanel key={it.label} value={it.label} aria-labelledby={`tab-trigger-${it.label}`}>
                 <TotalResultsStat hitsPerPage={HITS_PER_PAGE} />
                 <Hits hitComponent={getHitProps(it.label)} />
               </TabPanel>

web/pageComponents/shared/LogoLink.tsx

@@ -10,7 +10,7 @@ export const LogoLink = ({ ...rest }: LogoLinkProps) => {
       href="/"
       aria-label="Equinor home page"
       {...rest}
-      className="flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline"
+      className="flex items-center justify-self-start h-full focus:outline-none focus-visible:envis-outline dark:focus-visible:envis-outline-invert"
       prefetch={false}
     >
       <LogoSecondary className="-mt-[12%]" />