From a6c5e47b54fc9daa5088fe6d1b6aaa6dc5ea642d Mon Sep 17 00:00:00 2001
From: Bas Doppen <basdoppen@gmail.com>
Date: Fri, 21 Jun 2024 12:09:41 +0200
Subject: [PATCH 1/3] new branch for accessibility

---
 .../src/app/[locale]/communities/[slug]/page.tsx    | 13 +++++++++++--
 .../src/app/[locale]/communities/page.tsx           |  4 +++-
 .../objects/[id]/(provenance)/data-table.tsx        |  8 +++++---
 .../[locale]/objects/[id]/(provenance)/overview.tsx |  4 ++--
 .../[id]/local-contexts-notices/overview.tsx        |  9 +++++++--
 .../src/app/[locale]/objects/[id]/metadata.tsx      |  6 +++---
 .../src/app/[locale]/objects/[id]/page.tsx          | 11 ++++++++---
 .../src/app/[locale]/objects/[id]/provided-by.tsx   |  6 +++---
 .../[locale]/objects/[id]/user-enrichment-form.tsx  |  3 ++-
 .../app/[locale]/objects/heritage-object-card.tsx   |  1 -
 apps/researcher/src/messages/en/messages.json       |  7 ++++---
 apps/researcher/src/messages/nl/messages.json       |  3 ++-
 12 files changed, 50 insertions(+), 25 deletions(-)

diff --git a/apps/researcher/src/app/[locale]/communities/[slug]/page.tsx b/apps/researcher/src/app/[locale]/communities/[slug]/page.tsx
index 38b08c4dd..79d2a24a1 100644
--- 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
index b84b90b8e..d43bd4909 100644
--- 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
index 541412049..a774dc724 100644
--- 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
index f6ecfcb07..ca81e807c 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/overview.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/(provenance)/overview.tsx
@@ -44,7 +44,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">
@@ -70,7 +70,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
index ba0cd880c..054c9fa57 100644
--- 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
@@ -61,7 +61,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 => (
@@ -84,7 +86,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
index de96d791f..d83e4a2a2 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/metadata.tsx
@@ -41,7 +41,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">
@@ -110,10 +110,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
index cdf104458..073cf4cf7 100644
--- 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
index 4f500da78..77133cf83 100644
--- 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
index 31011bc94..22626ffce 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
@@ -127,10 +127,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="Close form"
           >
             <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
index 3790f09e3..8ee51b038 100644
--- 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
index 87ba46d3f..8c0afc47f 100644
--- 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",
@@ -388,7 +388,7 @@
     "addCommunity": "Create a community",
     "showMyCommunities": "Show only my communities"
   },
-  "Community": {
+"Community": {
     "title": "Community of",
     "backButton": "All communities",
     "noEntity": "Community could not be found",
@@ -398,6 +398,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",
diff --git a/apps/researcher/src/messages/nl/messages.json b/apps/researcher/src/messages/nl/messages.json
index 1774f9131..afc0f5e92 100644
--- 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",
@@ -398,6 +398,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",

From 1048ae84ed177436b18c05c4a7ac98652dd49bca Mon Sep 17 00:00:00 2001
From: Bas Doppen <basdoppen@gmail.com>
Date: Fri, 21 Jun 2024 12:33:01 +0200
Subject: [PATCH 2/3] tabindex list page

---
 .../src/app/[locale]/communities/[slug]/[listId]/page.tsx     | 4 ++--
 1 file changed, 2 insertions(+), 2 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
index 45c326047..6be709dce 100644
--- 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>

From 8fa5fb7394c1e69b2de2dfd65968a09eeba967a7 Mon Sep 17 00:00:00 2001
From: Barbara Honhoff <barbara@honhoff.dev>
Date: Wed, 26 Jun 2024 10:38:08 +0200
Subject: [PATCH 3/3] Move hardcoded text to translations

---
 .../src/app/[locale]/objects/[id]/user-enrichment-form.tsx     | 2 +-
 apps/researcher/src/messages/en/messages.json                  | 3 ++-
 apps/researcher/src/messages/nl/messages.json                  | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

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
index 22626ffce..761fb6dd5 100644
--- a/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
+++ b/apps/researcher/src/app/[locale]/objects/[id]/user-enrichment-form.tsx
@@ -131,7 +131,7 @@ export function UserEnrichmentForm({
           <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="Close form"
+            aira-label={t('accessibilityCloseButton')}
           >
             <XMarkIcon className='className="w-4 h-4 stroke-neutral-900' />
           </SlideOutButton>
diff --git a/apps/researcher/src/messages/en/messages.json b/apps/researcher/src/messages/en/messages.json
index 8c0afc47f..09922ce09 100644
--- a/apps/researcher/src/messages/en/messages.json
+++ b/apps/researcher/src/messages/en/messages.json
@@ -475,7 +475,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
index afc0f5e92..740488f5f 100644
--- a/apps/researcher/src/messages/nl/messages.json
+++ b/apps/researcher/src/messages/nl/messages.json
@@ -475,7 +475,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",