WV-2810 ESLint Cleanup: Accessibility Part 2 (#5654)

* Refactor button elements and styles for improved accessibility and consistency across components * Refactor components to use buttons for better accessibility and interaction * Update snapshots to replace div elements with buttons for improved accessibility * Refactor selectors and test cases to replace div elements with buttons for improved accessibility * Refactor timeline controls to improve button styling and accessibility * Remove border from zoom level change arrows for improved styling * Refactor timeline button styles to remove unnecessary borders for improved aesthetics
nasa-gibs · Jan 21, 2025 · a15ec6c · a15ec6c
1 parent 2b0b380
commit a15ec6c
Show file tree

Hide file tree

Showing 50 changed files with 317 additions and 146 deletions.
diff --git a/e2e/features/animation/animation-test.spec.js b/e2e/features/animation/animation-test.spec.js
@@ -64,8 +64,8 @@ test('Disable playback when max frames exceeded', async () => {
   const { playButton, yearStartInput } = selectors
   await page.goto(animationGeostationary)
   await closeModal(page)
-  const animateYearDown = page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg.downarrow').first()
-  const animateYearUp = page.locator('.wv-date-range-selector > div > div > div > svg.uparrow').first()
+  const animateYearDown = page.locator('.wv-date-range-selector > div > div > button:nth-child(3) > svg.downarrow').first()
+  const animateYearUp = page.locator('.wv-date-range-selector > div > div > button > svg.uparrow').first()
   await animateYearDown.click()
   await expect(playButton).toHaveClass(/disabled/)
   // Playback re-enabled when frames within the max

diff --git a/e2e/features/compare/compare-mobile-test.spec.js b/e2e/features/compare/compare-mobile-test.spec.js
@@ -23,16 +23,16 @@ test.afterAll(async () => {
 test('Mobile comparison A|B toggle buttons are visible and only A is selected by default', async () => {
   await page.goto(swipeAndAIsActive)
   await closeModal(page)
-  const aMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(1)')
-  const bMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(2)')
+  const aMobileCompareButton = page.locator('#compare-toggle-selected-A')
+  const bMobileCompareButton = page.locator('#compare-toggle-selected-B')
   await expect(aMobileCompareButton).toHaveClass(/compare-btn-selected/)
   await expect(bMobileCompareButton).not.toHaveClass(/compare-btn-selected/)
 })
 
 // toggle select B change compare mode date to B
 test('Toggling to B compare side changes mobile date picker date', async () => {
   const { mobileDatePickerSelectButton } = selectors
-  const bMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(2)')
+  const bMobileCompareButton = page.locator('#compare-toggle-selected-B')
   // confirm initial A mobile date picker date
   await expect(mobileDatePickerSelectButton).toHaveText('2018 AUG 17')
   // click B compare toggle button and confirm B mobile date picker date
@@ -63,8 +63,8 @@ test('Expand mobile layer list and confirm comparison mode button is present and
 // B compare button toggle is selected on B permalink load and A is not selected
 test('B compare button toggle is only selected on B permalink load', async () => {
   await page.goto(spyAndBIsActive)
-  const aMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(1)')
-  const bMobileCompareButton = page.locator('.comparison-mobile-select-toggle > div:nth-child(2)')
+  const aMobileCompareButton = page.locator('#compare-toggle-selected-A')
+  const bMobileCompareButton = page.locator('#compare-toggle-selected-B')
   await expect(aMobileCompareButton).not.toHaveClass(/compare-btn-selected/)
   await expect(bMobileCompareButton).toHaveClass(/compare-btn-selected/)
 })

diff --git a/e2e/features/timeline/timeline-test.spec.js b/e2e/features/timeline/timeline-test.spec.js
@@ -51,7 +51,7 @@ test('Interval defaults to 1 DAY', async () => {
 })
 
 test('Change to month zoom level and axis changes', async () => {
-  await page.locator('.zoom-level-change div.date-arrows.date-arrow-up').click()
+  await page.locator('.zoom-level-change button.date-arrows.date-arrow-up').click()
   const axisGridDay = await page.locator('.axis-grid-text-day').first()
   const axisGridMonth = await page.locator('.axis-grid-text-month').first()
   const currentZoom = await page.locator('#current-zoom')
@@ -61,8 +61,8 @@ test('Change to month zoom level and axis changes', async () => {
 })
 
 test('Change to year zoom level and axis changes', async () => {
-  await page.locator('.zoom-level-change div.date-arrows.date-arrow-up').click()
-  await page.locator('.zoom-level-change div.date-arrows.date-arrow-up').click()
+  await page.locator('.zoom-level-change button.date-arrows.date-arrow-up').click()
+  await page.locator('.zoom-level-change button.date-arrows.date-arrow-up').click()
   const axisGridDay = await page.locator('.axis-grid-text-day').first()
   const axisGridYear = await page.locator('.axis-grid-text-year').first()
   const currentZoom = await page.locator('#current-zoom')

diff --git a/e2e/test-utils/global-variables/selectors.js b/e2e/test-utils/global-variables/selectors.js
@@ -15,8 +15,8 @@ module.exports = (page) => ({
   animationButtonCase: page.locator('#timeline-header .animate-button'),
   animationButton: page.locator('.animate-button'),
   playButton: page.locator('#play-button'),
-  animateYearUp: page.locator('.wv-date-range-selector > div > div:nth-child(2) > div > svg.uparrow'),
-  animateYearDown: page.locator('.wv-date-range-selector > div > div > div:nth-child(3) > svg.downarrow'),
+  animateYearUp: page.locator('.wv-date-range-selector > div > div:nth-child(2) > button > svg.uparrow'),
+  animateYearDown: page.locator('.wv-date-range-selector > div > div > button:nth-child(3) > svg.downarrow'),
   yearStartInput: page.locator('#year-animation-widget-start'),
   monthStartInput: page.locator('#month-animation-widget-start'),
   dayStartInput: page.locator('#day-animation-widget-start'),
@@ -112,12 +112,12 @@ module.exports = (page) => ({
   dragger: page.locator('.timeline-dragger'),
   draggerA: page.locator('.timeline-dragger.draggerA'),
   draggerB: page.locator('.timeline-dragger.draggerB'),
-  dayDown: page.locator('.input-wrapper-day > div.date-arrows.date-arrow-down'),
-  dayUp: page.locator('.input-wrapper-day > div.date-arrows.date-arrow-up'),
-  monthDown: page.locator('.input-wrapper-month > div.date-arrows.date-arrow-down'),
-  monthUp: page.locator('.input-wrapper-month > div.date-arrows.date-arrow-up'),
-  yearDown: page.locator('.input-wrapper-year > div.date-arrows.date-arrow-down'),
-  yearUp: page.locator('.input-wrapper-year > div.date-arrows.date-arrow-up'),
+  dayDown: page.locator('.input-wrapper-day > button.date-arrows.date-arrow-down'),
+  dayUp: page.locator('.input-wrapper-day > button.date-arrows.date-arrow-up'),
+  monthDown: page.locator('.input-wrapper-month > button.date-arrows.date-arrow-down'),
+  monthUp: page.locator('.input-wrapper-month > button.date-arrows.date-arrow-up'),
+  yearDown: page.locator('.input-wrapper-year > button.date-arrows.date-arrow-down'),
+  yearUp: page.locator('.input-wrapper-year > button.date-arrows.date-arrow-up'),
   datePickerWheel: page.locator('.datepicker-modal .datepicker-wheel'),
   dateSelectorDayInput: page.locator('#date-selector-main .input-wrapper-day input'),
   dateSelectorMonthInput: page.locator('#date-selector-main .input-wrapper-month input'),

diff --git a/web/.eslintrc b/web/.eslintrc
@@ -100,7 +100,6 @@
         "import/no-cycle": "warn",
         // Accesibility rules overrides
         "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
         "react/jsx-props-no-spreading": "warn",                   // 6 errors across 2 files
         "react/jsx-filename-extension": "off",                    // 206 errors across 206 files

diff --git a/web/js/components/compare/mobile-toggle.js b/web/js/components/compare/mobile-toggle.js
@@ -10,39 +10,50 @@ function MobileComparisonToggle (props) {
     toggleActiveCompareState,
   } = props;
 
-  const [isCompareASelected, toggleCompareASelected] = useState(isCompareA);
+  const [isCompareASelected, setCompareASelected] = useState(isCompareA);
   useEffect(() => {
     if (isCompareASelected !== isCompareA) {
-      toggleCompareASelected(isCompareA);
+      setCompareASelected(isCompareA);
     }
   }, [isCompareA]);
-  useEffect(() => {
-    if (isCompareASelected !== isCompareA) {
-      toggleActiveCompareState();
-    }
-  }, [isCompareASelected]);
+
+  if (isCompareASelected !== isCompareA) {
+    toggleActiveCompareState();
+  }
 
   if (!active) {
     return null;
   }
 
+  const handleClick = (evt) => {
+    if (evt.target.id === 'compare-toggle-selected-A') {
+      setCompareASelected(true);
+    } else {
+      setCompareASelected(false);
+    }
+  };
+
   const classA = isCompareASelected ? 'compare-btn-selected' : '';
   const classB = !isCompareASelected ? 'compare-btn-selected' : '';
 
   return (
     <div className="comparison-mobile-select-toggle">
-      <div
+      <button
+        type="button"
+        id="compare-toggle-selected-A"
         className={`compare-toggle-selected-btn ${classA}`}
-        onClick={() => toggleCompareASelected(true)}
+        onClick={handleClick}
       >
         A
-      </div>
-      <div
+      </button>
+      <button
+        type="button"
+        id="compare-toggle-selected-B"
         className={`compare-toggle-selected-btn ${classB}`}
-        onClick={() => toggleCompareASelected(false)}
+        onClick={handleClick}
       >
         B
-      </div>
+      </button>
     </div>
   );
 }

diff --git a/web/js/components/image-download/lat-long-inputs.js b/web/js/components/image-download/lat-long-inputs.js
@@ -98,15 +98,19 @@ function LatLongSelect(props) {
 
   return (
     <div className="wv-image-input-case">
-      <div className="wv-image-input-title" onClick={() => { setShowCoordinates(!showCoordinates); }}>
+      <button
+        type="button"
+        className="wv-image-input-title"
+        onClick={() => { setShowCoordinates(!showCoordinates); }}
+      >
         <span>{coordText}</span>
         <span
           title="Hide coordinates"
           className="wv-image-collapse-latlong"
         >
           <FontAwesomeIcon icon="caret-right" size="lg" rotation={showCoordinates ? 90 : 0} />
         </span>
-      </div>
+      </button>
       {showCoordinates && (
         <>
           <div className="row">

diff --git a/web/js/components/layer/info/date-ranges.js b/web/js/components/layer/info/date-ranges.js
@@ -67,7 +67,7 @@ export default function DateRanges ({ layer }) {
       >
         <button
           type="button"
-          style={{ background: 'none', border: 'none', color: 'white' }}
+          style={{ background: 'none', border: 'none', color: 'inherit' }}
           onClick={() => {
             getDateRanges();
             setShowRanges(!showRanges);

diff --git a/web/js/components/layer/product-picker/browse/category-layer-row.js b/web/js/components/layer/product-picker/browse/category-layer-row.js
@@ -210,7 +210,8 @@ class CategoryLayerRow extends React.Component {
         id={`accordion-${category.id}-${measurement.id}`}
         key={`${category.id}-${measurement.id}`}
       >
-        <div
+        <button
+          type="button"
           onClick={() => selectMeasurement(id)}
           className="measurement-row-header"
         >
@@ -219,7 +220,7 @@ class CategoryLayerRow extends React.Component {
           {isSelected
             ? <FontAwesomeIcon icon="chevron-circle-down" className="arrow-icon" />
             : <FontAwesomeIcon icon="chevron-circle-right" className="arrow-icon" />}
-        </div>
+        </button>
         {isSelected ? this.renderContent() : ''}
       </div>
     );

diff --git a/web/js/components/layer/product-picker/browse/measurement-metadata-detail.js b/web/js/components/layer/product-picker/browse/measurement-metadata-detail.js
@@ -87,14 +87,15 @@ function MeasurementMetadataDetail (props) {
           {renderMetadataForLayers()}
         </div>
         {doesMetaDataNeedExpander && (
-          <div
+          <button
+            type="button"
             className="metadata-more"
             onClick={() => setMetadataExpansion(!isMetadataExpanded)}
           >
             <span className={isMetadataExpanded ? 'ellipsis up' : 'ellipsis'}>
               {isMetadataExpanded ? '^' : '...'}
             </span>
-          </div>
+          </button>
         )}
       </div>
     );

diff --git a/web/js/components/layer/product-picker/search/filter-chips.js b/web/js/components/layer/product-picker/search/filter-chips.js
@@ -23,7 +23,8 @@ export default function FilterChips(props) {
       {filterValues.map(({
         field, displayValue, value,
       }) => (
-        <div
+        <button
+          type="button"
           key={field + value}
           className="filter-chip"
           onClick={() => removeFilter(field, value)}
@@ -33,7 +34,7 @@ export default function FilterChips(props) {
             icon="times"
             fixedWidth
           />
-        </div>
+        </button>
       ))}
     </div>
   );

diff --git a/web/js/components/layer/product-picker/search/search-layer-row.js b/web/js/components/layer/product-picker/search/search-layer-row.js
@@ -162,7 +162,7 @@ class SearchLayerRow extends React.Component {
             </UncontrolledTooltip>
           </div>
         )}
-        <div className={headerClassName} onClick={this.onRowClick}>
+        <button type="button" className={headerClassName} onClick={this.onRowClick}>
           <RenderSplitLayerTitle layer={layer} />
           {recentLayerMode && showDeleteIcon && (
             <Button
@@ -174,7 +174,7 @@ class SearchLayerRow extends React.Component {
               <FontAwesomeIcon icon="trash" />
             </Button>
           )}
-        </div>
+        </button>
       </div>
     );
   }

diff --git a/web/js/components/location-search/coordinates-dialog.js b/web/js/components/location-search/coordinates-dialog.js
@@ -152,7 +152,8 @@ class CoordinatesDialog extends Component {
     const tooltipVisibilityCondition = !isMobile && !isCopyToClipboardTooltipVisible && showTooltips;
 
     return (
-      <div
+      <button
+        type="button"
         id={buttonId}
         className={buttonId}
         onClick={() => this.copyToClipboard(formattedCoordinates)}
@@ -169,7 +170,7 @@ class CoordinatesDialog extends Component {
           </UncontrolledTooltip>
         )}
         <FontAwesomeIcon icon="copy" fixedWidth />
-      </div>
+      </button>
     );
   };
 

diff --git a/web/js/components/map/__snapshots__/coordinates.test.js.snap b/web/js/components/map/__snapshots__/coordinates.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`formats coordinate in latlon-dd format 1`] = `"<div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">0.0000°, 0.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div>"`;
+exports[`formats coordinate in latlon-dd format 1`] = `"<button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">0.0000°, 0.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button>"`;
 
-exports[`formats coordinate in latlon-dm format 1`] = `"<div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord"> 0°00.000'N,   0°00.000'E</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div>"`;
+exports[`formats coordinate in latlon-dm format 1`] = `"<button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord"> 0°00.000'N,   0°00.000'E</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button>"`;
 
-exports[`formats coordinate in latlon-dms format 1`] = `"<div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord"> 0°00'00"N,   0°00'00"E</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div>"`;
+exports[`formats coordinate in latlon-dms format 1`] = `"<button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord"> 0°00'00"N,   0°00'00"E</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button>"`;
diff --git a/web/js/components/map/__snapshots__/ol-coordinates.test.js.snap b/web/js/components/map/__snapshots__/ol-coordinates.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`clears coordinates when mouse moves off the map 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"></div>"`;
 
-exports[`reprojects (0,0) to (-45, 90) for EPSG:3413 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">90.0000°, -45.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:3413</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div></div>"`;
+exports[`reprojects (0,0) to (-45, 90) for EPSG:3413 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">90.0000°, -45.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:3413</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button></div>"`;
 
-exports[`shows 20°00.000'N, 10°00.000'E when set to degrees and minutes format 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">20.0000°, 10.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div></div>"`;
+exports[`shows 20°00.000'N, 10°00.000'E when set to degrees and minutes format 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">20.0000°, 10.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button></div>"`;
 
-exports[`shows coordinates of (-160, 20) when moving the mouse over wrapped 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">20.0000°, -160.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div></div>"`;
+exports[`shows coordinates of (-160, 20) when moving the mouse over wrapped 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">20.0000°, -160.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button></div>"`;
 
-exports[`shows coordinates of (10, 20) when moving the mouse 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><div id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">20.0000°, 10.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></div></div>"`;
+exports[`shows coordinates of (10, 20) when moving the mouse 1`] = `"<div id="ol-coords-case" class="wv-coords-container" style="width: 230px;"><button type="button" id="coords-panel" class="wv-coords-map wv-coords-map-btn"><span class="map-coord">20.0000°, 10.0000°</span><div class="map-coord-format"><span class="map-coord">EPSG:4326</span><div aria-label="Change coordinates format" class="coord-btn"><i class="coord-switch"></i></div></div></button></div>"`;
diff --git a/web/js/components/map/coordinates.js b/web/js/components/map/coordinates.js
@@ -38,7 +38,8 @@ export default class Coordinates extends React.Component {
     );
 
     return (
-      <div
+      <button
+        type="button"
         id="coords-panel"
         className="wv-coords-map wv-coords-map-btn"
         onClick={this.changeFormat}
@@ -54,7 +55,7 @@ export default class Coordinates extends React.Component {
             <i className="coord-switch" />
           </div>
         </div>
-      </div>
+      </button>
     );
   }
 }

diff --git a/web/js/components/measure-tool/measure-tooltip.js b/web/js/components/measure-tool/measure-tooltip.js
@@ -125,9 +125,9 @@ export default function MeasureTooltip(props) {
       <div className={`tooltip-measure tooltip-custom-black ${activeStaticClass}`}>
         <span dangerouslySetInnerHTML={{ __html: tooltipValue }} />
         {!active && (
-          <span className="close-tooltip" onClick={onRemove} onTouchEnd={onRemove}>
+          <button type="button" className="close-tooltip" onClick={onRemove} onTouchEnd={onRemove}>
             <FontAwesomeIcon icon="times" fixedWidth />
-          </span>
+          </button>
         )}
       </div>
     );

diff --git a/web/js/components/sidebar/event.js b/web/js/components/sidebar/event.js
@@ -126,6 +126,7 @@ function Event (props) {
                   <span
                     className="active"
                     onClick={(e) => e.stopPropagation()}
+                    onKeyDown={(e) => e.stopPropagation()}
                   >
                     {formatDisplayDate(date)}
                   </span>