Moved discussion from https://github.com/facebook/react/issues/6212.

## Situation

The [`focusable` attribute](https://www.w3.org/TR/SVGTiny12/interact.html#focusable-attr) from the SVG specifications is an [enumerated attribute](https://html.spec.whatwg.org/#keywords-and-enumerated-attributes) 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:

```diff
-<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](https://www.w3.org/TR/wai-aria-1.1/#aria-hidden) is a good example of that.

For instance, [following a good practice for icon-buttons](https://fvsch.com/code/svg-icons/#section-html):

```html
<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:

```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:

```jsx
<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.
shouldRemoveAttributeWithWarning(
      name,
      value,
      propertyInfo,
      isCustomComponentTag,
    )
  ) {
    return true;
  }
  if (isCustomComponentTag) {
    return false;
  }
  if (propertyInfo !== null) {
    switch (propertyInfo.type) {
      case BOOLEAN:
        return !value;
      case OVERLOADED_BOOLEAN:
        return value === false;
      case NUMERIC:
        return isNaN(value);
      case POSITIVE_NUMERIC:
        return isNaN(value) || (value: any) < 1;
    }
  }
  return false;
}
export function getPropertyInfo(name: string): PropertyInfo | null {
  return properties.hasOwnProperty(name) ? properties[name] : null;
}
function PropertyInfoRecord(