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/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>