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 🚀

[zhuchenghuFF]

We have just upgraded from version 6, and considering the compatibility of user terminals, we cannot upgrade to version 8 at the moment. May I ask if there is any way to solve the issue with version 7

[thetaPC]

@zhuchenghuFF Support for version 7 ended on October 17, 2024, which is why this fix was not implemented for version 7. Upgrading to the latest release is highly recommended.

[TiBz0u]

Hi,
Can someone confirm that is well linked to Ionic 7? Is it more linked to Angular 18 and aria-hidden feature?

We don't have any issue with Ionic 7 and Angular 17.

Since our Angular migration, we encounter the aria-hidden problem with Ionic 7 (We know that is not officially compatible) ; pay attention that this not occur when using inline modal (backdrop reacts correctly without any aria blocked event).

Kr.

[TiBz0u]

Hi @thetaPC ,
Due to the blocking impact of this really small fixe, can a patch on Ionic 7.x possible?

We cannot close with backdrop click any of overlay components (Alert, Loading, Modal) due to aria issue.

We are planning to migrate to 8.x but we need some time.

Kr.

[thetaPC]

@TiBz0u Thanks for reaching out! We have a strict policy regarding support for past versions, and since maintenance for v7 officially ended on October 17, 2024, we are unable to make any further patches. For continued support, improvements, and fixes, we highly recommend upgrading to v8 as soon as possible.