added accessibility fixes

This commit is contained in:
Agnieszka Gancarczyk 2021-07-09 17:15:21 +01:00
parent 3c16cbe5e6
commit 032fa57383
7 changed files with 38 additions and 20 deletions

View file

@ -78,12 +78,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
<HelpItem
helpText="clients-help:validRedirectURIs"
forLabel={t("validRedirectUri")}
forID="kc-redirect"
forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
/>
}
>
<MultiLineInput
name="redirectUris"
aria-label={t("validRedirectUri")}
addButtonLabel="clients:addRedirectUri"
/>
</FormGroup>
@ -94,7 +95,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
<HelpItem
helpText="clients-help:homeURL"
forLabel={t("homeURL")}
forID="kc-home-url"
forID={t(`common:helpLabel`, { label: t("homeURL") })}
/>
}
>
@ -112,12 +113,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
<HelpItem
helpText="clients-help:webOrigins"
forLabel={t("webOrigins")}
forID="kc-web-origins"
forID={t(`common:helpLabel`, { label: t("webOrigins") })}
/>
}
>
<MultiLineInput
name="webOrigins"
aria-label={t("webOrigins")}
addButtonLabel="clients:addWebOrigins"
/>
</FormGroup>
@ -197,7 +199,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
control={control}
render={({ onChange, value }) => (
<Switch
id="kc-consent"
id="kc-consent-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value}
@ -217,7 +219,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
control={control}
render={({ onChange, value }) => (
<Switch
id="kc-display-on-client"
id="kc-display-on-client-switch"
label={t("common:on")}
labelOff={t("common:off")}
isChecked={value === "true"}

View file

@ -49,7 +49,7 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:authentication"
forLabel={t("authentication")}
forID="kc-authentication"
forID={t(`common:helpLabel`, { label: t("authentication") })}
/>
}
>
@ -60,7 +60,7 @@ export const CapabilityConfig = ({
render={({ onChange, value }) => (
<Switch
data-testid="authentication"
id="kc-authentication"
id="kc-authentication-switch"
name="publicClient"
label={t("common:on")}
labelOff={t("common:off")}
@ -84,7 +84,7 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:authorization"
forLabel={t("authorization")}
forID="kc-authorization"
forID={t(`common:helpLabel`, { label: t("authorization") })}
/>
}
>
@ -95,7 +95,7 @@ export const CapabilityConfig = ({
render={({ onChange, value }) => (
<Switch
data-testid="authorization"
id="kc-authorization"
id="kc-authorization-switch"
name="authorizationServicesEnabled"
label={t("common:on")}
labelOff={t("common:off")}
@ -135,7 +135,9 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:standardFlow"
forLabel={t("standardFlow")}
forID="kc-flow-standard"
forID={t(`common:helpLabel`, {
label: t("standardFlow"),
})}
/>
</InputGroup>
)}
@ -159,7 +161,9 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:directAccess"
forLabel={t("directAccess")}
forID="kc-flow-direct"
forID={t(`common:helpLabel`, {
label: t("directAccess"),
})}
/>
</InputGroup>
)}
@ -183,7 +187,9 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:implicitFlow"
forLabel={t("implicitFlow")}
forID="kc-flow-implicit"
forID={t(`common:helpLabel`, {
label: t("implicitFlow"),
})}
/>
</InputGroup>
)}
@ -213,7 +219,9 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:serviceAccount"
forLabel={t("serviceAccount")}
forID="kc-flow-service-account"
forID={t(`common:helpLabel`, {
label: t("serviceAccount"),
})}
/>
</InputGroup>
)}
@ -232,7 +240,9 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:encryptAssertions"
forLabel={t("encryptAssertions")}
forID="kc-encrypt"
forID={t(`common:helpLabel`, {
label: t("encryptAssertions"),
})}
/>
}
label={t("encryptAssertions")}
@ -260,7 +270,7 @@ export const CapabilityConfig = ({
<HelpItem
helpText="clients-help:clientSignature"
forLabel={t("clientSignature")}
forID="kc-client-signature"
forID={t(`common:helpLabel`, { label: t("clientSignature") })}
/>
}
label={t("clientSignature")}

View file

@ -30,7 +30,7 @@ export const GeneralSettings = () => {
<HelpItem
helpText="clients-help:clientType"
forLabel={t("clientType")}
forID="kc-type"
forID={t(`common:helpLabel`, { label: t("clientType") })}
/>
}
>

View file

@ -47,7 +47,7 @@ export const ListEmptyState = ({
) : (
hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
)}
<Title headingLevel="h4" size="lg">
<Title headingLevel="h1" size="lg">
{message}
</Title>
<EmptyStateBody>{instructions}</EmptyStateBody>

View file

@ -64,6 +64,7 @@ export const MultiLineInput = ({
variant={ButtonVariant.link}
onClick={() => remove(index)}
tabIndex={-1}
aria-label={t("common:remove")}
isDisabled={index === fields.length - 1}
>
<MinusCircleIcon />
@ -74,6 +75,7 @@ export const MultiLineInput = ({
variant={ButtonVariant.link}
onClick={() => append({})}
tabIndex={-1}
aria-label={t("common:add")}
isDisabled={
rest.isDisabled ||
!(currentValues && currentValues[index]?.value)

View file

@ -14,7 +14,7 @@ export const ScrollPanel = (props: ScrollPanelProps) => {
return (
<section {...rest} className="kc-form-panel__panel">
<Title
headingLevel="h4"
headingLevel="h1"
size="xl"
className="kc-form-panel__title"
id={scrollId}

View file

@ -114,7 +114,9 @@ const Dashboard = () => {
<DescriptionListTerm>
{t("enabledFeatures")}{" "}
<HelpItem
forID="enabledFeatures"
forID={t(`common:helpLabel`, {
label: t("enabledFeatures"),
})}
forLabel={t("enabledFeatures")}
helpText="dashboard:infoEnabledFeatures"
/>
@ -143,7 +145,9 @@ const Dashboard = () => {
<DescriptionListTerm>
{t("disabledFeatures")}{" "}
<HelpItem
forID="disabledFeatures"
forID={t(`common:helpLabel`, {
label: t("disabledFeatures"),
})}
forLabel={t("disabledFeatures")}
helpText="dashboard:infoDisabledFeatures"
/>