input type="file" hidden about micromodal

[ghosh]

Hi @arturi - Thanks for reporting this. Here are my thoughts on this:-

• aria-hidden="true" prevents screen readers from reading the element.
• tabindex="-1" prevents the node from being focusable
• hidden="true" is an html5 attribute which should visually hide your element.

Which browser and version are you using? Normally any element with hidden or type=hidden should be hidden by the browser. Micromodal cannot focus on hidden elements.

Now that you mention it, I am not sure if there is any need of :not([type="hidden"]):not([hidden]) in the focusable list since hiding the elements should be onus of the browser.

Additionally, a simple [hidden] { display: none;} should do the trick if the browser does not support this natively.

@arturi @kalpeshsingh thoughts?

[arturi]

Okay, I did some tests and it turns out the bug occurs when this input I mention is the last “focusable element that should not be focusable“ in the modal.

Demo: https://codepen.io/anon/pen/jYyvMe, try tabbing a few times, notice how focus breaks out of the modal.

If you look in the console, the NodeList that gets logged there includes all the inputs that have hidden and tabindex="-1" in them, and that screws up the math, I think.

[ghosh]

Yup, seems like aria-hidden="true" needs to explicitly excluded from being selected.

'input:not(hidden):not(disabled):not([aria-hidden])'

Problem is this would need to be set for all selectable elements. Seems like globally omiting aria-hidden="true" does not work.

[arturi]

Shall I send a PR with :not([aria-hidden] in every selectable element? Or shall we think on some other solutions? Could also loop through nodes after querySelectorAll to remove those with hidden attributes, but that might be slower / more verbose code.

[kalpeshsingh]

In my opinion, adding :not([aria-hidden] in every selectable element should be last option. I will check on this if we can get something clean to fix this problem.

[ghosh]

This should be fixed in 0.3.0

@arturi - Would have asked you for a PR, but it was a very small change. So I changed it myself.

@kalpeshsingh There were actually just 4 elements which I needed to add it too. If you find a better way feel free to raise a PR

[arturi]

Thank you!