web: Add ARIA fixes, live region reporting.

GirlBossRush · GirlBossRush · commit 580f20938972 · 2026-01-13T19:49:06.000+01:00
diff --git a/web/src/elements/router/RouterOutlet.ts b/web/src/elements/router/RouterOutlet.ts
@@ -69,6 +69,8 @@ export class RouterOutlet extends AKElement {
 
     //#region Properties
 
+    public override role = "presentation";
+
     @property({ attribute: false })
     current?: RouteMatch;
 
diff --git a/web/src/user/LibraryApplication/index.ts b/web/src/user/LibraryApplication/index.ts
@@ -28,8 +28,6 @@ export interface AKLibraryAppProps extends HTMLAttributes<HTMLDivElement> {
     application?: Application;
     editURL?: string | URL | null;
     background?: string | null;
-    appIndex: number;
-    groupIndex: number;
     targetRef?: RefOrCallback | null;
 }
 
@@ -69,7 +67,10 @@ export const AKLibraryApp: LitFC<AKLibraryAppProps> = ({
     const primaryRef = targetRef ? ref(targetRef) : nothing;
 
     const extendedProps = {
-        "aria-label": msg(str`Open "${application.name}"`),
+        "aria-label": msg(str`Open "${application.name}"`, {
+            id: "library.application.card.aria-label",
+            desc: "Screen reader label for the application card",
+        }),
         "tabindex": "0",
         "class": "card-header-aspect-wrapper",
         "title": ifPresent(application.name),
@@ -80,9 +81,7 @@ export const AKLibraryApp: LitFC<AKLibraryAppProps> = ({
     return html`<div
         part="card-wrapper"
         data-application-name=${ifPresent(dataID)}
-        aria-describedby=${descriptionID}
         style=${styleMap({ background: background || null })}
-        ${spread(props)}
     >
         <div part="card" class="pf-c-card pf-m-hoverable pf-m-compact ${classMap(classes)}">
             <ak-app-icon
@@ -95,6 +94,7 @@ export const AKLibraryApp: LitFC<AKLibraryAppProps> = ({
                 ? html`<div
                       ${primaryRef}
                       role="button"
+                      aria-describedby=${descriptionID}
                       @click=${launchModal}
                       ${spread(extendedProps)}
                   >
@@ -104,6 +104,7 @@ export const AKLibraryApp: LitFC<AKLibraryAppProps> = ({
                       ${primaryRef}
                       href=${ifPresent(application.launchUrl)}
                       target=${ifPresent(application.openInNewTab, "_blank")}
+                      aria-describedby=${descriptionID}
                       ${spread(extendedProps)}
                       >${cardHeader}</a
                   >`}
diff --git a/web/src/user/LibraryPage/ApplicationList.ts b/web/src/user/LibraryPage/ApplicationList.ts
@@ -17,7 +17,7 @@ import { kebabCase } from "change-case";
 import { HTMLAttributes } from "react";
 
 import { msg } from "@lit/localize";
-import { html, nothing } from "lit";
+import { html } from "lit";
 import { RefOrCallback } from "lit/directives/ref.js";
 import { repeat } from "lit/directives/repeat.js";
 
@@ -78,7 +78,7 @@ export const AKLibraryApplicationList: LitFC<AKLibraryApplicationListProps> = ({
                     ${repeat(
                         apps,
                         (application) => application.pk,
-                        (application, appIndex) => {
+                        (application) => {
                             const selected = selectedApp === application;
 
                             const editURL = editable
@@ -87,13 +87,9 @@ export const AKLibraryApplicationList: LitFC<AKLibraryApplicationListProps> = ({
 
                             return AKLibraryApp({
                                 application,
-                                appIndex,
-                                groupIndex,
                                 background,
                                 editURL,
-                                "targetRef": selected ? targetRef : null,
-                                "aria-selected": selected,
-                                "aria-current": selected ? "true" : undefined,
+                                targetRef: selected ? targetRef : null,
                             });
                         },
                     )}
diff --git a/web/src/user/LibraryPage/ak-library-impl.ts b/web/src/user/LibraryPage/ak-library-impl.ts
@@ -26,6 +26,7 @@ import Fuse from "fuse.js";
 import { msg, str } from "@lit/localize";
 import { html, nothing, PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
+import { guard } from "lit/directives/guard.js";
 import { createRef } from "lit/directives/ref.js";
 
 import PFButton from "@patternfly/patternfly/components/Button/button.css";
@@ -324,8 +325,21 @@ export class LibraryPage extends WithSession(AKElement) {
                     placeholder=${msg("Search for an application by name...")}
                     value=${ifPresent(this.query)}
                     list=${ifPresent(LibraryPage.DataListEnabled, "application-search-options")}
+                    aria-describedby="search-action-hint"
                 />
                 ${this.renderDataList()}
+
+                <span id="search-action-hint" class="sr-only">
+                    ${this.selectedApp
+                        ? msg(str`Press Enter to open ${this.selectedApp.name}`, {
+                              id: "user.library.search.enter-to-open-hint",
+                              desc: "Screen reader hint to inform the user they can open the selected application by pressing Enter",
+                          })
+                        : msg("Type to filter applications", {
+                              id: "user.library.search.type-to-filter-hint",
+                              desc: "Screen reader hint to inform the user they can filter the application list by typing",
+                          })}
+                </span>
             </form>
         </search>`;
     }
@@ -367,27 +381,56 @@ export class LibraryPage extends WithSession(AKElement) {
         return this.renderNoAppsFound();
     }
 
-    public override render() {
+    protected renderApplicationStatusOutput() {
         const count = this.visibleApplications.length;
         const { query } = this;
 
-        let message: string;
+        return guard([count, query], () => {
+            let message: string;
+
+            if (query) {
+                // We must present the count within the label to ensure that the screen reader
+                // considers the update significant enough to read on each change,
+                // rather than the on just the first render.
+                message =
+                    count === 1
+                        ? msg(str`${count} application found for "${query}"`, {
+                              id: "user.library.application-count-singular-with-query",
+                          })
+                        : msg(str`${count} applications found for "${query}"`, {
+                              id: "user.library.application-count-plural-with-query",
+                          });
+            } else {
+                message =
+                    count === 1
+                        ? msg(str`${count} application available`, {
+                              id: "user.library.application-count-singular",
+                          })
+                        : msg(str`${count} applications available`, {
+                              id: "user.library.application-count-plural",
+                          });
+            }
 
-        if (query) {
-            // We must present the count within the label to ensure that the screen reader
-            // considers the update significant enough to read on each change,
-            // rather than the on just the first render.
-            message =
-                count === 1
-                    ? msg(str`${count} application found for "${query}"`)
-                    : msg(str`${count} applications found for "${query}"`);
-        } else {
-            message =
-                count === 1
-                    ? msg(str`${count} application available`)
-                    : msg(str`${count} applications available`);
-        }
+            return html`<output
+                class="sr-only"
+                for="application-search-input"
+                form="application-search-form"
+                aria-live="polite"
+            >
+                <p>${message}</p>
+                <p>
+                    ${this.selectedApp
+                        ? msg(str`Press Enter to open ${this.selectedApp.name}`, {
+                              id: "user.library.application-count.enter-to-open-hint",
+                              desc: "Screen reader hint to inform the user they can open the selected application by pressing Enter",
+                          })
+                        : nothing}
+                </p>
+            </output>`;
+        });
+    }
 
+    protected override render() {
         return html`<div class="pf-c-page__main">
             <div class="pf-c-page__header pf-c-content">
                 <h1 class="pf-c-page__title">${msg("My applications")}</h1>
@@ -399,15 +442,7 @@ export class LibraryPage extends WithSession(AKElement) {
                 class="pf-c-page__main-section"
                 aria-label=${msg("Application list")}
             >
-                <output
-                    class="sr-only"
-                    for="application-search-input"
-                    form="application-search-form"
-                    aria-live="polite"
-                >
-                    <p>${message}</p>
-                </output>
-                ${this.renderState()}
+                ${this.renderApplicationStatusOutput} ${this.renderState()}
             </main>
         </div>`;
     }
