Fixed remaining a11y violations for account console (#22673)
* fixed critical a11y violation on Application page * fixed moderate a11y violation on Application page * fixed serious a11y violation on Signin page * fixed aria-label * updated label * Add Dutch translation --------- Co-authored-by: Agnieszka Gancarczyk <agancarc@redhat.com> Co-authored-by: Jon Koops <jonkoops@gmail.com>
This commit is contained in:
agagancarczyk
GitHub
parent
c78359bc07
commit
bf0d16c4ff
4 changed files with 111 additions and 111 deletions
|
|
@ -6,7 +6,7 @@
|
|||
"accountUpdatedMessage": "Your account has been updated.",
|
||||
"add": "Add",
|
||||
"application": "Application",
|
||||
"applicationDetails": "Application details",
|
||||
"applicationDetails": "Application details for {{clientId}}",
|
||||
"applications": "Applications",
|
||||
"applicationsIntroMessage": "View applications your account has access to",
|
||||
"applicationType": "Application type",
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
"accountUpdatedMessage": "Uw account is bijgewerkt.",
|
||||
"add": "Toevoegen",
|
||||
"application": "Applicatie",
|
||||
"applicationDetails": "Applicatiegegevens",
|
||||
"applicationDetails": "Applicatiegegevens voor {{clientId}}",
|
||||
"applications": "Applicaties",
|
||||
"applicationsIntroMessage": "Bekijk applicaties waartoe uw account toegang heeft",
|
||||
"applicationType": "Applicatietype",
|
||||
|
|
|
|||
|
|
@ -112,116 +112,112 @@ const SigningIn = () => {
|
|||
|
||||
return (
|
||||
<Page title={t("signingIn")} description={t("signingInDescription")}>
|
||||
<DataList aria-label="user credential" className="pf-u-mb-xl">
|
||||
{credentials.map((container) => (
|
||||
<PageSection
|
||||
key={container.category}
|
||||
variant="light"
|
||||
className="pf-u-px-0"
|
||||
>
|
||||
<Title headingLevel="h2" size="xl">
|
||||
{t(container.category as TFuncKey)}
|
||||
</Title>
|
||||
<Split className="pf-u-mt-lg pf-u-mb-lg">
|
||||
<SplitItem>
|
||||
<Title headingLevel="h3" size="md" className="pf-u-mb-md">
|
||||
<span className="cred-title pf-u-display-block">
|
||||
{t(container.displayName as TFuncKey)}
|
||||
</span>
|
||||
</Title>
|
||||
{t(container.helptext as TFuncKey)}
|
||||
{credentials.map((container) => (
|
||||
<PageSection
|
||||
key={container.category}
|
||||
variant="light"
|
||||
className="pf-u-px-0"
|
||||
>
|
||||
<Title headingLevel="h2" size="xl">
|
||||
{t(container.category as TFuncKey)}
|
||||
</Title>
|
||||
<Split className="pf-u-mt-lg pf-u-mb-lg">
|
||||
<SplitItem>
|
||||
<Title headingLevel="h3" size="md" className="pf-u-mb-md">
|
||||
<span className="cred-title pf-u-display-block">
|
||||
{t(container.displayName as TFuncKey)}
|
||||
</span>
|
||||
</Title>
|
||||
{t(container.helptext as TFuncKey)}
|
||||
</SplitItem>
|
||||
{container.createAction && (
|
||||
<SplitItem isFilled>
|
||||
<div className="pf-u-float-right">
|
||||
<MobileLink
|
||||
onClick={() =>
|
||||
login({
|
||||
action: container.createAction,
|
||||
})
|
||||
}
|
||||
title={t("setUpNew", [
|
||||
t(container.displayName as TFuncKey),
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
</SplitItem>
|
||||
{container.createAction && (
|
||||
<SplitItem isFilled>
|
||||
<div className="pf-u-float-right">
|
||||
<MobileLink
|
||||
onClick={() =>
|
||||
login({
|
||||
action: container.createAction,
|
||||
})
|
||||
}
|
||||
title={t("setUpNew", [
|
||||
t(container.displayName as TFuncKey),
|
||||
])}
|
||||
/>
|
||||
</div>
|
||||
</SplitItem>
|
||||
)}
|
||||
</Split>
|
||||
)}
|
||||
</Split>
|
||||
|
||||
<DataList aria-label="credential list" className="pf-u-mb-xl">
|
||||
{container.userCredentialMetadatas.length === 0 && (
|
||||
<EmptyRow
|
||||
message={t("notSetUp", [
|
||||
t(container.displayName as TFuncKey),
|
||||
])}
|
||||
/>
|
||||
)}
|
||||
<DataList aria-label="credential list" className="pf-u-mb-xl">
|
||||
{container.userCredentialMetadatas.length === 0 && (
|
||||
<EmptyRow
|
||||
message={t("notSetUp", [t(container.displayName as TFuncKey)])}
|
||||
/>
|
||||
)}
|
||||
|
||||
{container.userCredentialMetadatas.map((meta) => (
|
||||
<DataListItem key={meta.credential.id}>
|
||||
<DataListItemRow>
|
||||
<DataListItemCells
|
||||
className="pf-u-py-0"
|
||||
dataListCells={[
|
||||
...credentialRowCells(meta),
|
||||
<DataListAction
|
||||
key="action"
|
||||
id={`action-${meta.credential.id}`}
|
||||
aria-label={t("updateCredAriaLabel")}
|
||||
aria-labelledby={`cred-${meta.credential.id}`}
|
||||
>
|
||||
{container.removeable ? (
|
||||
<ContinueCancelModal
|
||||
buttonTitle={t("delete")}
|
||||
modalTitle={t("removeCred", [
|
||||
label(meta.credential),
|
||||
])}
|
||||
continueLabel={t("confirm")}
|
||||
cancelLabel={t("cancel")}
|
||||
buttonVariant="danger"
|
||||
onContinue={async () => {
|
||||
try {
|
||||
await deleteCredentials(meta.credential);
|
||||
addAlert(
|
||||
t("successRemovedMessage", {
|
||||
userLabel: label(meta.credential),
|
||||
}),
|
||||
);
|
||||
refresh();
|
||||
} catch (error) {
|
||||
addError(
|
||||
t("errorRemovedMessage", {
|
||||
userLabel: label(meta.credential),
|
||||
error,
|
||||
}).toString(),
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("stopUsingCred", [label(meta.credential)])}
|
||||
</ContinueCancelModal>
|
||||
) : (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
if (container.updateAction)
|
||||
login({ action: container.updateAction });
|
||||
}}
|
||||
>
|
||||
{t("update")}
|
||||
</Button>
|
||||
)}
|
||||
</DataListAction>,
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
))}
|
||||
</DataList>
|
||||
</PageSection>
|
||||
))}
|
||||
</DataList>
|
||||
{container.userCredentialMetadatas.map((meta) => (
|
||||
<DataListItem key={meta.credential.id}>
|
||||
<DataListItemRow>
|
||||
<DataListItemCells
|
||||
className="pf-u-py-0"
|
||||
dataListCells={[
|
||||
...credentialRowCells(meta),
|
||||
<DataListAction
|
||||
key="action"
|
||||
id={`action-${meta.credential.id}`}
|
||||
aria-label={t("updateCredAriaLabel")}
|
||||
aria-labelledby={`cred-${meta.credential.id}`}
|
||||
>
|
||||
{container.removeable ? (
|
||||
<ContinueCancelModal
|
||||
buttonTitle={t("delete")}
|
||||
modalTitle={t("removeCred", [
|
||||
label(meta.credential),
|
||||
])}
|
||||
continueLabel={t("confirm")}
|
||||
cancelLabel={t("cancel")}
|
||||
buttonVariant="danger"
|
||||
onContinue={async () => {
|
||||
try {
|
||||
await deleteCredentials(meta.credential);
|
||||
addAlert(
|
||||
t("successRemovedMessage", {
|
||||
userLabel: label(meta.credential),
|
||||
}),
|
||||
);
|
||||
refresh();
|
||||
} catch (error) {
|
||||
addError(
|
||||
t("errorRemovedMessage", {
|
||||
userLabel: label(meta.credential),
|
||||
error,
|
||||
}).toString(),
|
||||
);
|
||||
}
|
||||
}}
|
||||
>
|
||||
{t("stopUsingCred", [label(meta.credential)])}
|
||||
</ContinueCancelModal>
|
||||
) : (
|
||||
<Button
|
||||
variant="secondary"
|
||||
onClick={() => {
|
||||
if (container.updateAction)
|
||||
login({ action: container.updateAction });
|
||||
}}
|
||||
>
|
||||
{t("update")}
|
||||
</Button>
|
||||
)}
|
||||
</DataListAction>,
|
||||
]}
|
||||
/>
|
||||
</DataListItemRow>
|
||||
</DataListItem>
|
||||
))}
|
||||
</DataList>
|
||||
</PageSection>
|
||||
))}
|
||||
</Page>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -81,7 +81,7 @@ const Applications = () => {
|
|||
<span style={{ visibility: "hidden", height: 55 }}>
|
||||
<DataListToggle
|
||||
id="applications-list-header-invisible-toggle"
|
||||
aria-controls="hidden"
|
||||
aria-controls="applications-list-content"
|
||||
/>
|
||||
</span>
|
||||
<DataListItemCells
|
||||
|
|
@ -122,6 +122,7 @@ const Applications = () => {
|
|||
onClick={() => toggleOpen(application.clientId)}
|
||||
isExpanded={application.open}
|
||||
id={`toggle-${application.clientId}`}
|
||||
aria-controls={`content-${application.clientId}`}
|
||||
/>
|
||||
<DataListItemCells
|
||||
className="pf-u-align-items-center"
|
||||
|
|
@ -154,8 +155,11 @@ const Applications = () => {
|
|||
</DataListItemRow>
|
||||
|
||||
<DataListContent
|
||||
id={`content-${application.clientId}`}
|
||||
className="pf-u-pl-4xl"
|
||||
aria-label={t("applicationDetails")}
|
||||
aria-label={t("applicationDetails", {
|
||||
clientId: application.clientId,
|
||||
})}
|
||||
isHidden={!application.open}
|
||||
>
|
||||
<DescriptionList>
|
||||
|
|
|
|||
Loading…
Reference in a new issue