Fix tabIndex attribute for SVG (#11033)

* Fix tabIndex attribute for SVG * Update the attribute table
facebook · Oct 2, 2017 · fbd6b9d · nhunzaker · Oct 3, 2017 · fbd6b9d
1 parent fbdd43f
commit fbd6b9d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 6 deletions.
diff --git a/fixtures/attribute-behavior/AttributeTableSnapshot.md b/fixtures/attribute-behavior/AttributeTableSnapshot.md
@@ -10768,7 +10768,7 @@
 | `tabIndex=(string 'false')`| (initial)| `<number: -1>` |
 | `tabIndex=(string 'on')`| (initial)| `<number: -1>` |
 | `tabIndex=(string 'off')`| (initial)| `<number: -1>` |
-| `tabIndex=(symbol)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: -1>` |
 | `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
 | `tabIndex=(null)`| (initial)| `<number: -1>` |
 | `tabIndex=(undefined)`| (initial)| `<number: -1>` |
@@ -10781,19 +10781,19 @@
 | `tabIndex=(array with string)`| (initial)| `<number: -1>` |
 | `tabIndex=(empty array)`| (initial)| `<number: -1>` |
 | `tabIndex=(object)`| (initial)| `<number: -1>` |
-| `tabIndex=(numeric string)`| (initial, ssr mismatch)| `<number: -1>` |
+| `tabIndex=(numeric string)`| (changed)| `<number: 42>` |
 | `tabIndex=(-1)`| (initial)| `<number: -1>` |
-| `tabIndex=(0)`| (initial, ssr mismatch)| `<number: -1>` |
-| `tabIndex=(integer)`| (initial, ssr mismatch)| `<number: -1>` |
+| `tabIndex=(0)`| (changed)| `<number: 0>` |
+| `tabIndex=(integer)`| (changed)| `<number: 1>` |
 | `tabIndex=(NaN)`| (initial, warning)| `<number: -1>` |
-| `tabIndex=(float)`| (initial, ssr mismatch)| `<number: -1>` |
+| `tabIndex=(float)`| (changed)| `<number: 99>` |
 | `tabIndex=(true)`| (initial, warning)| `<number: -1>` |
 | `tabIndex=(false)`| (initial, warning)| `<number: -1>` |
 | `tabIndex=(string 'true')`| (initial)| `<number: -1>` |
 | `tabIndex=(string 'false')`| (initial)| `<number: -1>` |
 | `tabIndex=(string 'on')`| (initial)| `<number: -1>` |
 | `tabIndex=(string 'off')`| (initial)| `<number: -1>` |
-| `tabIndex=(symbol)`| (initial, warning)| `<number: -1>` |
+| `tabIndex=(symbol)`| (initial, warning, ssr error, ssr mismatch)| `<number: -1>` |
 | `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
 | `tabIndex=(null)`| (initial)| `<number: -1>` |
 | `tabIndex=(undefined)`| (initial)| `<number: -1>` |

diff --git a/src/renderers/dom/shared/HTMLDOMPropertyConfig.js b/src/renderers/dom/shared/HTMLDOMPropertyConfig.js
@@ -67,6 +67,8 @@ var HTMLDOMPropertyConfig = {
     // Style must be explicitly set in the attribute list. React components
     // expect a style object
     style: 0,
+    // Keep it in the whitelist because it is case-sensitive for SVG.
+    tabIndex: 0,
     // itemScope is for for Microdata support.
     // See http://schema.org/docs/gs.html
     itemScope: HAS_BOOLEAN_VALUE,

diff --git a/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js b/src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
@@ -1243,6 +1243,19 @@ describe('ReactDOMServerIntegration', () => {
         );
       });
 
+      itRenders('svg element with a tabIndex attribute', async render => {
+        let e = await render(<svg tabIndex="1" />);
+        expect(e.tabIndex).toBe(1);
+      });
+
+      itRenders(
+        'svg element with a badly cased tabIndex attribute',
+        async render => {
+          let e = await render(<svg tabindex="1" />, 1);
+          expect(e.tabIndex).toBe(1);
+        },
+      );
+
       itRenders('a math element', async render => {
         const e = await render(<math />);
         expect(e.childNodes.length).toBe(0);