Merge pull request #666 from colonial-heritage/accessibility-RG

Accessibility on Research Guide
colonial-heritage · Jun 27, 2024 · 25dc8ae · 25dc8ae
2 parents ac2fb2f + 987edf4
commit 25dc8ae
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 22 deletions.
diff --git a/apps/researcher/src/app/[locale]/research-guide/[id]/page.tsx b/apps/researcher/src/app/[locale]/research-guide/[id]/page.tsx
@@ -41,34 +41,44 @@ export default async function GuidePage({params}: Props) {
         </nav>
       </div>
       <main className="w-full px-4 sm:px-10 max-w-7xl mx-auto mt-16 mb-40">
-        <h1 className="text-2xl md:text-4xl mb-2">{guide.name}</h1>
+        <h1 className="text-2xl md:text-4xl mb-2" tabIndex={0}>
+          {guide.name}
+        </h1>
         <div className="flex flex-col md:flex-row gap-6">
           <div className="w-full md:w-2/3">
             <div className="prose" id="#description">
               {guide.text && <StringToMarkdown text={guide.text} />}
               {guide.citations && guide.citations.length > 0 && (
                 <>
-                  <h2 id="citations">{t('citations')}</h2>
-                  {guide.citations.map(citation => (
-                    <div className="mb-6" key={citation.id}>
-                      <div className="font-semibold">{citation.name}</div>
-                      <div>
-                        {citation.description}
-                        {' — '}
-                        <span className="text-sm">
-                          <a href={citation.url}>{citation.url}</a>
-                        </span>
-                      </div>
-                    </div>
-                  ))}
+                  <h2 id="citations" tabIndex={0}>
+                    {t('citations')}
+                  </h2>
+                  <ul className="not-prose">
+                    {guide.citations.map(citation => (
+                      <li className="mb-6" key={citation.id}>
+                        <div className="font-semibold" tabIndex={0}>
+                          {citation.name}
+                        </div>
+                        <div>
+                          {citation.description}
+                          {' — '}
+                          <span className="text-sm">
+                            <a href={citation.url}>{citation.url}</a>
+                          </span>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
                 </>
               )}
             </div>
           </div>
           <div className="w-full md:w-1/3">
             {guide.seeAlso && guide.seeAlso?.length > 0 && (
               <>
-                <h2 className="mb-2">{t('relatedItems')}</h2>
+                <h2 className="mb-2" tabIndex={0}>
+                  {t('relatedItems')}
+                </h2>
                 <div className="flex flex-col gap-2 mb-4">
                   {guide.seeAlso?.map(item => (
                     <Link
@@ -90,17 +100,21 @@ export default async function GuidePage({params}: Props) {
             <div className="flex flex-col gap-4">
               {guide.keywords && guide.keywords.length > 0 && (
                 <div className="bg-consortium-sand-50 rounded px-2 py-4">
-                  <h3>{t('keywords')}</h3>
+                  <h3 tabIndex={0}>{t('keywords')}</h3>
                   {guide.keywords.map(keyword => (
-                    <div key={keyword.id}>{keyword.name}</div>
+                    <div key={keyword.id} tabIndex={0}>
+                      {keyword.name}
+                    </div>
                   ))}
                 </div>
               )}
               {guide.contentLocations && guide.contentLocations.length > 0 && (
                 <div className="bg-consortium-sand-50 rounded px-2 py-4">
-                  <h3>{t('contentLocations')}</h3>
+                  <h3 tabIndex={0}>{t('contentLocations')}</h3>
                   {guide.contentLocations.map(location => (
-                    <div key={location.id}>{location.name}</div>
+                    <div key={location.id} tabIndex={0}>
+                      {location.name}
+                    </div>
                   ))}
                 </div>
               )}

diff --git a/apps/researcher/src/app/[locale]/research-guide/page.tsx b/apps/researcher/src/app/[locale]/research-guide/page.tsx
@@ -25,12 +25,16 @@ export default async function Page() {
 
   return (
     <>
-      <h1 className="text-2xl md:text-4xl">{topLevel.name}</h1>
+      <h1 className="text-2xl md:text-4xl" tabIndex={0}>
+        {topLevel.name}
+      </h1>
       <div className="my-4 w-full max-w-5xl columns-2 gap-6">
         {topLevel.text && <StringToMarkdown text={topLevel.text} />}
       </div>
       <div className="bg-consortium-sand-100 rounded mt-6 -mx-4 pr-10">
-        <h2 className="px-4 pt-4">{t('level1Title')}</h2>
+        <h2 className="px-4 pt-4" tabIndex={0}>
+          {t('level1Title')}
+        </h2>
         <div className="pb-4 columns-3 gap-10">
           {level1Guides.map(item => (
             <Link
@@ -50,7 +54,9 @@ export default async function Page() {
       </div>
       <div className="mt-10 flex flex-col lg:flex-row gap-10">
         <div className="w-full lg:w-1/2">
-          <h2 className="mb-4">Topics</h2>
+          <h2 className="mb-4" tabIndex={0}>
+            {t('level2Title')}
+          </h2>
           <div className="flex flex-col md:block md:columns-2 md:gap-6 *:break-inside">
             {level2Guides.map(item => (
               <div
@@ -73,6 +79,7 @@ export default async function Page() {
                     key={subItem.id}
                     href={`/research-guide/${encodeRouteSegment(subItem.id)}`}
                     className="no-underline hover:bg-consortium-sand-200 transition rounded flex flex-col p-2 -ml-2"
+                    aria-label={`${subItem.name}, item of ${item.name}`}
                   >
                     <div className="flex items-center justify-between gap-2">
                       <div>{subItem.name}</div>