fix(table): various accessibility issues

.changeset/fix-table-accessibility.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-table>`: fix accessibility features: column header role, accessible label for row toggle button, etc.

elements/pf-table/context.ts

@@ -2,4 +2,4 @@ import { createContextWithRoot } from '@patternfly/pfe-core/functions/context.js
 
 export const thRoleContext: {
   __context__: unknown;
-} = createContextWithRoot<'rowheader' | 'colheader'>('pf-th-role');
+} = createContextWithRoot<'rowheader' | 'columnheader'>('pf-th-role');

elements/pf-table/pf-th.ts

@@ -51,7 +51,7 @@ export class PfTh extends LitElement {
   @property() key!: string;
 
   @consume({ context: thRoleContext })
-  private contextualRole: 'colheader' | 'rowheader' = 'rowheader';
+  private contextualRole: 'columnheader' | 'rowheader' = 'rowheader';
 
   override connectedCallback(): void {
     super.connectedCallback();

elements/pf-table/pf-thead.ts

@@ -14,7 +14,7 @@ import { provide } from '@lit/context';
 export class PfThead extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
-  @provide({ context: thRoleContext }) private thRowContext = 'colheader';
+  @provide({ context: thRoleContext }) private thRowContext = 'columnheader';
 
   connectedCallback(): void {
     super.connectedCallback();

elements/pf-table/pf-tr.ts

@@ -109,7 +109,9 @@ export class PfTr extends LitElement {
         <pf-td id="toggle-cell">
           <pf-button id="toggle-button"
                      aria-expanded=${String(this.expanded) as 'true' | 'false'}
+                     aria-controls=${ifDefined(this.expanded ? 'expansion' : undefined)}
                      plain
+                     label="Details"
                      @click=${this.#onClick}>
             <pf-icon id="toggle-icon"
                      icon="angle-right"