[SVG] Support "focusable" attribute

[Kureev]

Currently, if I supply a focusable attribute to the SVG, it shrinks it out. Seems it happens because there is no focusable key in SVGDOMPropertyConfig.js.

So is there any chance you merge a PR which adds this property to the list?

[gaearon]

React 15 removed whitelisting attributes for SVG completely in #5714. The names left in the whitelist are only there to print deprecation warnings. You will find that any arbitrary attribute, including focused, should get passed correctly in in any version >= 15 RC1.

React 15 RC1 was shipped yesterday so I would suggest you to check it out. I would expect 15 to arrive shortly within a few weeks.

[Kureev]

Thanks 👍

[gaearon]

Seems like we’re going to go back on that change (see #6243).

Are there any browsers that actually support focusable?
We can add it if that’s the case but from a quick look it doesn’t appear to be implemented.

[alexlande]

IE10, IE11, and Edge support focusable, unfortunately. If you don't specify focusable="false", SVG elements are added to the tab order by default in those browsers, with no way of removing them (tabindex is ignored).

It's a pretty annoying accessibility issue for keyboard users in those browsers.

[jimfb]

cc @tomocchino whitelists... :P

[KittyGiraudel]

Hey there. It seems that focusable needs to be passed false as a string and not a boolean so React (16) renders it in the DOM. Is that expected behaviour?

<svg
-    focusable={false}
+    focusable="false"

I find it rather surprising considering other boolean attributes such as aria-hidden appear to behave differently (passing false as a boolean properly renders it in the DOM).

Maybe I missed something?

[gaearon]

AFAIK it's expected because focusable is a string attribute with "true", "false" and "auto" values per spec, and not a boolean attribute. Yes, the spec is confusing.

[nhunzaker]

Yes. I can't remember if we achieved consensus on the best way to handle boolean attributes but, from what I remember, it follows:

• Attributes that require string html attribute values (like focusable="true") should be passed as strings
• Attributes that should either be present or absent (like disabled or novalidate) accept true and false. React adds/removes the attribute based on the boolean

I believe we have some inconsistency to retain backwards compatibility, though I'm not sure of a specific example off-hand.

---

• Attributes React treats as boolean

[nhunzaker]

Looks like we have a "boolean-ish" section for some SVG:
https://github.com/facebook/react/blob/master/packages/react-dom/src/shared/DOMProperty.js#L255-L267

Does it make sense to add focusable here?