From 11ac2a590b6f483e953be62bcc7fd67a64ee72da Mon Sep 17 00:00:00 2001 From: Patrick Moulden Date: Thu, 9 Jan 2025 09:32:45 -0500 Subject: [PATCH 1/4] Enhance accessibility by adding focus and blur event handlers, updating elements to use buttons, and improving ARIA attributes across various components. --- web/.eslintrc | 12 +- web/js/components/compare/opacity-slider.js | 8 +- web/js/components/layer/info/date-ranges.js | 13 +- .../browse/measurement-metadata-detail.js | 1 + .../search/layer-metadata-detail.js | 2 +- .../layer/settings/imagery-search.js | 13 +- .../layer/settings/layer-settings.js | 29 --- web/js/components/layer/settings/palette.js | 4 +- .../components/layer/settings/vector-style.js | 187 ------------------ .../location-search/location-marker.js | 24 ++- web/js/components/map/rotation.js | 3 + web/js/components/sidebar/event.js | 58 +++--- .../smart-handoffs/smart-handoff-modal.js | 2 +- .../custom-interval-selector.js | 1 - .../timeline/timeline-axis/timeline-axis.js | 2 + .../axis-timescale-change-tooltip.js | 4 +- web/js/components/tooltip/tooltip.js | 68 ------- web/js/components/tour/tour-box.js | 2 + web/js/components/util/switch.js | 3 + web/js/containers/sidebar/layer-row.js | 2 + web/js/containers/sidebar/layers-container.js | 34 ++-- 21 files changed, 117 insertions(+), 355 deletions(-) delete mode 100644 web/js/components/layer/settings/vector-style.js delete mode 100644 web/js/components/tooltip/tooltip.js diff --git a/web/.eslintrc b/web/.eslintrc index 2b60e11521..c316732a14 100644 --- a/web/.eslintrc +++ b/web/.eslintrc @@ -99,14 +99,14 @@ // Import rules overrides "import/no-cycle": "warn", // Accesibility rules overrides - "jsx-a11y/no-noninteractive-tabindex": "off", // 2 errors across 2 files - "jsx-a11y/no-noninteractive-element-interactions": "off", // 5 errors across 5 files - "jsx-a11y/anchor-has-content": "off", // 1 error across 1 files - "jsx-a11y/control-has-associated-label": "off", // 1 error across 1 files + "jsx-a11y/no-noninteractive-tabindex": "error", // 2 errors across 2 files + "jsx-a11y/no-noninteractive-element-interactions": "error", // 5 errors across 5 files + "jsx-a11y/anchor-has-content": "error", // 1 error across 1 files + "jsx-a11y/control-has-associated-label": "error", // 1 error across 1 files "jsx-a11y/anchor-is-valid": "off", // 24 errors across 13 files - "jsx-a11y/label-has-associated-control": "off", // 5 errors across 4 files + "jsx-a11y/label-has-associated-control": "error", // 5 errors across 4 files "jsx-a11y/alt-text": "off", // 15 errors across 10 files - "jsx-a11y/mouse-events-have-key-events": "off", // 7 errors across 4 files + "jsx-a11y/mouse-events-have-key-events": "error", // 7 errors across 4 files "jsx-a11y/no-static-element-interactions": "off", // 71 errors across 39 files "jsx-a11y/click-events-have-key-events": "off", // 70 errors across 39 files // React rules overrides diff --git a/web/js/components/compare/opacity-slider.js b/web/js/components/compare/opacity-slider.js index 6b370ba3ba..df13798830 100644 --- a/web/js/components/compare/opacity-slider.js +++ b/web/js/components/compare/opacity-slider.js @@ -48,12 +48,12 @@ function OpacitySlider ({ return (
- +

{currentValue} @@ -68,12 +68,12 @@ function OpacitySlider ({ style={{ '--value-percent': `${currentValue}%` }} />
- +

); } diff --git a/web/js/components/layer/info/date-ranges.js b/web/js/components/layer/info/date-ranges.js index d3157c7e4b..882bedc891 100644 --- a/web/js/components/layer/info/date-ranges.js +++ b/web/js/components/layer/info/date-ranges.js @@ -64,12 +64,15 @@ export default function DateRanges ({ layer }) { <> { - getDateRanges(); - setShowRanges(!showRanges); - }} > - *View Dates + { + getDateRanges(); + setShowRanges(!showRanges); + }} + > + *View Dates +
- +
diff --git a/web/js/components/layer/settings/imagery-search.js b/web/js/components/layer/settings/imagery-search.js index 7d43f71a6c..54190064f0 100644 --- a/web/js/components/layer/settings/imagery-search.js +++ b/web/js/components/layer/settings/imagery-search.js @@ -119,10 +119,19 @@ export default function ImagerySearch({ layer }) { }, [page]); const renderDates = () => { + const buttonStyle = { + width: '100%', + background: 'none', + color: 'white', + border: 'none', + textAlign: 'left', + }; const granuleDates = [...olderGranuleDates, ...newerGranuleDates].sort((a, b) => Date.parse(b) - Date.parse(a)); const renderedDates = [...new Set(granuleDates.map((date) => date.toLocaleDateString('en-US', dateOptions)))].map((date, i) => ( -
  • handleSelection(date)}> - {date} +
  • +
    • )); return renderedDates; diff --git a/web/js/components/layer/settings/layer-settings.js b/web/js/components/layer/settings/layer-settings.js index 7997da04ed..d8062e4c42 100644 --- a/web/js/components/layer/settings/layer-settings.js +++ b/web/js/components/layer/settings/layer-settings.js @@ -10,7 +10,6 @@ import Opacity from './opacity'; import Palette from './palette'; import BandSelection from './band-selection/band-selection-parent-info-menu'; import AssociatedLayers from './associated-layers-toggle'; -import VectorStyle from './vector-style'; import PaletteThreshold from './palette-threshold'; import GranuleLayerDateList from './granule-date-list'; import GranuleCountSlider from './granule-count-slider'; @@ -268,34 +267,6 @@ class LayerSettings extends React.Component { ); } - /** - * Render Opacity, threshold, and custom palette options - */ - renderVectorStyles() { - const { - setStyle, - clearStyle, - groupName, - layer, - vectorStyles, - } = this.props; - let customStyle; - if (layer.custom && layer.custom[0]) { - [customStyle] = layer.custom; - } - return ( - - ); - } - /** * Render Granule count slider and granule date list settings (if granule layer) */ diff --git a/web/js/components/layer/settings/palette.js b/web/js/components/layer/settings/palette.js index eb6e96fe08..c70d0bb226 100644 --- a/web/js/components/layer/settings/palette.js +++ b/web/js/components/layer/settings/palette.js @@ -60,7 +60,7 @@ function PaletteSelect (props) { onClick={() => onChangePalette(id)} /> {isSelected && ( - + )}