WV-2809 eslint

web/.eslintrc

@@ -99,14 +99,6 @@
         // 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/anchor-is-valid": "off",                        // 24 errors across 13 files
-        "jsx-a11y/label-has-associated-control": "off",           // 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/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

web/js/components/animation-widget/gif-button.js

@@ -93,7 +93,8 @@ function GifButton(props) {
 
   return (
     <>
-      <a
+      <button
+        type="button"
         id="create-gif-button"
         aria-label={labelText}
         className={gifDisabled ? 'wv-icon-case no-drag disabled' : 'wv-icon-case no-drag'}
@@ -111,7 +112,7 @@ function GifButton(props) {
         >
           {showWarning ? warningMessage : labelText}
         </UncontrolledTooltip>
-      </a>
+      </button>
       {isGifActive && <GifContainer onClose={onCloseGif} />}
     </>
   );

web/js/components/animation-widget/gif-post-creation.js

@@ -61,7 +61,7 @@ export default class GifResults extends Component {
         <ModalHeader close={closeBtn}>GIF Results</ModalHeader>
         <ModalBody>
           <div className="gif-results-dialog-case clearfix">
-            <img src={blobURL} width={imgElWidth} height={imgElHeight} />
+            <img alt="GIF preview" src={blobURL} width={imgElWidth} height={imgElHeight} />
             <div
               className="gif-results-dialog"
               style={{ minHeight: 210 }}

web/js/components/animation-widget/loop-button.js

@@ -12,7 +12,8 @@ function LoopButton({ looping, onLoop, isMobile }) {
   const labelText = looping ? 'Disable animation loop' : 'Enable animation loop';
   const buttonId = 'loop-button';
   return (
-    <a
+    <button
+      type="button"
       id={buttonId}
       aria-label={labelText}
       className={
@@ -33,7 +34,7 @@ function LoopButton({ looping, onLoop, isMobile }) {
           </UncontrolledTooltip>
         )}
       <FontAwesomeIcon icon="retweet" className="wv-animation-widget-icon" />
-    </a>
+    </button>
   );
 }
 

web/js/components/animation-widget/play-button.js

@@ -18,7 +18,8 @@ function PlayButton({
   const onClick = isDisabled ? () => {} : playing ? pause : play;
 
   return (
-    <a
+    <button
+      type="button"
       id={buttonId}
       aria-label={labelText}
       className={`wv-anim-play-case wv-icon-case no-drag ${isDisabled ? 'disabled' : ''}`}
@@ -36,7 +37,7 @@ function PlayButton({
       {playing
         ? <FontAwesomeIcon icon="pause" className="wv-animation-widget-icon" />
         : <FontAwesomeIcon icon="play" className="wv-animation-widget-icon" />}
-    </a>
+    </button>
   );
 }
 

web/js/components/compare/alert.js

@@ -10,22 +10,22 @@ function CompareAlertModalBody() {
             Select the respective tab (A or B) in order to update the layers
             and date of that state.
           </p>
-          <img src="images/ab-tabs.png" />
+          <img alt="A-B tabs" src="images/ab-tabs.png" />
         </li>
         <li className="compare-dialog-list-item">
           <p>
             There are now two time sliders on the timeline. You can click on
             the deactivated time slider to activate that state and change the
             date.
           </p>
-          <img src="images/ab-picks.png" />
+          <img alt="A-B picks" src="images/ab-picks.png" />
         </li>
         <li className="compare-dialog-list-item">
           <p>
             There are three compare modes. You can choose different modes
             using the selection at the bottom of the layer list.
           </p>
-          <img src="images/ab-modes.png" />
+          <img alt="A-B modes" src="images/ab-modes.png" />
         </li>
       </ul>
     </div>

web/js/components/compare/opacity-slider.js

@@ -48,12 +48,12 @@ function OpacitySlider ({
 
   return (
     <div id="ab-slider-case" className="ab-slider-case" style={caseStyle}>
-      <label className="wv-slider-label left" style={labelStyle}>
+      <p className="wv-slider-label left" style={labelStyle}>
         <h4 className="left">
           <span>A</span>
           <MonospaceDate date={dateAText} />
         </h4>
-      </label>
+      </p>
       <div className="input-range">
         <div className="range-tooltip">
           {currentValue}
@@ -68,12 +68,12 @@ function OpacitySlider ({
           style={{ '--value-percent': `${currentValue}%` }}
         />
       </div>
-      <label className="wv-slider-label right" style={labelStyle}>
+      <p className="wv-slider-label right" style={labelStyle}>
         <h4 className="right">
           <span>B</span>
           <MonospaceDate date={dateBText} />
         </h4>
-      </label>
+      </p>
     </div>
   );
 }

web/js/components/feature-alert/vector-alert-modal.js

@@ -50,7 +50,7 @@ function VectorAlertModalBody() {
           </p>
         </Col>
         <Col>
-          <img src="images/vector-alert.png" />
+          <img alt="Blue pointer icon" src="images/vector-alert.png" />
         </Col>
       </Row>
     </Container>

web/js/components/layer/info/date-ranges.js

@@ -64,12 +64,17 @@ export default function DateRanges ({ layer }) {
     <>
       <sup
         className="layer-date-ranges-button"
-        onClick={() => {
-          getDateRanges();
-          setShowRanges(!showRanges);
-        }}
       >
-        *View Dates
+        <button
+          type="button"
+          style={{ background: 'none', border: 'none', color: 'white' }}
+          onClick={() => {
+            getDateRanges();
+            setShowRanges(!showRanges);
+          }}
+        >
+          *View Dates
+        </button>
       </sup>
       <div
         style={style}

web/js/components/layer/product-picker/browse/category-cell.js

@@ -33,13 +33,15 @@ function CategoryCell(props) {
       <div className="category-background-cover" style={categoryBgImage}>
         <div className="category-background-cover">
           <h3>
-            <a
+            <button
+              type="button"
+              style={{ border: 'none', textAlign: 'left' }}
               className="layer-category-name"
               alt={category.title}
               onClick={() => drawMeasurements(category)}
             >
               {category.title}
-            </a>
+            </button>
           </h3>
           <ul>
             {category.measurements
@@ -71,12 +73,13 @@ function CategoryCell(props) {
                       /* eslint react/no-array-index-key: 1 */
                     key={category.id + index}
                   >
-                    <a
+                    <button
+                      type="button"
                       className="layer-category-name"
                       onClick={() => drawMeasurements(category)}
                     >
                       ...
-                    </a>
+                    </button>
                   </li>
                 ) : (
                   <li
@@ -86,12 +89,13 @@ function CategoryCell(props) {
                         `layer-category-item-${category.id}-${current.id}`
                       }
                   >
-                    <a
+                    <button
+                      type="button"
                       className="layer-category-name"
                       onClick={() => drawMeasurements(category, current.id, index)}
                     >
                       {current.title}
-                    </a>
+                    </button>
                     {' '}
                   </li>
                 );

web/js/components/layer/product-picker/browse/measurement-metadata-detail.js

@@ -58,8 +58,10 @@ function MeasurementMetadataDetail (props) {
                 href={`images/layers/previews/${selectedProjection}/${l.id}.jpg`}
                 rel="noopener noreferrer"
                 target="_blank"
+                aria-label="View layer preview"
               >
                 <img
+                  alt="Layer preview"
                   className="img-fluid layer-preview"
                   src={`images/layers/previews/${selectedProjection}/${l.id}.jpg`}
                 />

web/js/components/layer/product-picker/search/layer-metadata-detail.js

@@ -64,8 +64,8 @@ class LayerMetadataDetail extends React.Component {
         {showPreviewImage
           && (
           <div className="text-center">
-            <a href={previewUrl} rel="noopener noreferrer" target="_blank">
-              <img className="img-fluid layer-preview" src={previewUrl} />
+            <a href={previewUrl} rel="noopener noreferrer" target="_blank" aria-label="View layer preview">
+              <img alt="Layer Preview" className="img-fluid layer-preview" src={previewUrl} />
             </a>
           </div>
           )}

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) => (
-      <li className="lazyload-list-item" key={date} onClick={() => handleSelection(date)}>
-        {date}
+      <li className="lazyload-list-item" key={date}>
+        <button type="button" style={buttonStyle} onClick={() => handleSelection(date)}>
+          {date}
+        </button>
       </li>
     ));
     return renderedDates;

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 (
-      <VectorStyle
-        setStyle={setStyle}
-        clearStyle={clearStyle}
-        activeVectorStyle={customStyle || layer.id}
-        layer={layer}
-        index={0}
-        groupName={groupName}
-        vectorStyles={vectorStyles}
-      />
-    );
-  }
-
   /**
    * Render Granule count slider and granule date list settings (if granule layer)
    */

web/js/components/layer/settings/palette.js

@@ -60,7 +60,7 @@ function PaletteSelect (props) {
           onClick={() => onChangePalette(id)}
         />
         {isSelected && (
-          <span class="dot" />
+          <span className="dot" />
         )}
         <label htmlFor={`wv-palette-radio-${id}-${index}`}>
           <span
@@ -103,10 +103,10 @@ function PaletteSelect (props) {
           onClick={() => onChangePalette(id)}
         />
         {isSelected && (
-          <span class="dot" />
+          <span className="dot" />
         )}
         <label htmlFor={`wv-palette-radio-${id}-${index}`}>
-          <img src={dataURL} />
+          <img alt="Color Palette" src={dataURL} />
           <span className="wv-palette-label">{legend.name || 'Default'}</span>
         </label>
       </div>