Merge pull request #2487 from patternfly/fix/tabs/base-random-id

fix(tabs): assign random id in BaseTab/Panel

Author: zeroedin

.changeset/base-tab-id.md

@@ -0,0 +1,5 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-tabs>`: improved accessibility for elements extending `BaseTab` and 
+`BaseTabPanel` by assigning random IDs when no exists.

elements/pf-tabs/BaseTab.ts

@@ -4,6 +4,7 @@ import { LitElement, html } from 'lit';
 import { queryAssignedElements } from 'lit/decorators/query-assigned-elements.js';
 import { query } from 'lit/decorators/query.js';
 
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 import { ComposedEvent } from '@patternfly/pfe-core';
 
 import style from './BaseTab.css';
@@ -37,6 +38,7 @@ export abstract class BaseTab extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.id ||= getRandomId(this.localName);
     this.addEventListener('click', this.#clickHandler);
     this.#internals.role = 'tab';
   }

elements/pf-tabs/BaseTabPanel.ts

@@ -2,6 +2,8 @@ import { LitElement, html } from 'lit';
 
 import style from './BaseTabPanel.css';
 
+import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+
 export abstract class BaseTabPanel extends LitElement {
   static readonly styles = [style];
 
@@ -17,6 +19,7 @@ export abstract class BaseTabPanel extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
+    this.id ||= getRandomId('pf-tab-panel');
     this.#internals.role = 'tabpanel';
     /*
      To make it easy for screen reader users to navigate from a tab

elements/pf-tabs/pf-tab-panel.ts

@@ -1,7 +1,5 @@
 import { customElement } from 'lit/decorators/custom-element.js';
 
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
-
 import styles from './pf-tab-panel.css';
 
 import { BaseTabPanel } from './BaseTabPanel.js';
@@ -16,11 +14,6 @@ import { BaseTabPanel } from './BaseTabPanel.js';
 @customElement('pf-tab-panel')
 export class PfTabPanel extends BaseTabPanel {
   static readonly styles = [...BaseTabPanel.styles, styles];
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getRandomId('pf-tab-panel');
-  }
 }
 
 declare global {

elements/pf-tabs/pf-tab.ts

@@ -2,7 +2,6 @@ import { customElement } from 'lit/decorators/custom-element.js';
 import { property } from 'lit/decorators/property.js';
 
 import { observed } from '@patternfly/pfe-core/decorators.js';
-import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
 
 import { BaseTab } from './BaseTab.js';
 
@@ -77,11 +76,6 @@ export class PfTab extends BaseTab {
 
   @observed
   @property({ reflect: true, type: Boolean }) disabled = false;
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.id ||= getRandomId('pf-tab');
-  }
 }
 
 declare global {