Treat focusable as enumerated boolean SVG attribute (#13339)

* Treat focusable as enumerated boolean attribute

* Update attribute table

Author: gaearon

fixtures/attribute-behavior/AttributeTableSnapshot.md

@@ -3587,8 +3587,8 @@
 | `focusable=(integer)`| (changed)| `"1"` |
 | `focusable=(NaN)`| (changed, warning)| `"NaN"` |
 | `focusable=(float)`| (changed)| `"99.99"` |
-| `focusable=(true)`| (initial, warning)| `<null>` |
-| `focusable=(false)`| (initial, warning)| `<null>` |
+| `focusable=(true)`| (changed)| `"true"` |
+| `focusable=(false)`| (changed)| `"false"` |
 | `focusable=(string 'true')`| (changed)| `"true"` |
 | `focusable=(string 'false')`| (changed)| `"false"` |
 | `focusable=(string 'on')`| (changed)| `"on"` |

packages/react-dom/src/shared/DOMProperty.js

@@ -260,7 +260,12 @@ const properties = {};
 // In React, we let users pass `true` and `false` even though technically
 // these aren't boolean attributes (they are coerced to strings).
 // Since these are SVG attributes, their attribute names are case-sensitive.
-['autoReverse', 'externalResourcesRequired', 'preserveAlpha'].forEach(name => {
+[
+  'autoReverse',
+  'externalResourcesRequired',
+  'focusable',
+  'preserveAlpha',
+].forEach(name => {
   properties[name] = new PropertyInfoRecord(
     name,
     BOOLEANISH_STRING,