From afc04588a57ff8ce43c27cef8180f0d0dedb7153 Mon Sep 17 00:00:00 2001
From: agagancarczyk <agagancarczyk@gmail.com>
Date: Mon, 4 Jul 2022 18:02:18 +0100
Subject: [PATCH] Accessibility fixes for Client Scopes page #2850 (#2898)

---
 public/resources/en/client-scopes.json |  3 ++-
 src/client-scopes/add/MapperDialog.tsx | 13 ++++++++++---
 2 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/public/resources/en/client-scopes.json b/public/resources/en/client-scopes.json
index a7403eff8b..011c697eb6 100644
--- a/public/resources/en/client-scopes.json
+++ b/public/resources/en/client-scopes.json
@@ -52,5 +52,6 @@
     "all": "All",
     "saml": "SAML",
     "openid-connect": "openid-connect"
-  }
+  },
+  "headerName": "header name"
 }
diff --git a/src/client-scopes/add/MapperDialog.tsx b/src/client-scopes/add/MapperDialog.tsx
index 15b5109f3e..42f312c661 100644
--- a/src/client-scopes/add/MapperDialog.tsx
+++ b/src/client-scopes/add/MapperDialog.tsx
@@ -86,10 +86,17 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
 
   return (
     <Modal
-      aria-labelledby={t("addPredefinedMappers")}
+      aria-label={
+        isBuiltIn ? t("addPredefinedMappers") : t("emptySecondaryAction")
+      }
       variant={ModalVariant.medium}
       header={
-        <TextContent>
+        <TextContent
+          role="dialog"
+          aria-label={
+            isBuiltIn ? t("addPredefinedMappers") : t("emptySecondaryAction")
+          }
+        >
           <Text component={TextVariants.h1}>
             {isBuiltIn ? t("addPredefinedMappers") : t("emptySecondaryAction")}
           </Text>
@@ -142,7 +149,7 @@ export const AddMapperDialog = (props: AddMapperDialogProps) => {
           aria-label={t("addPredefinedMappers")}
           isCompact
         >
-          <DataListItem aria-labelledby="headerName" id="header">
+          <DataListItem aria-label={t("headerName")} id="header">
             <DataListItemRow>
               <DataListItemCells
                 dataListCells={header.map((name) => (