A11y fixes for Account UI (#22665)

* fixed empty <th> violation

* fixed empty <th> violation

* fixed empty <th> violation

* fixed unique attribute id violation in groups

* fixed a11y violation for account security

* fixed isShared in <th> element

* fixed aria-labelledby

* changed aria-labelledby to aria-label

---------

Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>

js/apps/account-ui/public/locales/en/translation.json

@@ -158,5 +158,7 @@
   "updateSuccess": "Resource successfully updated.",
   "user": "User",
   "username": "Username",
-  "usernamePlaceholder": "Username or email"
+  "usernamePlaceholder": "Username or email",
+  "groupsListHeader": "Groups list header",
+  "groupsListColumnsNames": "Groups list columns names"
 }

js/apps/account-ui/src/account-security/DeviceActivity.tsx

@@ -142,7 +142,7 @@ const DeviceActivity = () => {
         className="signed-in-device-list"
         aria-label={t("signedInDevices")}
       >
-        <DataListItem aria-labelledby="sessions">
+        <DataListItem aria-labelledby={`sessions-${key}`}>
           {devices.map((device) =>
             device.sessions.map((session) => (
               <DataListItemRow key={device.id}>

js/apps/account-ui/src/groups/Groups.tsx

@@ -53,7 +53,10 @@ const Groups = () => {
   return (
     <Page title={t("groups")} description={t("groupDescriptionLabel")}>
       <DataList id="groups-list" aria-label={t("groups")} isCompact>
-        <DataListItem id="groups-list-header" aria-labelledby="Columns names">
+        <DataListItem
+          id="groups-list-header"
+          aria-label={t("groupsListHeader")}
+        >
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[
@@ -69,7 +72,10 @@ const Groups = () => {
             />
           </DataListItemRow>
         </DataListItem>
-        <DataListItem id="groups-list-header" aria-labelledby="Columns names">
+        <DataListItem
+          id="groups-list-columns-names"
+          aria-label={t("groupsListColumnsNames")}
+        >
           <DataListItemRow>
             <DataListItemCells
               dataListCells={[

js/apps/account-ui/src/resources/PermissionRequest.tsx

@@ -85,7 +85,7 @@ export const PermissionRequest = ({
             <Tr>
               <Th>{t("requestor")}</Th>
               <Th>{t("permissionRequests")}</Th>
-              <Th></Th>
+              <Th aria-hidden="true"></Th>
             </Tr>
           </Thead>
           <Tbody>

js/apps/account-ui/src/resources/ResourcesTab.tsx

@@ -154,7 +154,9 @@ export const ResourcesTab = ({ isShared = false }: ResourcesTabProps) => {
             <Th aria-hidden="true" />
             <Th>{t("resourceName")}</Th>
             <Th>{t("application")}</Th>
-            <Th>{!isShared ? t("permissionRequests") : ""}</Th>
+            <Th aria-hidden={isShared}>
+              {!isShared ? t("permissionRequests") : ""}
+            </Th>
           </Tr>
         </Thead>
         {resources.map((resource, index) => (