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