fix(backdrop): remove tabindex for improved accessibility

[thetaPC]

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
• No

Other information

Dev build: 8.3.4-dev.11729533091.1ac77a0c

How to test:

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

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
ionic-framework	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Oct 21, 2024 5:30pm

[gnbm]

LGTM 🚀