fix(a11y): read title while searching

jwplayer · Apr 22, 2024 · b46e659 · b46e659
1 parent 5e6d445
commit b46e659
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 12 deletions.
diff --git a/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx b/packages/ui-react/src/components/ErrorPage/ErrorPage.tsx
@@ -38,7 +38,9 @@ export const ErrorPageWithoutTranslation = ({ title, children, message, learnMor
     <div className={styles.errorPage}>
       <div className={styles.box}>
         <img className={styles.image} src={logo || '/images/logo.png'} alt={alt} />
-        <h1 className={styles.title}>{title || 'An error occurred'}</h1>
+        <h1 className={styles.title} aria-live="polite">
+          {title || 'An error occurred'}
+        </h1>
         <div className={styles.main}>
           <p className={styles.message}>{message || 'Try refreshing this page or come back later.'}</p>
           {children}

diff --git a/packages/ui-react/src/pages/Search/Search.tsx b/packages/ui-react/src/pages/Search/Search.tsx
@@ -56,6 +56,14 @@ const Search = () => {
     };
   }, []);
 
+  const title = isFetching
+    ? t('heading')
+    : !query
+    ? t('start_typing')
+    : playlist?.playlist.length
+    ? t('title', { count: playlist.playlist.length, query })
+    : t('no_results_heading', { query });
+
   if ((error || !playlist) && !isFetching) {
     return (
       <ErrorPage title={t('error_heading')}>
@@ -66,31 +74,40 @@ const Search = () => {
   }
 
   if (!query) {
-    return <ErrorPage title={t('start_typing')} />;
+    return <ErrorPage title={title} />;
   }
 
   if (!playlist?.playlist.length) {
     return (
-      <ErrorPage title={t('no_results_heading', { query })}>
-        <h2 className={styles.subHeading}>{t('suggestions')}</h2>
-        <ul>
-          <li>{t('tip_one')}</li>
-          <li>{t('tip_two')}</li>
-          <li>{t('tip_three')}</li>
-        </ul>
-      </ErrorPage>
+      <>
+        <Helmet>
+          <title>
+            {title} - {siteName}
+          </title>
+        </Helmet>
+        <ErrorPage title={title}>
+          <h2 className={styles.subHeading}>{t('suggestions')}</h2>
+          <ul>
+            <li>{t('tip_one')}</li>
+            <li>{t('tip_two')}</li>
+            <li>{t('tip_three')}</li>
+          </ul>
+        </ErrorPage>
+      </>
     );
   }
 
   return (
     <div className={styles.search}>
       <Helmet>
         <title>
-          {t('title', { count: playlist.playlist.length, query })} - {siteName}
+          {title} - {siteName}
         </title>
       </Helmet>
       <header className={styles.header}>
-        <h2 id={headingId}>{t('heading')}</h2>
+        <h2 id={headingId} aria-live={isFetching ? undefined : 'polite'}>
+          {title}
+        </h2>
       </header>
       <CardGrid
         aria-labelledby={headingId}