Merge pull request #817 from agagancarczyk/accessibility-fixes
added accessibility fixes
This commit is contained in:
commit
d1d2eea739
7 changed files with 38 additions and 20 deletions
|
@ -78,12 +78,13 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:validRedirectURIs"
|
helpText="clients-help:validRedirectURIs"
|
||||||
forLabel={t("validRedirectUri")}
|
forLabel={t("validRedirectUri")}
|
||||||
forID="kc-redirect"
|
forID={t(`common:helpLabel`, { label: t("validRedirectUri") })}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<MultiLineInput
|
<MultiLineInput
|
||||||
name="redirectUris"
|
name="redirectUris"
|
||||||
|
aria-label={t("validRedirectUri")}
|
||||||
addButtonLabel="clients:addRedirectUri"
|
addButtonLabel="clients:addRedirectUri"
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
@ -94,7 +95,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:homeURL"
|
helpText="clients-help:homeURL"
|
||||||
forLabel={t("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
|
<HelpItem
|
||||||
helpText="clients-help:webOrigins"
|
helpText="clients-help:webOrigins"
|
||||||
forLabel={t("webOrigins")}
|
forLabel={t("webOrigins")}
|
||||||
forID="kc-web-origins"
|
forID={t(`common:helpLabel`, { label: t("webOrigins") })}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
<MultiLineInput
|
<MultiLineInput
|
||||||
name="webOrigins"
|
name="webOrigins"
|
||||||
|
aria-label={t("webOrigins")}
|
||||||
addButtonLabel="clients:addWebOrigins"
|
addButtonLabel="clients:addWebOrigins"
|
||||||
/>
|
/>
|
||||||
</FormGroup>
|
</FormGroup>
|
||||||
|
@ -197,7 +199,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
|
||||||
control={control}
|
control={control}
|
||||||
render={({ onChange, value }) => (
|
render={({ onChange, value }) => (
|
||||||
<Switch
|
<Switch
|
||||||
id="kc-consent"
|
id="kc-consent-switch"
|
||||||
label={t("common:on")}
|
label={t("common:on")}
|
||||||
labelOff={t("common:off")}
|
labelOff={t("common:off")}
|
||||||
isChecked={value}
|
isChecked={value}
|
||||||
|
@ -217,7 +219,7 @@ export const ClientSettings = ({ save, reset }: ClientSettingsProps) => {
|
||||||
control={control}
|
control={control}
|
||||||
render={({ onChange, value }) => (
|
render={({ onChange, value }) => (
|
||||||
<Switch
|
<Switch
|
||||||
id="kc-display-on-client"
|
id="kc-display-on-client-switch"
|
||||||
label={t("common:on")}
|
label={t("common:on")}
|
||||||
labelOff={t("common:off")}
|
labelOff={t("common:off")}
|
||||||
isChecked={value === "true"}
|
isChecked={value === "true"}
|
||||||
|
|
|
@ -49,7 +49,7 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:authentication"
|
helpText="clients-help:authentication"
|
||||||
forLabel={t("authentication")}
|
forLabel={t("authentication")}
|
||||||
forID="kc-authentication"
|
forID={t(`common:helpLabel`, { label: t("authentication") })}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
@ -60,7 +60,7 @@ export const CapabilityConfig = ({
|
||||||
render={({ onChange, value }) => (
|
render={({ onChange, value }) => (
|
||||||
<Switch
|
<Switch
|
||||||
data-testid="authentication"
|
data-testid="authentication"
|
||||||
id="kc-authentication"
|
id="kc-authentication-switch"
|
||||||
name="publicClient"
|
name="publicClient"
|
||||||
label={t("common:on")}
|
label={t("common:on")}
|
||||||
labelOff={t("common:off")}
|
labelOff={t("common:off")}
|
||||||
|
@ -84,7 +84,7 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:authorization"
|
helpText="clients-help:authorization"
|
||||||
forLabel={t("authorization")}
|
forLabel={t("authorization")}
|
||||||
forID="kc-authorization"
|
forID={t(`common:helpLabel`, { label: t("authorization") })}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
@ -95,7 +95,7 @@ export const CapabilityConfig = ({
|
||||||
render={({ onChange, value }) => (
|
render={({ onChange, value }) => (
|
||||||
<Switch
|
<Switch
|
||||||
data-testid="authorization"
|
data-testid="authorization"
|
||||||
id="kc-authorization"
|
id="kc-authorization-switch"
|
||||||
name="authorizationServicesEnabled"
|
name="authorizationServicesEnabled"
|
||||||
label={t("common:on")}
|
label={t("common:on")}
|
||||||
labelOff={t("common:off")}
|
labelOff={t("common:off")}
|
||||||
|
@ -135,7 +135,9 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:standardFlow"
|
helpText="clients-help:standardFlow"
|
||||||
forLabel={t("standardFlow")}
|
forLabel={t("standardFlow")}
|
||||||
forID="kc-flow-standard"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("standardFlow"),
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
)}
|
)}
|
||||||
|
@ -159,7 +161,9 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:directAccess"
|
helpText="clients-help:directAccess"
|
||||||
forLabel={t("directAccess")}
|
forLabel={t("directAccess")}
|
||||||
forID="kc-flow-direct"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("directAccess"),
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
)}
|
)}
|
||||||
|
@ -183,7 +187,9 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:implicitFlow"
|
helpText="clients-help:implicitFlow"
|
||||||
forLabel={t("implicitFlow")}
|
forLabel={t("implicitFlow")}
|
||||||
forID="kc-flow-implicit"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("implicitFlow"),
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
)}
|
)}
|
||||||
|
@ -213,7 +219,9 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:serviceAccount"
|
helpText="clients-help:serviceAccount"
|
||||||
forLabel={t("serviceAccount")}
|
forLabel={t("serviceAccount")}
|
||||||
forID="kc-flow-service-account"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("serviceAccount"),
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
)}
|
)}
|
||||||
|
@ -232,7 +240,9 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:encryptAssertions"
|
helpText="clients-help:encryptAssertions"
|
||||||
forLabel={t("encryptAssertions")}
|
forLabel={t("encryptAssertions")}
|
||||||
forID="kc-encrypt"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("encryptAssertions"),
|
||||||
|
})}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label={t("encryptAssertions")}
|
label={t("encryptAssertions")}
|
||||||
|
@ -260,7 +270,7 @@ export const CapabilityConfig = ({
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:clientSignature"
|
helpText="clients-help:clientSignature"
|
||||||
forLabel={t("clientSignature")}
|
forLabel={t("clientSignature")}
|
||||||
forID="kc-client-signature"
|
forID={t(`common:helpLabel`, { label: t("clientSignature") })}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
label={t("clientSignature")}
|
label={t("clientSignature")}
|
||||||
|
|
|
@ -30,7 +30,7 @@ export const GeneralSettings = () => {
|
||||||
<HelpItem
|
<HelpItem
|
||||||
helpText="clients-help:clientType"
|
helpText="clients-help:clientType"
|
||||||
forLabel={t("clientType")}
|
forLabel={t("clientType")}
|
||||||
forID="kc-type"
|
forID={t(`common:helpLabel`, { label: t("clientType") })}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
>
|
>
|
||||||
|
|
|
@ -47,7 +47,7 @@ export const ListEmptyState = ({
|
||||||
) : (
|
) : (
|
||||||
hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
|
hasIcon && <EmptyStateIcon icon={icon ? icon : PlusCircleIcon} />
|
||||||
)}
|
)}
|
||||||
<Title headingLevel="h4" size="lg">
|
<Title headingLevel="h1" size="lg">
|
||||||
{message}
|
{message}
|
||||||
</Title>
|
</Title>
|
||||||
<EmptyStateBody>{instructions}</EmptyStateBody>
|
<EmptyStateBody>{instructions}</EmptyStateBody>
|
||||||
|
|
|
@ -64,6 +64,7 @@ export const MultiLineInput = ({
|
||||||
variant={ButtonVariant.link}
|
variant={ButtonVariant.link}
|
||||||
onClick={() => remove(index)}
|
onClick={() => remove(index)}
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
|
aria-label={t("common:remove")}
|
||||||
isDisabled={index === fields.length - 1}
|
isDisabled={index === fields.length - 1}
|
||||||
>
|
>
|
||||||
<MinusCircleIcon />
|
<MinusCircleIcon />
|
||||||
|
@ -74,6 +75,7 @@ export const MultiLineInput = ({
|
||||||
variant={ButtonVariant.link}
|
variant={ButtonVariant.link}
|
||||||
onClick={() => append({})}
|
onClick={() => append({})}
|
||||||
tabIndex={-1}
|
tabIndex={-1}
|
||||||
|
aria-label={t("common:add")}
|
||||||
isDisabled={
|
isDisabled={
|
||||||
rest.isDisabled ||
|
rest.isDisabled ||
|
||||||
!(currentValues && currentValues[index]?.value)
|
!(currentValues && currentValues[index]?.value)
|
||||||
|
|
|
@ -14,7 +14,7 @@ export const ScrollPanel = (props: ScrollPanelProps) => {
|
||||||
return (
|
return (
|
||||||
<section {...rest} className="kc-form-panel__panel">
|
<section {...rest} className="kc-form-panel__panel">
|
||||||
<Title
|
<Title
|
||||||
headingLevel="h4"
|
headingLevel="h1"
|
||||||
size="xl"
|
size="xl"
|
||||||
className="kc-form-panel__title"
|
className="kc-form-panel__title"
|
||||||
id={scrollId}
|
id={scrollId}
|
||||||
|
|
|
@ -114,7 +114,9 @@ const Dashboard = () => {
|
||||||
<DescriptionListTerm>
|
<DescriptionListTerm>
|
||||||
{t("enabledFeatures")}{" "}
|
{t("enabledFeatures")}{" "}
|
||||||
<HelpItem
|
<HelpItem
|
||||||
forID="enabledFeatures"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("enabledFeatures"),
|
||||||
|
})}
|
||||||
forLabel={t("enabledFeatures")}
|
forLabel={t("enabledFeatures")}
|
||||||
helpText="dashboard:infoEnabledFeatures"
|
helpText="dashboard:infoEnabledFeatures"
|
||||||
/>
|
/>
|
||||||
|
@ -143,7 +145,9 @@ const Dashboard = () => {
|
||||||
<DescriptionListTerm>
|
<DescriptionListTerm>
|
||||||
{t("disabledFeatures")}{" "}
|
{t("disabledFeatures")}{" "}
|
||||||
<HelpItem
|
<HelpItem
|
||||||
forID="disabledFeatures"
|
forID={t(`common:helpLabel`, {
|
||||||
|
label: t("disabledFeatures"),
|
||||||
|
})}
|
||||||
forLabel={t("disabledFeatures")}
|
forLabel={t("disabledFeatures")}
|
||||||
helpText="dashboard:infoDisabledFeatures"
|
helpText="dashboard:infoDisabledFeatures"
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue