Fii edits
Description
This MR has two main purposes: 1) Add in basic accessibility functionality to the Fire in Ice visualizations, and 2) Address some bugs with the visualizations in Safari. It also includes some other miscellaneous edits
Changes Made
Accessibility
- Explore the Juneau ice field
- Add keyboard navigation for interaction
- Add alt text for field photos
- Hide axis content
- Add title for SVG
- Wildfire aerosols
- Hide axis content
- Add title for SVG
- Add aria-labels to navigation buttons
- Regional fires
- Add keyboard navigation for interaction
- Hide axis content
- Add title for SVG
- Add aria-labels to fire icons
Safari bugs
- Fix text wrapping in safari - dominant baseline not inherited by
<tspan>
elements - Fix mouseover behavior in Safari by targeting
<use>
elements directly, not paths - Override default font for viz 1 and 3 svgs, since Univers 57 Condensed not loaded by Safari
Miscellaneous
- Add trade names disclaimer for snow corer
- Fix display of field photos - were stretched on tall screens
- Update release date and contributors
- Fix typos
How to Test
Pull changes locally, run npm run dev
and navigate to the fire in ice visualizations. Use Safari and confirm that the bugs are fixed.
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
Fixes #62 (closed) . Fixes #63 (closed) . Fixes desktop portion of #58 (closed) , will have to push to beta to test on mobile.
Additional Notes
I've tested all the accessibility changes in Narrator with Edge. The behavior is not perfect, but it meets our MVP needs.
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