Fix head and a11y for typing word (#1472)

nmn · web-flow · commit 232b01cf2ff0 · 2026-01-30T21:34:03.000-05:00
diff --git a/packages/docs/src/components/TypingWord.tsx b/packages/docs/src/components/TypingWord.tsx
@@ -9,6 +9,7 @@
 
 import { vars } from '@/theming/vars.stylex';
 import * as stylex from '@stylexjs/stylex';
+import { Fragment } from 'react';
 
 const WORDS = [
   'expressive',
@@ -20,11 +21,20 @@ const WORDS = [
 
 export default function TypingWord() {
   return (
-    <span {...stylex.props(styles.container)}>
+    <span {...stylex.props(styles.container)} aria-hidden="true">
       {WORDS.map((word, index) => (
-        <span key={index} {...stylex.props(styles.word)}>
-          {word}
-        </span>
+        <Fragment key={word}>
+          <span {...stylex.props(styles.word)}>
+            {word}
+            <span {...stylex.props(styles.hidden)}>
+              {index < WORDS.length - 2
+                ? ', '
+                : index === WORDS.length - 2
+                  ? ' and '
+                  : ''}
+            </span>
+          </span>
+        </Fragment>
       ))}
     </span>
   );
@@ -114,4 +124,11 @@ const styles = stylex.create({
     ),
     animationIterationCount: 'infinite',
   },
+  hidden: {
+    position: 'absolute',
+    top: -9999,
+    left: -9999,
+    fontSize: '0.01em',
+    opacity: 0.0001,
+  },
 });
diff --git a/packages/docs/src/pages/(home)/index.tsx b/packages/docs/src/pages/(home)/index.tsx
@@ -15,17 +15,23 @@ import { vars } from '@/theming/vars.stylex';
 export default function Home() {
   return (
     <>
-      <title>StyleX</title>
-      <link href="/img/favicon.svg" rel="icon" type="image/svg+xml" />
+      <title>StyleX — styling system for ambitious interfaces</title>
       <main {...stylex.props(styles.main)}>
         <section {...stylex.props(styles.hero)}>
           <h1 {...stylex.props(styles.title)}>
             <StylexAnimatedLogo style={styles.logo} />
           </h1>
-          <p {...stylex.props(styles.subtitle)}>
-            The <TypingWord /> <br {...stylex.props(styles.mobileBreak)} />
-            styling system for <br {...stylex.props(styles.tabletBreak)} />{' '}
-            ambitious interfaces
+          <p
+            {...stylex.props(styles.subtitle)}
+            aria-label="The expressive, type-safe, composable, predictable, and themeable styling system for ambitious interfaces"
+          >
+            <span aria-hidden="true">
+              The <TypingWord />{' '}
+              <br {...stylex.props(styles.mobileBreak)} aria-hidden="true" />
+              styling system for{' '}
+              <br {...stylex.props(styles.tabletBreak)} aria-hidden="true" />
+              ambitious interfaces
+            </span>
           </p>
           <div {...stylex.props(styles.ctaSpacer)} />
           <section {...stylex.props(styles.ctaSection)}>
diff --git a/packages/docs/src/pages/(playground)/playground.tsx b/packages/docs/src/pages/(playground)/playground.tsx
@@ -14,7 +14,6 @@ export default function PlaygroundPage() {
   return (
     <>
       <title>Playground | StyleX</title>
-      <link href="/img/favicon.svg" rel="icon" type="image/svg+xml" />
       <main {...stylex.props(styles.main)}>
         <Playground />
       </main>
diff --git a/packages/docs/src/pages/_layout.tsx b/packages/docs/src/pages/_layout.tsx
@@ -10,12 +10,29 @@ import '@/styles/globals.css';
 import DevStyleXHMR from '@/components/DevStyleXHMR';
 import { SidebarProvider } from '@/contexts/SidebarContext';
 import faviconUrl from '@/static/img/favicon.svg';
+import coverImageUrl from '@/static/img/stylex-cover-photo.png';
+
+const DEFAULT_TITLE = 'StyleX — The styling system for ambitious interfaces';
+const DEFAULT_DESCRIPTION = 'The styling system that powers Meta.';
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <>
       <head>
+        <meta charSet="utf-8" />
+        <meta content="width=device-width, initial-scale=1" name="viewport" />
+        <meta content={DEFAULT_DESCRIPTION} name="description" />
+        <meta content={DEFAULT_TITLE} property="og:title" />
+        <meta content={DEFAULT_DESCRIPTION} property="og:description" />
+        <meta content="website" property="og:type" />
+        <meta content={coverImageUrl} property="og:image" />
+        <meta content="summary_large_image" name="twitter:card" />
+        <meta content={DEFAULT_TITLE} name="twitter:title" />
+        <meta content={DEFAULT_DESCRIPTION} name="twitter:description" />
+        <meta content={coverImageUrl} name="twitter:image" />
+        <link href={faviconUrl} rel="icon" sizes="any" />
         <link href={faviconUrl} rel="icon" type="image/svg+xml" />
+        <link href={faviconUrl} rel="shortcut icon" />
       </head>
       <DevStyleXHMR />
       <Provider>
diff --git a/yarn.lock b/yarn.lock
