agagancarczyk · Aug 28, 2023 · Aug 23, 2023 · Aug 23, 2023 · Aug 23, 2023 · Aug 28, 2023
@@ -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
+                     =>
+                      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
-                       =>
-                        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"
-                               () => {
-                                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"
-                               => {
-                                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"
+                             () => {
+                              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"
+                             => {
+                              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 = () => {
                  => 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>