EDSC-4349: Adjustments to spatial filter dropdowns and buttons #1846
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #1846 +/- ##
=======================================
Coverage 93.78% 93.78%
=======================================
Files 778 778
Lines 18888 18900 +12
Branches 4869 4884 +15
=======================================
+ Hits 17714 17726 +12
Misses 1099 1099
Partials 75 75 ☔ View full report in Codecov by Sentry. |
| onClick={() => onItemClick('polygon')} | ||
| label="Select Polygon" | ||
| aria-label="Select Polygon" |
There was a problem hiding this comment.
I don't think we need labels or aria labels on all of these these dropdown items, since they are text buttons and the text tells the user what they will be selecting
| const buttons = drawToolbar.querySelectorAll('.leaflet-draw-draw-circle, .leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle, .leaflet-draw-draw-marker') | ||
| buttons.forEach((button) => { | ||
| if (button.classList.contains('leaflet-draw-draw-circle')) { | ||
| button.setAttribute('aria-label', 'Search by spatial circle') |
There was a problem hiding this comment.
These should read "Draw a [spatial method] on the map to select a spatial extent"
| const buttons = drawToolbar.querySelectorAll('.leaflet-draw-draw-circle, .leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle, .leaflet-draw-draw-marker') | ||
| buttons.forEach((button) => { | ||
| if (button.classList.contains('leaflet-draw-draw-circle')) { | ||
| button.setAttribute('aria-label', 'Draw a spatial circle') |
There was a problem hiding this comment.
These arent matching what I had suggested in my previous comments. "Draw a spatial circle" should be "Draw a circle on the map to select a spatial extent". The other selection methods need to be updated as well.
| @@ -536,13 +536,13 @@ const SpatialSelection = (props) => { | |||
| const buttons = drawToolbar.querySelectorAll('.leaflet-draw-draw-circle, .leaflet-draw-draw-polygon, .leaflet-draw-draw-rectangle, .leaflet-draw-draw-marker') | |||
| buttons.forEach((button) => { | |||
| if (button.classList.contains('leaflet-draw-draw-circle')) { | |||
| button.setAttribute('aria-label', 'Draw a spatial circle') | |||
| button.setAttribute('aria-label', 'Draw a spatial circle on the map to select a spatial extent') | |||
There was a problem hiding this comment.
This should say "Draw a circle..." not "Draw a spatial circle...". Same for all the other methods.
Overview
What is the feature?
Ensuring the spatial buttons and consistent in both order and style, and adding aria-labels to them.
What is the Solution?
Updating the icons for spatial filter buttons to all match the same visual style. Making the spatial dropdown filters be left-aligned. Adding aria-labels to all the spatial filter buttons.
What areas of the application does this impact?
Testing
Reproduction steps
Attachments
Checklist