web/a11y: Tables -- labels, input handlers, selection and expanded state (#16207)

* web: Clean up types.

* web: Flesh out a11y clean up.

* web: Fix text selection.

* Flesh out property.

* web: Clean up stateful issues. Add labels.

* web: Clean up column rendering.

* web: Hide icons from screen reader.

* web: Fix nesting of region base elements.

* web: Add labels to hidden columns.

* web: Add aria label to row actions.

* web: Use common timestamp component.

* web: Fix column text wrapping.

* web: Add labels to all rows.

* web: Fix icon alignment.

* web: Fix mix of method properties, duplicate role assignments.

* web: Fix alignment, labeling.

* web: Fix `nothing` typing.

web/src/elements/forms/DeleteBulkForm.ts

@@ -7,11 +7,12 @@ import { MessageLevel } from "#common/messages";
 import { ModalButton } from "#elements/buttons/ModalButton";
 import { showMessage } from "#elements/messages/MessageContainer";
 import { PaginatedResponse, Table, TableColumn } from "#elements/table/Table";
+import { SlottedTemplateResult } from "#elements/types";
 
 import { UsedBy, UsedByActionEnum } from "@goauthentik/api";
 
 import { msg, str } from "@lit/localize";
-import { CSSResult, html, TemplateResult } from "lit";
+import { CSSResult, html, nothing, TemplateResult } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 import { until } from "lit/directives/until.js";
 
@@ -51,21 +52,24 @@ export class DeleteObjectsTable<T extends object> extends Table<T> {
             results: this.objects,
         });
     }
+    protected override rowLabel(item: T): string | null {
+        const name = "name" in item && typeof item.name === "string" ? item.name.trim() : null;
 
-    columns(): TableColumn[] {
-        return this.metadata(this.objects[0]).map((element) => {
-            return new TableColumn(element.key);
-        });
+        return name || null;
     }
 
-    row(item: T): TemplateResult[] {
+    protected get columns(): TableColumn[] {
+        return this.metadata(this.objects[0]).map((element) => [element.key]);
+    }
+
+    row(item: T): SlottedTemplateResult[] {
         return this.metadata(item).map((element) => {
             return html`${element.value}`;
         });
     }
 
-    renderToolbarContainer(): TemplateResult {
-        return html``;
+    renderToolbarContainer(): SlottedTemplateResult {
+        return nothing;
     }
 
     firstUpdated(): void {
@@ -80,11 +84,11 @@ export class DeleteObjectsTable<T extends object> extends Table<T> {
             }
             return this.renderUsedBy(this.usedByData.get(item) || []);
         };
-        return html`<td role="cell" colspan="2">
+        return html`<td colspan="2">
             <div class="pf-c-table__expandable-row-content">
                 ${this.usedBy
                     ? until(handler(), html`<ak-spinner size=${PFSize.Large}></ak-spinner>`)
-                    : html``}
+                    : nothing}
             </div>
         </td>`;
     }