libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases Packages Activity Actions

A11y fixes for Account UI (#22665)

Browse source 
* 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>
This commit is contained in:
agagancarczyk 2023-08-28 16:10:15 +01:00 committed by GitHub
parent bf0d16c4ff
commit 49959348ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 16 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -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"
}

2
js/apps/account-ui/src/account-security/DeviceActivity.tsx
View file

@ -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}>

10
js/apps/account-ui/src/groups/Groups.tsx
View file

@ -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={[

2
js/apps/account-ui/src/resources/PermissionRequest.tsx
View file

@ -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>

4
js/apps/account-ui/src/resources/ResourcesTab.tsx
View file

@ -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) => (