googlechrome/inert-polyfill

Polyfill for the HTML inert attribute

inert-polyfill's Issues

Throws error trying to focus SVGElements in Edge

Microsoft Edge lacks support for SVGElement.prototype.focus, so if you have a situation like

<a href="#">Normal link</a>
<a inert href="#">Inert link</a>
<svg tabindex="0" />

When you forward-tab from “Normal-link,” the polyfill will try to find the next suitable element to focus and call element.focus() on it. So in this case, in Edge, element.focus is undefined.

CodePen demo: https://codepen.io/atcb/pen/RLzjPX

I’ve already fixed this in my fork, but didn’t open a PR earlier because my fork exists for the purpose of swapping the attribute trigger from inert to data-inert, as React <= v15 doesn’t allow passing custom attributes to elements.

Anyway, if you’re interested in accepting a PR, I’ll gladly re-apply my fix to master. My fix is here: andrewbranch@88c8e0c

Causing issues with firefox input/textarea

I am having trouble with inert polyfill screwing up firefox textareas/inputs (the cursor doesn't show up and highlighting doesn't work). Here is a small requirebin of what is happening:

http://requirebin.com/?gist=915d1c6c0b273dc1eff9c201c0943968

view it on chrome and firefox and see the difference for yourselves.

It would be much appreciated if this could be fixed because it is otherwise totally awesome!

Thanks!

Inert elements are searchable in browser search

If I understand the inert property correctly, apart from actually rendering, the element should appear as if display: none was active. The browser search function (cmd/ctrl+f) does not list hidden elements, but it does list inert ones. This is the native behaviour of Chrome Canary as well, but after a quick chat with Rob Dodson and Alice Boxhall, this should perhaps be fixed there as well.

As for a solution to this problem, I'm not of much help. The only text I can think of that isn't searchable is that added as CSS content. To remove the text from the DOM to put it in the content I guess would trigger a repaint, which would render the inert property useless in many cases.

A quick demo: https://codepen.io/sindre/pen/BZGbrK

Parents with absolute child are pushed after pressing tab

Hi there. Hope you are doing fine. So, I'm having this weird problem. Was wondering if this is an issue or do you have a workaround for it.

Basically, the problem is that if you have a parent div with position relative and two children. If the second child has the attribute inert set and position=absolute top = 100% to place it outside the parent, when you change your focus from the first child to an element outside the parent div, the content of the parent is pushed and reveals the second child that should be hidden.

It is kind of difficult to explain, so I created this code pen: https://codepen.io/afallas9/pen/pKYdgX

One more thing that I didn't mention is that if you are reading the screen with Jaws, and you go through the page with the down arrow key, it still reads the link in the inert div

Regards

inert elements in shadowDom

inert is not handled for elements inside a shadow dom
http://jsbin.com/cebogor/3/edit?html,output

Warning in Google Chromium 52

Using the inert attribute causes following error while tabbing through the page:
"A DOM event generated from JavaScript has triggered a default action inside the browser. This behavior is non-standard and will be removed in M53, around September 2016. See https://www.chromestatus.com/features/5718803933560832 for more details."

It seems to be caused by the following line:

document.dispatchEvent(ev);

Difference between this polyfill and the WICG's one

Hi,

was looking for the inert polyfill and I found both this one and https://github.com/WICG/inert .
Can someone explain the differences between these 2 polyfills, and also the reason why there are 2 of them?

Thanks

Setting inert before the load event

Setting the inert property on an element before the load event fires fails to update the attribute. This is a problem for custom elements, as the connectedCallback is called before load fires.

Detect native support

Now that the first browser has landed its [inert] support, we should start checking for native support.

Support?

I know this is a polyfill, but as a general question:

How likely is it that browser vendors implement it?
I saw the Chrome issue saying they won't continue implementing this.
I saw the Firefox issue that they think this is no more relevant as it's removed from the spec.
It's not even listed on chromestatus.com.

I see the great advantage, but why aren't they all not implementing it?

Inert elements not hidden from screen readers

When a tree is marked inert, it is still visible to screen readers.

Should be given aria-hidden="true" attribute otherwise a screen-reader user can navigate to and manipulate things they shouldn't be able to (e.g. when a modal dialog is covering the rest of the UI they can get at things "under" the modal dialog).

Can see this on the simple demo page, also in our project: rstudio/rstudio#6075

More clearly indicate status/relationship to WICG polyfill

When doing a search for "inert polyfill" results usually point to both this repo and the https://github.com/WICG/inert one, causing some confusion for developers.

while there is a note in https://github.com/GoogleChrome/inert-polyfill#limitations it would be good if the readme started more directly with some statement about the status of this polyfill, its relationship with the WICG one, and suggestion to developers on which one they should use/look at.

Polyfill Disabling $.on('focus')

When you just add the polyfill on your page this disable the focus on some elements, at now my issue was with input element that is not working $.on('focus'), but when i remove the polyfill it back to work again.