Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix tabIndex attribute for SVG #11033

Merged
merged 2 commits into from
Oct 2, 2017
Merged

Fix tabIndex attribute for SVG #11033

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1e5ecb0
Fix tabIndex attribute for SVG
gaearon Oct 2, 2017
c079727
Update the attribute table
gaearon Oct 2, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions fixtures/attribute-behavior/AttributeTableSnapshot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>` |
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The ssr error, ssr mismatch for Symbols doesn’t sound great, but it’s an existing issue with SVG attributes (you can search the file for many more matches). We should fix that separately.

| `tabIndex=(function)`| (initial, warning)| `<number: -1>` |
| `tabIndex=(null)`| (initial)| `<number: -1>` |
| `tabIndex=(undefined)`| (initial)| `<number: -1>` |
Expand All @@ -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>` |
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This shows it worked.

| `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>` |
Expand Down
2 changes: 2 additions & 0 deletions src/renderers/dom/shared/HTMLDOMPropertyConfig.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
13 changes: 13 additions & 0 deletions src/renderers/dom/shared/__tests__/ReactDOMServerIntegration-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
},
);
Copy link
Collaborator

@sebmarkbage sebmarkbage Oct 9, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this expected to work if SVG is case sensitive? I see that there is a warning, but how does it actually get set?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It might differ in another browser, but a quick check in Chrome shows that it works, and it gets assigned as tabindex:

https://codepen.io/anon/pen/PJeoeE

screen shot 2017-10-09 at 2 51 16 pm


itRenders('a math element', async render => {
const e = await render(<math />);
expect(e.childNodes.length).toBe(0);
Expand Down