Fix tabIndex attribute for SVG #11033
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jquense
approved these changes
Oct 2, 2017
|
Deploy preview ready! Built with commit c079727 |
gaearon
force-pushed
the
fix-svg-tabindex
branch
from
f82fc89 to
f501891
Compare
gaearon
commented
Oct 2, 2017
| @@ -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>` | | |||
There was a problem hiding this comment.
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.
gaearon
commented
Oct 2, 2017
| @@ -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>` | | |||
There was a problem hiding this comment.
This shows it worked.
gaearon
force-pushed
the
fix-svg-tabindex
branch
from
f501891 to
c079727
Compare
sebmarkbage
reviewed
Oct 9, 2017
| let e = await render(<svg tabindex="1" />, 1); | ||
| expect(e.tabIndex).toBe(1); | ||
| }, | ||
| ); |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Fixes #10987 which is a regression in 16.
Verified with a new integration test, and by manually trying https://github.com/forWorkAtML/svg-bug.
Why it broke: we removed most of the DOM whitelist recently (#10385), and
tabIndexwas one of the attributes that got nixed because its lowercase version (tabindex) "just works". However, we forgot it’s also a valid SVG attribute which is case sensitive.We currently use a different logic branch for attributes that aren't in the whitelist, so it didn't get properly lowercased in 16.0.0. Adding it back to the whitelist forces it to be lowercased, which fixes it for SVG (and doesn't change how it works for HTML).
The way whitelist works is pretty confusing now but I'm going to fix this later in #10805. Let's just patch this hole for now.
I don't expect there to be more regressions like this because it's the only
camelCaseHTML attribute we deleted in #10385 that also happens to apply to SVG.