fix(BOOK-468): Added inert attribute to SidePeekSEO element to ignore tab navigation and screen readers

Approved-by: Linus Flood

packages/design-system/lib/components/SidePeek/SelfControlled/SidePeekSEO.tsx

@@ -1,16 +0,0 @@
-import type { SidePeekSelfControlledProps } from './sidePeek'
-
-// Sidepeeks generally have important content that should be indexed by search engines.
-// The content is hidden behind a modal, but it is still important for SEO.
-// This component is used to provide SEO information for the sidepeek content.
-export default function SidePeekSEO({
-  title,
-  children,
-}: React.PropsWithChildren<Pick<SidePeekSelfControlledProps, 'title'>>) {
-  return (
-    <div className="sr-only">
-      <h2>{title}</h2>
-      {children}
-    </div>
-  )
-}

packages/design-system/lib/components/SidePeek/SelfControlled/index.tsx

@@ -11,7 +11,7 @@ import { IconButton } from '../../IconButton'
 import { MaterialIcon } from '../../Icons/MaterialIcon'
 import { Typography } from '../../Typography'
 
-import SidePeekSEO from './SidePeekSEO'
+import SidePeekSEO from '../SidePeekSEO'
 
 import styles from './sidePeekSelfControlled.module.css'
 

packages/design-system/lib/components/SidePeek/SidePeekSEO.tsx

@@ -1,5 +1,6 @@
 interface SidePeekSEOProps {
   title: string
+  shouldInert?: boolean
 }
 
 // Sidepeeks generally have important content that should be indexed by search engines.
@@ -7,10 +8,15 @@ interface SidePeekSEOProps {
 // This component is used to provide SEO information for the sidepeek content.
 export default function SidePeekSEO({
   title,
+  shouldInert = false,
   children,
 }: React.PropsWithChildren<SidePeekSEOProps>) {
   return (
-    <div className="sr-only">
+    // Both inert and sr-only to ensure that the content is not focusable
+    // or visible to screen readers but still available for SEO.
+    // The other possible options, such as aria-hidden and the hidden attribute,
+    // are less suitable for SEO purposes.
+    <div className="sr-only" inert={shouldInert}>
       <h2>{title}</h2>
       {children}
     </div>

packages/design-system/lib/components/SidePeek/index.tsx

@@ -20,6 +20,7 @@ interface SidePeekProps {
   openInRoot?: boolean
   handleClose?: (isOpen: boolean) => void
   closeLabel: string
+  shouldInert?: boolean
 }
 
 export default function SidePeek({
@@ -30,6 +31,7 @@ export default function SidePeek({
   isOpen,
   openInRoot = false,
   closeLabel,
+  shouldInert,
 }: React.PropsWithChildren<SidePeekProps>) {
   const rootDiv = useRef<HTMLDivElement>(null)
   const headerRef = useRef<HTMLElement>(null)
@@ -116,7 +118,9 @@ export default function SidePeek({
         </ModalOverlay>
       </div>
 
-      <SidePeekSEO title={title}>{children}</SidePeekSEO>
+      <SidePeekSEO title={title} shouldInert={shouldInert}>
+        {children}
+      </SidePeekSEO>
     </>
   )
 }