Skip to content

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

Merge request reports

Loading