fix(backdrop): remove tabindex for improved accessibility

Issue number: resolves #29773

What is the current behavior?

Certain Chrome and Edge versions (confirmed: Chrome v127 and Edge v127) would indicate that the backdrop has an accessibility violation:

Blocked aria-hidden on a <ion-backdrop> element because the element that just received
focus must not be hidden from assistive technology users. Avoid using aria-hidden on a
focused element or its ancestor. Consider using the inert attribute instead, which will also
prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at

The error is happening because tabindex and aria-hidden are being passed to ion-backdrop. The tabindex attribute is used to make an element focusable, regardless of value. When aria-hidden is applied to an element, then the element is hidden from screen readers. This violates the accessibility standards since ion-backdrop would be considered a focusable element but not visible to screen readers.

What is the new behavior?

Removed tabindex, this aligns with frameworks known for accessibility (Chakra UI)

Does this introduce a breaking change?

[ ] Yes
[x] No

Other information

Dev build: 8.3.4-dev.11729533091.1ac77a0c

How to test:

Use either Chrome v127 or Edge v127
Navigate to the alert basic page from the main branch
Open browser console
Click on the first button on the alert page
Click on the backdrop
Notice the error message in the browser console (if you don't see it, then use a private browser or clear cache)
Navigate to the alert basic page from the ROU-11175 branch
Repeat steps 2-6
Verify that the error does not appear

ionic-team / ionic-framework