libre.sh/keycloak-scim
2
0
Fork 0
Code Issues 14 Pull requests Releases Packages Activity Actions 6

More a11y fixes (#26344)

Browse source 
* fixed a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed more a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* a11y fixes

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

* fixed more a11y violations

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>

---------

Signed-off-by: Agnieszka Gancarczyk <agancarc@redhat.com>
Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com>
This commit is contained in:
agagancarczyk 2024-01-22 13:04:27 +00:00 committed by GitHub
parent ffa069a33b
commit 4a49759aa0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
22 changed files with 130 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

13
js/apps/admin-ui/cypress/e2e/realm_settings_tabs_test.spec.ts
View file

@ -243,12 +243,15 @@ describe("Realm settings tabs tests", () => {
addBundle();
cy.findByTestId("editUserLabelBtn-0").click();
cy.findByTestId("editUserLabelCancelBtn-0").click();
cy.findByTestId("editTranslationBtn-0").click();
cy.findByTestId("editTranslationCancelBtn-0").click();
cy.findByTestId("editUserLabelBtn-0").click();
cy.findByTestId("editUserLabelInput-0").click().clear().type("def");
cy.findByTestId("editUserLabelAcceptBtn-0").click();
cy.findByTestId("editTranslationBtn-0").click();
cy.findByTestId("editTranslationValueInput-0")
.click()
.clear()
.type("def");
cy.findByTestId("editTranslationAcceptBtn-0").click();
cy.findByTestId("editable-rows-table")
.contains("td", "def")

45
js/apps/admin-ui/maven-resources/theme/keycloak.v2/admin/messages/messages_en.properties
View file

@ -2998,4 +2998,47 @@ itemDeleteError=Could not delete item: {{error}}
noItems=There are no items
noItemsInstructions=You haven't created any items in this realm. Create a item to get started.
itemSaveError=Error could not save item\! {{error}}
itemSaveSuccessful=Sucessful saved
itemSaveSuccessful=Sucessful saved
realmSelector=Realm selector
editTranslationValue=Edit translation value
selectAccessTokenSignatureAlgorithm=Select access token signature algorithm
selectIdTokenSignatureAlgorithm=Select Id token signature algorithm
selectIdTokenEncryptionKeyManagementAlgorithm=Select Id token encryption key management algorithm
selectIdTokenEncryptionContentEncryptionAlgorithm=Select Id token encryption content encryption algorithm
selectUserInfoSignedResponseAlgorithm=Select user info signed response algorithm
selectUserInfoResponseEncryptionKeyManagementAlgorithm=Select user info response encryption key management algorithm
selectUserInfoResponseEncryptionContentEncryptionAlgorithm=Select user info response encryption content encryption algorithm
selectRequestObjectSignatureAlgorithm=Select request object signature algorithm
selectRequestObjectEncryption=Select request object encryption
selectRequestObjectEncoding=Select request object encoding
selectRequestObjectRequired=Select request object required
selectAuthorizationSignedResponseAlgorithm=Select authorization signed response algorithm
selectAuthorizationEncryptedResponseAlg=Select authorization encrypted response alg
selectAuthorizationEncryptedResponseEnc=Select authorization encrypted response enc
generatedCodeTextArea=Generated code textarea
selectAuthScopes=Select authorization scopes
selectResource= Select resource
selectClients=Select clients
selectLoginTheme=Select login theme
selectAccountTheme=Select account theme
selectAdminTheme=Select admin theme
selectEmailTheme=Select email theme
selectFilterType=Select filter type
selectUnmanagedAttributePolicy=Select unmanaged attribute policy
selectEventsListeners=Select events listeners
selectCachePolicy=Select cache policy
selectEvictionDay=Select eviction day
selectEvictionHour=Select eviction hour
selectEvictionMinute=Select eviction minute
selectEditMode=Select edit mode
emptySelection=Empty selection
readOnlySelection=Read only selection
writtableSelection=Writable selection
unsyncedSelection=Unsynced selection
selectMapperType=Select mapper type
editBtn=Edit button
acceptBtn=Accept editing button
cancelBtn=Cancel editing button
chooseBindingType=Choose binding type
selectFlowType=Select flow type
selectClientAssertionSigningAlg=Select client assertion signing algorithm

1
js/apps/admin-ui/src/authentication/BindFlowDialog.tsx
View file

@ -84,6 +84,7 @@ export const BindFlowDialog = ({ flowAlias, onClose }: BindFlowDialogProps) => {
controller={{ defaultValue: flowKeys[0] }}
variant={SelectVariant.single}
menuAppendTo="parent"
aria-label={t("chooseBindingType")}
/>
</FormProvider>
</Form>

1
js/apps/admin-ui/src/authentication/form/CreateFlow.tsx
View file

@ -68,6 +68,7 @@ export default function CreateFlow() {
name="providerId"
label={t("flowType")}
labelIcon={t("topLevelFlowTypeHelp")}
aria-label={t("selectFlowType")}
controller={{ defaultValue: "" }}
options={TYPES.map((type) => ({
key: type,

20
js/apps/admin-ui/src/clients/advanced/FineGrainOpenIdConnect.tsx
View file

@ -187,6 +187,7 @@ export const FineGrainOpenIdConnect = ({
setAccessTokenOpen(false);
}}
selections={field.value}
aria-label={t("selectAccessTokenSignatureAlgorithm")}
>
{keyOptions}
</Select>
@ -220,6 +221,7 @@ export const FineGrainOpenIdConnect = ({
setIdTokenOpen(false);
}}
selections={field.value}
aria-label={t("selectIdTokenSignatureAlgorithm")}
>
{keyOptions}
</Select>
@ -253,6 +255,7 @@ export const FineGrainOpenIdConnect = ({
setIdTokenKeyManagementOpen(false);
}}
selections={field.value}
aria-label={t("selectIdTokenEncryptionKeyManagementAlgorithm")}
>
{cekManagementOptions}
</Select>
@ -286,6 +289,9 @@ export const FineGrainOpenIdConnect = ({
setIdTokenContentOpen(false);
}}
selections={field.value}
aria-label={t(
"selectIdTokenEncryptionContentEncryptionAlgorithm",
)}
>
{contentOptions}
</Select>
@ -319,6 +325,7 @@ export const FineGrainOpenIdConnect = ({
setUserInfoSignedResponseOpen(false);
}}
selections={field.value}
aria-label={t("selectUserInfoSignedResponseAlgorithm")}
>
{signatureOptions}
</Select>
@ -352,6 +359,9 @@ export const FineGrainOpenIdConnect = ({
setUserInfoResponseEncryptionKeyManagementOpen(false);
}}
selections={field.value}
aria-label={t(
"selectUserInfoResponseEncryptionKeyManagementAlgorithm",
)}
>
{cekManagementOptions}
</Select>
@ -387,6 +397,9 @@ export const FineGrainOpenIdConnect = ({
setUserInfoResponseEncryptionContentEncryptionOpen(false);
}}
selections={field.value}
aria-label={t(
"selectUserInfoResponseEncryptionContentEncryptionAlgorithm",
)}
>
{contentOptions}
</Select>
@ -420,6 +433,7 @@ export const FineGrainOpenIdConnect = ({
setRequestObjectSignatureOpen(false);
}}
selections={field.value}
aria-label={t("selectRequestObjectSignatureAlgorithm")}
>
{requestObjectOptions}
</Select>
@ -453,6 +467,7 @@ export const FineGrainOpenIdConnect = ({
setRequestObjectEncryptionOpen(false);
}}
selections={field.value}
aria-label={t("selectRequestObjectEncryption")}
>
{requestObjectEncryptionOptions}
</Select>
@ -486,6 +501,7 @@ export const FineGrainOpenIdConnect = ({
setRequestObjectEncodingOpen(false);
}}
selections={field.value}
aria-label={t("selectRequestObjectEncoding")}
>
{requestObjectEncodingOptions}
</Select>
@ -519,6 +535,7 @@ export const FineGrainOpenIdConnect = ({
setRequestObjectRequiredOpen(false);
}}
selections={field.value}
aria-label={t("selectRequestObjectRequired")}
>
{requestObjectRequiredOptions}
</Select>
@ -569,6 +586,7 @@ export const FineGrainOpenIdConnect = ({
setAuthorizationSignedOpen(false);
}}
selections={field.value}
aria-label={t("selectAuthorizationSignedResponseAlg")}
>
{authorizationSignedResponseOptions}
</Select>
@ -602,6 +620,7 @@ export const FineGrainOpenIdConnect = ({
setAuthorizationEncryptedOpen(false);
}}
selections={field.value}
aria-label={t("selectAuthorizationEncryptedResponseAlg")}
>
{cekManagementOptions}
</Select>
@ -635,6 +654,7 @@ export const FineGrainOpenIdConnect = ({
setAuthorizationEncryptedResponseOpen(false);
}}
selections={field.value}
aria-label={t("selectAuthorizationEncryptedResponseEnc")}
>
{contentOptions}
</Select>

3
js/apps/admin-ui/src/clients/authorization/AuthorizationEvaluate.tsx
View file

@ -381,8 +381,9 @@ const AuthorizationEvaluateContent = ({ client }: Props) => {
}}
selections={field.value}
variant={SelectVariant.typeaheadMulti}
typeAheadAriaLabel={t("authScopes")}
typeAheadAriaLabel={t("selectAuthScopes")}
isOpen={scopesDropdownOpen}
aria-label={t("selectAuthScopes")}
>
{scopes.map((scope) => (
<SelectOption

2
js/apps/admin-ui/src/clients/authorization/NewPolicyDialog.tsx
View file

@ -42,7 +42,7 @@ export const NewPolicyDialog = ({
return (
<Modal
aria-labelledby={t("addPredefinedMappers")}
aria-label={t("createPolicy")}
variant={ModalVariant.medium}
header={
<TextContent>

2
js/apps/admin-ui/src/clients/authorization/ResourcesPolicySelect.tsx
View file

@ -261,7 +261,7 @@ export const ResourcesPolicySelect = ({
setSearch("");
}}
isOpen={open}
aria-labelledby={t(name)}
aria-label={t(name)}
isDisabled={!!preSelected}
validated={errors[name] ? "error" : "default"}
typeAheadAriaLabel={t(name)}

1
js/apps/admin-ui/src/clients/authorization/policy/Client.tsx
View file

@ -88,6 +88,7 @@ export const Client = () => {
onToggle={(open) => setOpen(open)}
isOpen={open}
selections={field.value}
aria-label={t("selectClients")}
onFilter={(_, value) => {
setSearch(value);
return convert(clients);

1
js/apps/admin-ui/src/identity-providers/add/OIDCAuthentication.tsx
View file

@ -107,6 +107,7 @@ export const OIDCAuthentication = ({ create = true }: { create?: boolean }) => {
}}
selections={field.value || t("algorithmNotSpecified")}
variant={SelectVariant.single}
aria-label={t("selectClientAssertionSigningAlg")}
isOpen={openClientAuthSigAlg}
>
{[

1
js/apps/admin-ui/src/realm-settings/EmailTab.tsx
View file

@ -321,6 +321,7 @@ export const RealmSettingsEmailTab = ({
{currentUser.email ? (
<Alert
variant="info"
component="h2"
isInline
title={t("testConnectionHint.withEmail", {
email: currentUser.email,

1
js/apps/admin-ui/src/realm-settings/GeneralTab.tsx
View file

@ -269,6 +269,7 @@ export const RealmSettingsGeneralTab = ({
selections={userProfileConfig?.unmanagedAttributePolicy}
variant={SelectVariant.single}
isOpen={isUnmanagedAttributeOpen}
aria-label={t("selectUnmanagedAttributePolicy")}
>
{unmanagedAttributePolicies.map((policy) => (
<SelectOption key={policy} value={policy}>

1
js/apps/admin-ui/src/realm-settings/PartialExport.tsx
View file

@ -135,6 +135,7 @@ export const PartialExportDialog = ({
<Alert
data-testid="warning-message"
variant="warning"
component="p"
title={t("exportWarningTitle")}
isInline
>

9
js/apps/admin-ui/src/realm-settings/PartialImport.tsx
View file

@ -338,6 +338,8 @@ export const PartialImportDialog = (props: PartialImportProps) => {
<Select
toggleId="realm-selector"
isOpen={isRealmSelectOpen}
typeAheadAriaLabel={t("realmSelector")}
aria-label={"realmSelector"}
onToggle={() => setIsRealmSelectOpen(!isRealmSelectOpen)}
onSelect={(_, value) => handleRealmSelect(value)}
placeholderText={targetRealm.realm || targetRealm.id}
@ -466,7 +468,12 @@ export const PartialImportDialog = (props: PartialImportProps) => {
</Button>,
]}
>
<Alert variant="success" isInline title={importCompleteMessage()} />
<Alert
variant="success"
component="p"
isInline
title={importCompleteMessage()}
/>
<KeycloakDataTable
loader={loader}
isPaginated

5
js/apps/admin-ui/src/realm-settings/ThemesTab.tsx
View file

@ -76,6 +76,7 @@ export const RealmSettingsThemesTab = ({
isOpen={loginThemeOpen}
placeholderText={t("selectATheme")}
data-testid="select-login-theme"
aria-label={t("selectLoginTheme")}
>
{themeTypes.login.map((theme, idx) => (
<SelectOption
@ -114,7 +115,7 @@ export const RealmSettingsThemesTab = ({
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("accountTheme")}
aria-label={t("selectAccountTheme")}
isOpen={accountThemeOpen}
placeholderText={t("selectATheme")}
data-testid="select-account-theme"
@ -161,6 +162,7 @@ export const RealmSettingsThemesTab = ({
isOpen={adminUIThemeOpen}
placeholderText={t("selectATheme")}
data-testid="select-admin-theme"
aria-label="selectAdminTheme"
>
{themeTypes.admin
.filter((theme) => theme.name !== "base")
@ -204,6 +206,7 @@ export const RealmSettingsThemesTab = ({
isOpen={emailThemeOpen}
placeholderText={t("selectATheme")}
data-testid="select-email-theme"
aria-label={t("selectEmailTheme")}
>
{themeTypes.email.map((theme, idx) => (
<SelectOption

2
js/apps/admin-ui/src/realm-settings/event-config/EventListenersForm.tsx
View file

@ -75,7 +75,7 @@ export const EventListenersForm = ({
field.onChange([]);
}}
isOpen={selectEventListenerOpen}
aria-labelledby={"eventsListeners"}
aria-label={"selectEventsListeners"}
>
{Object.keys(eventListeners!).map((event) => (
<SelectOption key={event} value={event} />

1
js/apps/admin-ui/src/realm-settings/keys/KeysListTab.tsx
View file

@ -67,6 +67,7 @@ const SelectFilter = ({ onFilter }: SelectFilterProps) => {
toggleFilter();
}}
selections={filterType}
aria-label={t("selectFilterType")}
>
{FILTER_OPTIONS.map((option) => (
<SelectOption

14
js/apps/admin-ui/src/realm-settings/localization/RealmOverrides.tsx
View file

@ -491,10 +491,10 @@ export const RealmOverrides = ({
{editStates[rowIndex] ? (
<>
<KeycloakTextInput
aria-label={t("editUserLabel")}
aria-label={t("editTranslationValue")}
type="text"
className="pf-u-w-initial"
data-testid={`editUserLabelInput-${rowIndex}`}
data-testid={`editTranslationValueInput-${rowIndex}`}
value={formValue}
onChange={(
event: ChangeEvent<HTMLInputElement>,
@ -506,15 +506,17 @@ export const RealmOverrides = ({
<Button
variant="link"
className="pf-m-plain"
data-testid={`editUserLabelAcceptBtn-${rowIndex}`}
data-testid={`editTranslationAcceptBtn-${rowIndex}`}
type="submit"
aria-label={t("acceptBtn")}
icon={<CheckIcon />}
/>
<Button
variant="link"
className="pf-m-plain"
data-testid={`editUserLabelCancelBtn-${rowIndex}`}
data-testid={`editTranslationCancelBtn-${rowIndex}`}
icon={<TimesIcon />}
aria-label={t("cancelBtn")}
onClick={() => {
setEditStates((prevEditStates) => ({
...prevEditStates,
@ -540,10 +542,10 @@ export const RealmOverrides = ({
}));
}}
key={`edit-button-${rowIndex}`}
aria-label={t("editUserLabel")}
aria-label={t("editBtn")}
variant="link"
className="pf-m-plain"
data-testid={`editUserLabelBtn-${rowIndex}`}
data-testid={`editTranslationBtn-${rowIndex}`}
>
<PencilAltIcon />
</Button>

22
js/apps/admin-ui/src/user-federation/ldap/LdapSettingsSearching.tsx
View file

@ -83,16 +83,30 @@ export const LdapSettingsSearching = ({
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("selectEditMode")}
validated={
(form.formState.errors.config as any)?.editMode?.[0]
? "error"
: "default"
}
>
<SelectOption value="" isPlaceholder />
<SelectOption value="READ_ONLY" />
<SelectOption value="WRITABLE" />
<SelectOption value="UNSYNCED" />
<SelectOption
aria-label={t("emptySelection")}
value=""
isPlaceholder
/>
<SelectOption
aria-label={t("readOnlySelection")}
value="READ_ONLY"
/>
<SelectOption
aria-label={t("writtableSelection")}
value="WRITABLE"
/>
<SelectOption
aria-label={t("unsyncedSelection")}
value="UNSYNCED"
/>
</Select>
)}
/>

1
js/apps/admin-ui/src/user-federation/ldap/mappers/LdapMapperDetails.tsx
View file

@ -307,6 +307,7 @@ export default function LdapMapperDetails() {
}}
selections={field.value}
variant={SelectVariant.typeahead}
aria-label={t("selectMapperType")}
>
{components.map((c) => (
<SelectOption key={c.id} value={c.id} />

4
js/apps/admin-ui/src/user-federation/shared/SettingsCache.tsx
View file

@ -102,6 +102,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
selections={field.value}
variant={SelectVariant.single}
data-testid="kerberos-cache-policy"
aria-label={t("selectCachePolicy")}
>
<SelectOption key={0} value={["DEFAULT"]} isPlaceholder />
<SelectOption key={1} value={["EVICT_DAILY"]} />
@ -141,6 +142,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("selectEvictionDay")}
>
<SelectOption key={0} value="1" isPlaceholder>
{t("Sunday")}
@ -197,6 +199,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("selectEvictionHour")}
>
{hourOptions}
</Select>
@ -229,6 +232,7 @@ const CacheFields = ({ form }: { form: UseFormReturn }) => {
}}
selections={field.value}
variant={SelectVariant.single}
aria-label={t("selectEvictionMinute")}
>
{minuteOptions}
</Select>

2
js/apps/admin-ui/src/user/user-credentials/InlineLabelEdit.tsx
View file

@ -68,6 +68,7 @@ export const InlineLabelEdit = ({
data-testid="editUserLabelAcceptBtn"
variant="link"
className="kc-editUserLabelAcceptBtn"
aria-label={t("acceptBtn")}
type="submit"
icon={<CheckIcon />}
/>
@ -75,6 +76,7 @@ export const InlineLabelEdit = ({
data-testid="editUserLabelCancelBtn"
variant="link"
className="kc-editUserLabel-cancelBtn"
aria-label={t("cancelBtn")}
onClick={toggle}
icon={<TimesIcon />}
/>