fix(tabs): roles in sr (#2731)

* fix(tabs): roles in sr

* fix(tabs): only expand tabs the tabset owns

---------

Co-authored-by: Steven Spriggs <[email protected]>

Author: bennypowers

.changeset/nice-moments-doubt.md

@@ -0,0 +1,4 @@
+---
+"@patternfly/elements": patch
+---
+`<pf-tabs>`: improved screen-reader accessibility

core/pfe-core/controllers/tabs-aria-controller.ts

@@ -92,8 +92,10 @@ export class TabsAriaController<
     for (const child of this.#element.children) {
       if (this.#options.isTab(child)) {
         tabs.push(child);
+        child.role ??= 'tab';
       } else if (this.#options.isPanel(child)) {
         panels.push(child);
+        child.role ??= 'tabpanel';
       }
     }
     if (tabs.length > panels.length) {

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

@@ -4,6 +4,7 @@ import { state } from 'lit/decorators/state.js';
 import { consume } from '@lit/context';
 
 import { getRandomId } from '@patternfly/pfe-core/functions/random.js';
+
 import { type PfTabsContext, context } from './context.js';
 
 import styles from './pf-tab-panel.css';
@@ -19,8 +20,6 @@ import styles from './pf-tab-panel.css';
 export class PfTabPanel extends LitElement {
   static readonly styles = [styles];
 
-  #internals = this.attachInternals();
-
   @consume({ context, subscribe: true })
   @state() private ctx?: PfTabsContext;
 
@@ -34,7 +33,6 @@ export class PfTabPanel extends LitElement {
     super.connectedCallback();
     this.id ||= getRandomId('pf-tab-panel');
     this.hidden ??= true;
-    this.#internals.role = 'tabpanel';
 
     /*
      To make it easy for screen reader users to navigate from a tab

elements/pf-tabs/pf-tabs.ts

@@ -234,7 +234,8 @@ export class PfTabs extends LitElement {
   }
 
   #onExpand(event: Event) {
-    if (event instanceof TabExpandEvent && !event.defaultPrevented) {
+    if (event instanceof TabExpandEvent &&
+      !event.defaultPrevented && this.tabs.includes(event.tab)) {
       this.select(event.tab);
     }
   }