Adjust svg accessibility
Description
This adjusts the accessibility set up slightly for the Fire in Ice viz and the Beaufort Sea timeline viz.
Changes Made
The automatic tooltip showing the svg title was disrupting user interaction with the viz, particularly the regional fires viz, so I did some reading. Apparently folks recommend using an aria-label
instead (see Best Practice 2).
I also added in keyboard navigation to the Beaufort Sea timeline viz b/c I'd forgotten to do that
How to Test
Provide instructions and/or code necessary to test the changes.
MR t-shirt size
-
extra-small (e.g., update color scheme) -
small (e.g., add tooltip to chart) -
medium (e.g., add new static chart, add new pipeline output) -
large (e.g., initial data processing pipeline, interactive chart)
Timeline for review
-
ASAP - blocker for deployment -
Today - blocker for ongoing work -
Next couple of days -
This week -
When reviewer has availability
Review Needs
Does this MR include data processing, modeling, or visualization code that will require domain review prior to release?
-
Yes, and I have opened an issue to document the need for review, using the DomainReview
issue template -
Yes, and a domain review issue already exists -
No
Related Issues
NA
Additional Notes
Has been tested in Edge with Windows Narrator.
Merge Request Checklists
-
Code changes adhere to best practices documented in README.md
-
Code has been cleaned the way Vue likes it - run npm run lint --fix
-
If applicable, the need for future domain review has been documented in an issue -
Below section documents which browsers the site has been tested on: - Desktop/laptop
-
Chrome -
Safari -
Edge -
Firefox
-
- Mobile device
-
Chrome -
Safari -
Edge -
Firefox
-
- Desktop/laptop