Accessibility for Plot Viewer#6240
Merged
IanMatthewHuff merged 2 commits intoJun 19, 2019
Merged
Conversation
IanMatthewHuff
commented
Jun 19, 2019
| <?xml version="1.0" encoding="UTF-8" standalone="no"?> | ||
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" width="16" height="16"><defs><path d="M7.59 1.25L7.81 1.28L8.02 1.31L8.24 1.35L8.45 1.4L8.65 1.46L8.86 1.52L9.06 1.6L9.25 1.68L9.45 1.77L9.63 1.87L9.82 1.97L10 2.08L10.17 2.2L10.34 2.33L10.51 2.46L10.67 2.6L10.83 2.74L10.98 2.9L11.12 3.05L11.26 3.22L11.39 3.38L11.52 3.56L11.64 3.73L11.75 3.92L11.86 4.11L11.96 4.3L12.05 4.5L12.14 4.7L12.21 4.9L12.29 5.11L12.35 5.33L12.4 5.54L12.45 5.76L12.49 5.98L12.52 6.21L12.54 6.44L12.56 6.67L12.56 6.9L12.56 7.14L12.54 7.37L12.52 7.6L12.49 7.82L12.45 8.05L12.4 8.27L12.35 8.48L12.29 8.7L12.21 8.91L12.14 9.11L12.05 9.31L11.96 9.51L11.86 9.7L11.75 9.89L11.64 10.07L15.06 13.65L13.59 15.19L10.17 11.61L10 11.72L9.82 11.84L9.63 11.94L9.45 12.04L9.25 12.13L9.06 12.21L8.86 12.28L8.65 12.35L8.45 12.41L8.24 12.46L8.02 12.5L7.81 12.53L7.59 12.55L7.37 12.57L7.15 12.57L6.92 12.57L6.7 12.55L6.48 12.53L6.27 12.5L6.05 12.46L5.84 12.41L5.64 12.35L5.43 12.28L5.23 12.21L5.04 12.13L4.84 12.04L4.66 11.94L4.47 11.84L4.29 11.72L4.12 11.61L3.95 11.48L3.78 11.35L3.62 11.21L3.47 11.06L3.32 10.91L3.17 10.76L3.03 10.59L2.9 10.43L2.77 10.25L2.65 10.07L2.54 9.89L2.43 9.7L2.33 9.51L2.24 9.31L2.15 9.11L2.08 8.91L2 8.7L1.94 8.48L1.89 8.27L1.84 8.05L1.8 7.82L1.77 7.6L1.75 7.37L1.73 7.14L1.73 6.9L1.73 6.67L1.75 6.44L1.77 6.21L1.8 5.98L1.84 5.76L1.89 5.54L1.94 5.33L2 5.11L2.08 4.9L2.15 4.7L2.24 4.5L2.33 4.3L2.43 4.11L2.54 3.92L2.65 3.73L2.77 3.56L2.9 3.38L3.03 3.22L3.17 3.05L3.32 2.9L3.47 2.74L3.62 2.6L3.78 2.46L3.95 2.33L4.12 2.2L4.29 2.08L4.47 1.97L4.66 1.87L4.84 1.77L5.04 1.68L5.23 1.6L5.43 1.52L5.64 1.46L5.84 1.4L6.05 1.35L6.27 1.31L6.48 1.28L6.7 1.25L6.92 1.24L7.15 1.24L7.37 1.24L7.59 1.25ZM6.87 3.42L6.74 3.43L6.6 3.45L6.47 3.48L6.34 3.51L6.21 3.54L6.09 3.58L5.97 3.63L5.84 3.68L5.73 3.74L5.61 3.8L5.5 3.86L5.38 3.93L5.28 4L5.17 4.08L5.07 4.16L4.97 4.25L4.87 4.34L4.78 4.43L4.69 4.53L4.61 4.63L4.53 4.73L4.45 4.84L4.37 4.95L4.3 5.06L4.24 5.18L4.18 5.3L4.12 5.42L4.07 5.54L4.02 5.67L3.97 5.8L3.93 5.93L3.9 6.06L3.87 6.2L3.85 6.34L3.83 6.48L3.81 6.62L3.81 6.76L3.8 6.9L3.81 7.05L3.81 7.19L3.83 7.33L3.85 7.47L3.87 7.61L3.9 7.75L3.93 7.88L3.97 8.01L4.02 8.14L4.07 8.27L4.12 8.39L4.18 8.51L4.24 8.63L4.3 8.75L4.37 8.86L4.45 8.97L4.53 9.08L4.61 9.18L4.69 9.28L4.78 9.38L4.87 9.47L4.97 9.56L5.07 9.65L5.17 9.73L5.28 9.81L5.38 9.88L5.5 9.95L5.61 10.01L5.73 10.07L5.84 10.13L5.97 10.18L6.09 10.22L6.21 10.27L6.34 10.3L6.47 10.33L6.6 10.36L6.74 10.38L6.87 10.39L7.01 10.4L7.15 10.4L7.28 10.4L7.42 10.39L7.55 10.38L7.69 10.36L7.82 10.33L7.95 10.3L8.08 10.27L8.2 10.22L8.33 10.18L8.45 10.13L8.57 10.07L8.68 10.01L8.8 9.95L8.91 9.88L9.01 9.81L9.12 9.73L9.22 9.65L9.32 9.56L9.42 9.47L9.51 9.38L9.6 9.28L9.68 9.18L9.76 9.08L9.84 8.97L9.92 8.86L9.99 8.75L10.05 8.63L10.11 8.51L10.17 8.39L10.23 8.27L10.27 8.14L10.32 8.01L10.36 7.88L10.39 7.75L10.42 7.61L10.44 7.47L10.46 7.33L10.48 7.19L10.48 7.05L10.49 6.9L10.48 6.76L10.48 6.62L10.46 6.48L10.44 6.34L10.42 6.2L10.39 6.06L10.36 5.93L10.32 5.8L10.27 5.67L10.23 5.54L10.17 5.42L10.11 5.3L10.05 5.18L9.99 5.06L9.92 4.95L9.84 4.84L9.76 4.73L9.68 4.63L9.6 4.53L9.51 4.43L9.42 4.34L9.32 4.25L9.22 4.16L9.12 4.08L9.01 4L8.91 3.93L8.8 3.86L8.68 3.8L8.57 3.74L8.45 3.68L8.33 3.63L8.2 3.58L8.08 3.54L7.95 3.51L7.82 3.48L7.69 3.45L7.55 3.43L7.42 3.42L7.28 3.41L7.15 3.41L7.01 3.41L6.87 3.42Z" id="b9xbmwveT"></path></defs><g><g><g><use xlink:href="#b9xbmwveT" opacity="1" fill="#080808" fill-opacity="1"></use></g></g></g></svg> No newline at end of file | ||
| <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="xMidYMid meet" viewBox="0 0 16 16" width="16" height="16"><title>Zoom In</title><defs><path d="M7.59 1.25L7.81 1.28L8.02 1.31L8.24 1.35L8.45 1.4L8.65 1.46L8.86 1.52L9.06 1.6L9.25 1.68L9.45 1.77L9.63 1.87L9.82 1.97L10 2.08L10.17 2.2L10.34 2.33L10.51 2.46L10.67 2.6L10.83 2.74L10.98 2.9L11.12 3.05L11.26 3.22L11.39 3.38L11.52 3.56L11.64 3.73L11.75 3.92L11.86 4.11L11.96 4.3L12.05 4.5L12.14 4.7L12.21 4.9L12.29 5.11L12.35 5.33L12.4 5.54L12.45 5.76L12.49 5.98L12.52 6.21L12.54 6.44L12.56 6.67L12.56 6.9L12.56 7.14L12.54 7.37L12.52 7.6L12.49 7.82L12.45 8.05L12.4 8.27L12.35 8.48L12.29 8.7L12.21 8.91L12.14 9.11L12.05 9.31L11.96 9.51L11.86 9.7L11.75 9.89L11.64 10.07L15.06 13.65L13.59 15.19L10.17 11.61L10 11.72L9.82 11.84L9.63 11.94L9.45 12.04L9.25 12.13L9.06 12.21L8.86 12.28L8.65 12.35L8.45 12.41L8.24 12.46L8.02 12.5L7.81 12.53L7.59 12.55L7.37 12.57L7.15 12.57L6.92 12.57L6.7 12.55L6.48 12.53L6.27 12.5L6.05 12.46L5.84 12.41L5.64 12.35L5.43 12.28L5.23 12.21L5.04 12.13L4.84 12.04L4.66 11.94L4.47 11.84L4.29 11.72L4.12 11.61L3.95 11.48L3.78 11.35L3.62 11.21L3.47 11.06L3.32 10.91L3.17 10.76L3.03 10.59L2.9 10.43L2.77 10.25L2.65 10.07L2.54 9.89L2.43 9.7L2.33 9.51L2.24 9.31L2.15 9.11L2.08 8.91L2 8.7L1.94 8.48L1.89 8.27L1.84 8.05L1.8 7.82L1.77 7.6L1.75 7.37L1.73 7.14L1.73 6.9L1.73 6.67L1.75 6.44L1.77 6.21L1.8 5.98L1.84 5.76L1.89 5.54L1.94 5.33L2 5.11L2.08 4.9L2.15 4.7L2.24 4.5L2.33 4.3L2.43 4.11L2.54 3.92L2.65 3.73L2.77 3.56L2.9 3.38L3.03 3.22L3.17 3.05L3.32 2.9L3.47 2.74L3.62 2.6L3.78 2.46L3.95 2.33L4.12 2.2L4.29 2.08L4.47 1.97L4.66 1.87L4.84 1.77L5.04 1.68L5.23 1.6L5.43 1.52L5.64 1.46L5.84 1.4L6.05 1.35L6.27 1.31L6.48 1.28L6.7 1.25L6.92 1.24L7.15 1.24L7.37 1.24L7.59 1.25ZM6.87 3.42L6.74 3.43L6.6 3.45L6.47 3.48L6.34 3.51L6.21 3.54L6.09 3.58L5.97 3.63L5.84 3.68L5.73 3.74L5.61 3.8L5.5 3.86L5.38 3.93L5.28 4L5.17 4.08L5.07 4.16L4.97 4.25L4.87 4.34L4.78 4.43L4.69 4.53L4.61 4.63L4.53 4.73L4.45 4.84L4.37 4.95L4.3 5.06L4.24 5.18L4.18 5.3L4.12 5.42L4.07 5.54L4.02 5.67L3.97 5.8L3.93 5.93L3.9 6.06L3.87 6.2L3.85 6.34L3.83 6.48L3.81 6.62L3.81 6.76L3.8 6.9L3.81 7.05L3.81 7.19L3.83 7.33L3.85 7.47L3.87 7.61L3.9 7.75L3.93 7.88L3.97 8.01L4.02 8.14L4.07 8.27L4.12 8.39L4.18 8.51L4.24 8.63L4.3 8.75L4.37 8.86L4.45 8.97L4.53 9.08L4.61 9.18L4.69 9.28L4.78 9.38L4.87 9.47L4.97 9.56L5.07 9.65L5.17 9.73L5.28 9.81L5.38 9.88L5.5 9.95L5.61 10.01L5.73 10.07L5.84 10.13L5.97 10.18L6.09 10.22L6.21 10.27L6.34 10.3L6.47 10.33L6.6 10.36L6.74 10.38L6.87 10.39L7.01 10.4L7.15 10.4L7.28 10.4L7.42 10.39L7.55 10.38L7.69 10.36L7.82 10.33L7.95 10.3L8.08 10.27L8.2 10.22L8.33 10.18L8.45 10.13L8.57 10.07L8.68 10.01L8.8 9.95L8.91 9.88L9.01 9.81L9.12 9.73L9.22 9.65L9.32 9.56L9.42 9.47L9.51 9.38L9.6 9.28L9.68 9.18L9.76 9.08L9.84 8.97L9.92 8.86L9.99 8.75L10.05 8.63L10.11 8.51L10.17 8.39L10.23 8.27L10.27 8.14L10.32 8.01L10.36 7.88L10.39 7.75L10.42 7.61L10.44 7.47L10.46 7.33L10.48 7.19L10.48 7.05L10.49 6.9L10.48 6.76L10.48 6.62L10.46 6.48L10.44 6.34L10.42 6.2L10.39 6.06L10.36 5.93L10.32 5.8L10.27 5.67L10.23 5.54L10.17 5.42L10.11 5.3L10.05 5.18L9.99 5.06L9.92 4.95L9.84 4.84L9.76 4.73L9.68 4.63L9.6 4.53L9.51 4.43L9.42 4.34L9.32 4.25L9.22 4.16L9.12 4.08L9.01 4L8.91 3.93L8.8 3.86L8.68 3.8L8.57 3.74L8.45 3.68L8.33 3.63L8.2 3.58L8.08 3.54L7.95 3.51L7.82 3.48L7.69 3.45L7.55 3.43L7.42 3.42L7.28 3.41L7.15 3.41L7.01 3.41L6.87 3.42Z" id="zoomSVG"></path></defs><g><g><g><use xlink:href="#zoomSVG" opacity="1" fill="#080808" fill-opacity="1"></use></g></g></g></svg> No newline at end of file |
Member
Author
There was a problem hiding this comment.
Change here is the autogen id changed to a unique ID. Only works for the plot viewer where we don't repeat SVGs though :(.
IanMatthewHuff
commented
Jun 19, 2019
| <button role='button' aria-pressed='false' disabled={this.props.disabled} aria-disabled={ariaDisabled} title={this.props.tooltip} aria-label={this.props.tooltip} className={classNames} onClick={this.props.onClick}> | ||
| <div className={innerFilter} > | ||
| <div className='image-button-child'> | ||
| <span className={innerFilter} > |
Member
Author
There was a problem hiding this comment.
Didn't actually realize this was an issue thanks to my HTML noobness. Look to me like span should work the same while being valid syntax and better meaning.
There was a problem hiding this comment.
Member
Author
There was a problem hiding this comment.
There is that "Parsing" step in the automated testing where you run a couple of bookmarklets. That scans for HTML issues. One of the requirements is that everything is nested according to spec. And the HTML spec doesn't actually allow for a div inside a button. I could change the button to a div and add in button functionality, but just changing to span was easier. As I understand it div should apply to blocks while span for more in-line elements so span makes sense here semantically as well.
In reply to: 295490584 [](ancestors = 295490584,295460654)
Member
Author
|
One side note on this. I think that we should yank our titles from all svg elements used in the buttons. These elements are decorative (as the tooltip on the button already provides the meaning) so we don't want them to participate in screen reading, which they might with title set. If we want to do this I can do it on the data explorer access pass. |
|
Sounds good to me. For the main window it made me have to add title to all of the buttons, but I think it would have caught that anyway? Not sure. In reply to: 503684788 [](ancestors = 503684788) |
This file contains hidden or 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
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
3 participants
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.
For #6020
package-lock.jsonhas been regenerated by runningnpm install(if dependencies have changed)