Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Modals aria-hidden attribute #41005

Open
3 tasks done
bravedave opened this issue Nov 5, 2024 · 4 comments
Open
3 tasks done

Modals aria-hidden attribute #41005

bravedave opened this issue Nov 5, 2024 · 4 comments
Labels

Comments

@bravedave
Copy link

Prerequisites

Describe the issue

I'm actually using Brave Beta - Chrome 131.0.6778.14 Beta, checking around this issue seems to be in Beta and Nightly builds; but not the current release

I tested on Chrome beta - same version as my Brave and it exists there

I'm concluding it is an imminent issue

I can see this got mentioned a while back in #29769

The Issue:
I've started seeing aria-hidden issues when I close my modals, and have been able to see it on the demo modals at https://getbootstrap.com/docs/5.3/components/modal/

So to replicate the issue I open the modal, then close it using the cross (top right in the modal header)
a second or so after the click this appears in the console, I hadn't noticed before today

I've gone back over my code and am consistent with the documentation

Screenshot 2024-11-05 172723

Reduced test cases

The issue exists in my code and can be demonstrated on the getbootstrap.com site

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v5.3.3

@bravedave
Copy link
Author

A bit more on this - I'm thinking it is a rising issue

This only occurs when the fade class is set, so it is to do with elements having focus and visible when the aria attribute is set

Is it sensible to move the setting of the aria hidden attribute down to after the css transition has taken place ?
I'm thinking the attribute is set too early

This file is js/dist/modal.js

Screenshot 2024-11-06 214339

@Khuthaily
Copy link

It is a rising issue; the same thing happens in Google Chrome (Canary Version 133.0.6840.0). The issue occurs when the fade class is present.

@Khuthaily
Copy link

Khuthaily commented Nov 17, 2024

It is a rising issue; the same thing happens in Google Chrome (Canary Version 133.0.6840.0). The issue occurs when the fade class is present.

In my previous comment, I mentioned that the issue occurs when the fade class is present. Even though the issue disappears (most of the times), there are (random?) times when the issue occurs even when the fade class is not used. So, I am not sure if the fade class is a factor in this case.

@bravedave
Copy link
Author

I don't know enough to definitively associate it with fade - but am associating it with something retaining focus until after the transition between the events hide.bs.modal and hidden.bs.modal - so have blamed fade I guess

but it is random - it exists in bootstrap 4 too

In a modified bootstrap.js it disappears for me when the aria-hidden line is moved down

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants