[SVG] Enable focusable to accept boolean values

[KittyGiraudel]

Moved discussion from #6212.

Situation

The focusable attribute from the SVG specifications is an enumerated attribute accepting values "true", "false" and "auto". Because it is technically not a boolean attribute (although it certainly somehow looks like it), React expects the value to be passed as a string. See the following example:

-<svg focusable>I should be focusable</svg>
-<svg focusable={true}>I should be focusable</svg>
+<svg focusable='true'>I should be focusable</svg>

The thing is, the focusable attribute is often used in conjunction with elements from the ARIA specification, in which attributes are booleans and not enumerated attributes with "true" and "false" values. The aria-hidden attribute is a good example of that.

For instance, following a good practice for icon-buttons:

<button type="button">
  <svg aria-hidden="true" focusable="false">
    <use xlink:href="#icon-play"></use>
  </svg>
  <span class="access-label">Start playback</span>
</button>

From an authoring perspective, the above snippet would likely be written like this in JSX:

<button type='button'>
  <Icon icon='play' aria-hidden={true} focusable={false} />
  <span class='access-label'>Start playback</span>
</button>

The problem is that focusable cannot be authored as a boolean, otherwise it will not be printed out in the DOM. On the other hand, aria-hidden is perfectly fine being written as a boolean at it gets coerced by React.

Proposal

Given the default value for the focusable attribute is "auto", this is very likely this attribute gets authored to change its value to true or false. In that regard, it is confusing that it has to be specified as a string, when other attributes accepting booleans can be authored as such.

The suggestion would be to make it possible for focusable to be specified as either a boolean or a string, like other similar attributes. In other words, all the following should work:

<svg focusable>I should be focusable</svg>
<svg focusable={true}>I should be focusable</svg>
<svg focusable='true'>I should be focusable</svg>
<svg focusable={false}>I should not be focusable</svg>
<svg focusable='false'>I should not be focusable</svg>
<svg focusable='auto'>I should be focusable</svg>

From an authoring perspective, I believe this would be the most straightforward and less confusing.

[gaearon]

Are there any other similar attributes? I think it's not very likely we'll add one-off exceptions like this.

[gaearon]

#13339