fix(tab): A11Y - manage tabindex and set focus when active.

joselrio · joselrio · commit e4957fa4d272 · 2025-02-05T14:59:08.000Z
diff --git a/core/src/components/tab/tab.tsx b/core/src/components/tab/tab.tsx
@@ -56,6 +56,11 @@ export class Tab implements ComponentInterface {
   @Watch('active')
   changeActive(isActive: boolean) {
     if (isActive) {
+      // ensure tabindex gets updated before setting focus to the element
+      setTimeout(() => {
+        this.el.focus();
+      }, 50);
+      
       this.prepareLazyLoaded();
     }
   }
@@ -83,6 +88,7 @@ export class Tab implements ComponentInterface {
           'ion-page': component === undefined,
           'tab-hidden': !active,
         }}
+        tabIndex={!active ? -1 : 0}
       >
         <slot></slot>
       </Host>

Original file line number	Diff line number	Diff line change
`@@ -56,6 +56,11 @@ export class Tab implements ComponentInterface {`
`56`	`56`	`@Watch('active')`
`57`	`57`	`changeActive(isActive: boolean) {`
`58`	`58`	`if (isActive) {`
	`59`	`+ // ensure tabindex gets updated before setting focus to the element`
	`60`	`+ setTimeout(() => {`
	`61`	`+ this.el.focus();`
	`62`	`+ }, 50);`
	`63`	`+`
`59`	`64`	`this.prepareLazyLoaded();`
`60`	`65`	`}`
`61`	`66`	`}`
`@@ -83,6 +88,7 @@ export class Tab implements ComponentInterface {`
`83`	`88`	`'ion-page': component === undefined,`
`84`	`89`	`'tab-hidden': !active,`
`85`	`90`	`}}`
	`91`	`+ tabIndex={!active ? -1 : 0}`
`86`	`92`	`>`
`87`	`93`	`<slot></slot>`
`88`	`94`	`</Host>`