Merge pull request #665 from colonial-heritage/accessibility-other-pages

new branch for accessibility on detailpage and communities
colonial-heritage · Jun 26, 2024 · 79db465 · 79db465
2 parents fb4c914 + 4bb509e
commit 79db465
Show file tree

Hide file tree

Showing 13 changed files with 56 additions and 29 deletions.
diff --git a/apps/researcher/src/app/[locale]/communities/[slug]/[listId]/page.tsx b/apps/researcher/src/app/[locale]/communities/[slug]/[listId]/page.tsx
@@ -85,7 +85,7 @@ export default async function Page({params}: Props) {
               <SlideOutClosed id={slideOutEditId}>
                 <div className="block">
                   <div className="flex flex-col md:flex-row justify-between">
-                    <h1 className="text-2xl md:text-4xl mb-4">
+                    <h1 className="text-2xl md:text-4xl mb-4" tabIndex={0}>
                       {objectList.name}
                     </h1>
                     <div>
@@ -182,7 +182,7 @@ export default async function Page({params}: Props) {
           ) : (
             <>
               <div className="flex flex-col md:flex-row md:justify-between md:items-center mt-4">
-                <h2 className="text-xl">
+                <h2 className="text-xl" tabIndex={0}>
                   {t('objectCount', {count: objectList.objects.length})}
                 </h2>
               </div>

diff --git a/apps/researcher/src/app/[locale]/communities/[slug]/page.tsx b/apps/researcher/src/app/[locale]/communities/[slug]/page.tsx
@@ -106,7 +106,10 @@ export default async function CommunityPage({params}: Props) {
         <div className="w-full px-4 sm:px-10 max-w-[1800px] mx-auto pt-4 pb-10 md:pt-10 md:pb-16 xl:pt-16 xl:pb-20 flex flex-col lg:flex-row gap-10">
           <SlideOutClosed id={slideOutEditFormId}>
             <main className="w-full lg:w-2/3 xl:w-3/4">
-              <h1 className="text-2xl md:text-3xl lg:text-4xl 2xl:text-5xl max-w-5xl inline-flex gap-2">
+              <h1
+                className="text-2xl md:text-3xl lg:text-4xl 2xl:text-5xl max-w-5xl inline-flex gap-2"
+                tabIndex={0}
+              >
                 <span className="font-normal">{t('title')}</span>
                 <span data-testid="community-name">{community.name}</span>
               </h1>
@@ -147,7 +150,13 @@ export default async function CommunityPage({params}: Props) {
         <div className="w-full md:w-3/4">
           <div className="flex justify-between my-4">
             <div>
-              <h2 className="text-xl">{t('objectListsTitle')}</h2>
+              <h2
+                className="text-xl"
+                tabIndex={0}
+                arial-label={t('accessibilityObjectListsTitle')}
+              >
+                {t('objectListsTitle')}
+              </h2>
               {objectLists.length > 0 && (
                 <p>{t('objectListsSubTitle', {count: objectLists.length})}</p>
               )}

diff --git a/apps/researcher/src/app/[locale]/communities/page.tsx b/apps/researcher/src/app/[locale]/communities/page.tsx
@@ -71,7 +71,9 @@ export default async function CommunitiesPage({searchParams = {}}: Props) {
       <div className="bg-consortium-green-300 text-consortium-blue-800 py-10 md:py-20 grow">
         <div className="flex flex-col md:flex-row gap-4 md:gap-20 w-full max-w-[1800px] mx-auto px-4 sm:px-10">
           <div className="flex flex-col gap-4 w-full md:w-3/5 max-w-md">
-            <h1 className="text-2xl md:text-4xl">{t('title')}</h1>
+            <h1 className="text-2xl md:text-4xl" tabIndex={0}>
+              {t('title')}
+            </h1>
 
             <div className="">
               <p>{t('pageDescription')}</p>

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/data-table.tsx b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/data-table.tsx
@@ -30,7 +30,9 @@ export default function DataTable() {
   return (
     <div className="w-full block">
       <div className="flex justify-between items-center">
-        <h3 className="my-4 w-full pt-4">{t('dataTableTitle')}</h3>
+        <h3 className="my-4 w-full pt-4" tabIndex={0}>
+          {t('dataTableTitle')}
+        </h3>
         <div className="flex items-center text-consortium-blue-800 ">
           {selectedEvents.length > 0 && (
             <button
@@ -96,9 +98,9 @@ function ProvenanceEventRow({
               {metadata.map(
                 ({prop, translationKey}) =>
                   event[prop] && (
-                    <div key={prop}>
+                    <div key={prop} tabIndex={0}>
                       {t(translationKey)}{' '}
-                      <strong>{event[prop] as string}</strong>
+                      <strong tabIndex={0}>{event[prop] as string}</strong>
                     </div>
                   )
               )}

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/overview.tsx b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/overview.tsx
@@ -38,7 +38,7 @@ export default async function Provenance({objectId}: {objectId: string}) {
     return (
       <div className="w-full">
         <div className="mx-auto px-4 sm:px-10 max-w-[1800px]">
-          <h2 id="provenance" className="text-2xl mb-2 mt-20">
+          <h2 id="provenance" className="text-2xl mb-2 mt-20" tabIndex={0}>
             {t('title')}
           </h2>
           <p className="text-neutral-600 text-sm max-w-2xl mb-6">
@@ -64,7 +64,7 @@ export default async function Provenance({objectId}: {objectId: string}) {
     <ProvenanceProvider events={userEvents}>
       <div className="w-full">
         <div className="mx-auto px-4 sm:px-10 max-w-[1800px]">
-          <h2 id="provenance" className="text-2xl mb-2 mt-20">
+          <h2 id="provenance" className="text-2xl mb-2 mt-20" tabIndex={0}>
             {t('title')}
           </h2>
           <p className="text-neutral-600 text-sm max-w-2xl mb-6">

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/overview.tsx b/apps/researcher/src/app/[locale]/objects/[id]/local-contexts-notices/overview.tsx
@@ -55,7 +55,9 @@ export default async function LocalContextsNotices() {
 
   return (
     <div className="my-16" id="localContextNotices">
-      <h2 className="text-2xl mb-4 scroll-mt-20">{t('title')}</h2>
+      <h2 className="text-2xl mb-4 scroll-mt-20" tabIndex={0}>
+        {t('title')}
+      </h2>
       <p className="text-neutral-600 text-sm max-w-xl mb-6">
         {t.rich('description', {
           link: text => (
@@ -78,7 +80,10 @@ export default async function LocalContextsNotices() {
           >
             <div className="w-full xl:w-1/5 border-t border-neutral-400">
               <div className="sticky top-8 py-1">
-                <h3 className="text-lg w-full my-1 flex items-center">
+                <h3
+                  className="text-lg w-full my-1 flex items-center"
+                  tabIndex={0}
+                >
                   {notice.title}
                 </h3>
                 <Image

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx b/apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx
@@ -35,7 +35,7 @@ export function Metadata({
       <div className="flex flex-col xl:flex-row gap-2 xl:gap-10">
         <div className="w-full xl:w-1/5 border-t border-neutral-400 pt-4">
           <div className="sticky top-0 py-1">
-            <h3 className="text-lg w-full my-1 flex items-center">
+            <h3 className="text-lg w-full my-1 flex items-center" tabIndex={0}>
               {t(translationKey)}
             </h3>
             <div className="text-neutral-600 text-sm">
@@ -104,10 +104,10 @@ export async function MetadataEntry({
 
   return (
     <div className="border-t border-neutral-200 flex flex-col lg:flex-row justify-between gap-2 first:border-0 ">
-      <div className="w-full lg:w-2/3 py-3 whitespace-pre-wrap">
+      <div className="w-full lg:w-2/3 py-3 whitespace-pre-wrap" tabIndex={0}>
         {children}
         {languageCode && (
-          <div>
+          <div tabIndex={0}>
             <Language languageCode={languageCode} />
           </div>
         )}

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/page.tsx b/apps/researcher/src/app/[locale]/objects/[id]/page.tsx
@@ -89,6 +89,7 @@ export default async function Details({params}: Props) {
               <h1
                 className="text-2xl md:text-3xl lg:text-4xl 2xl:text-5xl max-w-5xl"
                 data-testid="page-title"
+                tabIndex={0}
               >
                 {object.name || (
                   <span className="text-consortium-blue-100">
@@ -117,7 +118,7 @@ export default async function Details({params}: Props) {
                   <div className="mb-4">
                     {organization.address?.addressLocality}
                   </div>
-                  <a href="#provider" className="p-4 -ml-4 italic">
+                  <a href="#provider" className="p-4 -ml-4 italic" tabIndex={0}>
                     {t('providerInfo')}
                   </a>
                 </>
@@ -130,7 +131,9 @@ export default async function Details({params}: Props) {
           <main className="w-full md:w-2/3 order-2 md:order-1">
             <Notifications />
             <div className="mb-4 mt-10 flex justify-between">
-              <h2 className="text-2xl">{t('metadata')}</h2>
+              <h2 className="text-2xl" tabIndex={0}>
+                {t('metadata')}
+              </h2>
             </div>
             <div className="flex flex-col gap-8 self-stretch">
               <Metadata
@@ -230,7 +233,9 @@ export default async function Details({params}: Props) {
           <div className="w-full">
             <div className="mx-auto px-4 sm:px-10 max-w-[1800px]">
               <div className="mt-10" id="provider">
-                <h2 className="text-xl mt-4">{t('dataProviderTitle')}</h2>
+                <h2 className="text-xl mt-4" tabIndex={0}>
+                  {t('dataProviderTitle')}
+                </h2>
                 <div className="flex flex-col md:flex-row mt-4">
                   <div className="w-full md:w-1/2">
                     <div className="mb-4">{t('dataProviderDescription')}</div>

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/provided-by.tsx b/apps/researcher/src/app/[locale]/objects/[id]/provided-by.tsx
@@ -36,15 +36,15 @@ export function ProvidedBy({
       })}
     >
       <div>
-        <div>
+        <div tabIndex={0}>
           {t.rich('name', {
-            name: () => <strong>{name}</strong>,
+            name: () => <strong tabIndex={0}>{name}</strong>,
           })}
         </div>
         {communityName && (
           <div>
             {t.rich('community', {
-              name: () => <strong>{communityName}</strong>,
+              name: () => <strong tabIndex={0}>{communityName}</strong>,
             })}
           </div>
         )}

diff --git a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
@@ -125,10 +125,11 @@ export function UserEnrichmentForm({
         data-testid="enrichment-form"
       >
         <div className="flex justify-between items-center border-b -mx-4 px-4 pb-2 mb-2">
-          <h3>{t('title')}</h3>
+          <h3 tabIndex={0}>{t('title')}</h3>
           <SlideOutButton
             className="p-1 sm:py-2 sm:px-3 rounded-full text-xs bg-neutral-200/50 hover:bg-neutral-300/50 text-neutral-800 transition flex items-center gap-1"
             id={slideOutId}
+            aira-label={t('accessibilityCloseButton')}
           >
             <XMarkIcon className='className="w-4 h-4 stroke-neutral-900' />
           </SlideOutButton>

diff --git a/apps/researcher/src/app/[locale]/objects/heritage-object-card.tsx b/apps/researcher/src/app/[locale]/objects/heritage-object-card.tsx
@@ -79,7 +79,6 @@ export function HeritageObjectListItem({
       href={`/objects/${encodeRouteSegment(heritageObject.id)}`}
       data-testid="object-card"
       className="flex flex-row justify-start items-center gap-4 border-t border-neutral-200 py-3 w-full no-underline"
-      aria-label={t('heritageObject')}
     >
       <div className="w-30">
         {imageUrl &&

diff --git a/apps/researcher/src/messages/en/messages.json b/apps/researcher/src/messages/en/messages.json
@@ -101,10 +101,10 @@
     "backButton": "Search",
     "noEntity": "Object could not be found",
     "object": "Object",
-    "providerCurrentHolder": "Bronhouder object",
+    "providerCurrentHolder": "Data provider object",
     "providerInfo": "More info",
     "contactInfo": "Contact info",
-    "dataProviderTitle": "Bronhouder object",
+    "dataProviderTitle": "Data provider object",
     "dataProviderDescription": "The data of this object is provided by:",
     "websiteLabel": "Website",
     "objectIdLabel": "Reference or object ID by the the data provider",
@@ -393,7 +393,7 @@
     "addCommunity": "Create a community",
     "showMyCommunities": "Show only my communities"
   },
-  "Community": {
+"Community": {
     "title": "Community of",
     "backButton": "All communities",
     "noEntity": "Community could not be found",
@@ -403,6 +403,7 @@
     "membersButton": "Manage members",
     "goToListButton": "See all objects",
     "objectListsTitle": "Lists",
+    "accessibilityObjectListsTitle": "Lists with objects created by this community",
     "objectListsCardType": "List",
     "objectListsSubTitle": "This community has {count, plural, =0 {0 lists} =1 {1 list} other {# lists}}",
     "membersTitle": "Members",
@@ -480,7 +481,8 @@
     "citationRequired": "Resource is required",
     "agreedToLicenseUnchecked": "You need to agree to the license before you can add a narrative",
     "noCommunities": "You are not yet a member of a community that has permission to add a story. You can create a community or join an existing community.",
-    "saving": "Saving..."
+    "saving": "Saving...",
+    "accessibilityCloseButton": "Close form"
   },
   "ContactForm": {
     "labelEmailAddress": "Email",

diff --git a/apps/researcher/src/messages/nl/messages.json b/apps/researcher/src/messages/nl/messages.json
@@ -112,7 +112,7 @@
     "noData": "Geen <subject></subject> beschikbaar",
     "identifier": "ID: {identifier}",
     "metadata": "Metadata",
-    "name": "titel",
+    "name": "Titel",
     "noName": "Geen titel",
     "description": "Beschrijving",
     "locationsCreated": "Locatie van creatie",
@@ -403,6 +403,7 @@
     "membersButton": "Leden beheren",
     "goToListButton": "Bekijk alle objecten",
     "objectListsTitle": "Lijsten",
+    "accessibilityObjectListsTitle": "Lijsten met objecten, aangemaakt door deze community",
     "objectListsCardType": "Lijst",
     "objectListsSubTitle": "Deze community heeft {count, plural, =0 {0 lijsten} =1 {1 lijst} other {# lijsten}}",
     "membersTitle": "Leden",
@@ -480,7 +481,8 @@
     "citationRequired": "Bron is vereist",
     "agreedToLicenseUnchecked": "U moet akkoord gaan met de licentie voordat u een verhaal kunt toevoegen",
     "noCommunities": "U bent nog geen lid van een gemeenschap die toestemming heeft om een verhaal toe te voegen. U kunt een gemeenschap creëren of lid worden van een bestaande gemeenschap.",
-    "saving": "Opslaan..."
+    "saving": "Opslaan...",
+    "accessibilityCloseButton": "Sluit formulier"
   },
    "ContactForm": {
      "labelEmailAddress": "E-mail",