fix(elements): table th role from context instead of dom

Author: bennypowers

elements/pf-table/context.ts

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

elements/pf-table/pf-table.ts

@@ -3,7 +3,11 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { state } from 'lit/decorators/state.js';
 
+import { provide } from '@lit/context';
+import { thRoleContext } from './context.js';
+
 import { PfTh, RequestSortEvent } from './pf-th.js';
+import { PfTd } from './pf-td.js';
 import { PfTr, RequestExpandEvent } from './pf-tr.js';
 
 export * from './pf-caption.js';
@@ -14,7 +18,6 @@ export * from './pf-th.js';
 export * from './pf-td.js';
 
 import styles from './pf-table.css';
-import { PfTd } from './pf-td.js';
 
 const rowQuery = [
   ':scope > pf-tbody:not([expandable]) > pf-tr',
@@ -671,6 +674,8 @@ export class PfTable extends LitElement {
 
   @state() private columns = 0;
 
+  @provide({ context: thRoleContext }) private thRowContext = 'rowheader';
+
   override connectedCallback(): void {
     super.connectedCallback();
     this.setAttribute('role', 'table');

elements/pf-table/pf-th.ts

@@ -3,6 +3,10 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 import { classMap } from 'lit/directives/class-map.js';
 
+import { consume } from '@lit/context';
+
+import { thRoleContext } from './context.js';
+
 import '@patternfly/elements/pf-button/pf-button.js';
 
 import styles from './pf-th.css';
@@ -46,13 +50,12 @@ export class PfTh extends LitElement {
 
   @property() key!: string;
 
+  @consume({ context: thRoleContext })
+  private contextualRole: 'colheader' | 'rowheader' = 'rowheader';
+
   override connectedCallback(): void {
     super.connectedCallback();
-    const closestThead = this.closest('pf-thead');
-    const closestTable = this.closest('pf-table');
-    const isChildOfThead = !!closestThead && !!closestTable?.contains(closestThead);
-    const role = isChildOfThead ? 'colheader' : 'rowheader';
-    this.setAttribute('role', role);
+    this.setAttribute('role', this.contextualRole);
   }
 
   render(): TemplateResult<1> {

elements/pf-table/pf-thead.ts

@@ -1,7 +1,10 @@
 import { LitElement, html, type TemplateResult } from 'lit';
 import { customElement } from 'lit/decorators/custom-element.js';
 
+import { thRoleContext } from './context.js';
+
 import styles from './pf-thead.css';
+import { provide } from '@lit/context';
 
 /**
  * Table head
@@ -11,6 +14,8 @@ import styles from './pf-thead.css';
 export class PfThead extends LitElement {
   static readonly styles: CSSStyleSheet[] = [styles];
 
+  @provide({ context: thRoleContext }) private thRowContext = 'colheader';
+
   connectedCallback(): void {
     super.connectedCallback();
     this.setAttribute('role', 'rowgroup');