- 
+
);
}
diff --git a/web/js/components/location-search/coordinates-dialog.js b/web/js/components/location-search/coordinates-dialog.js
index 7706b57147..2639c2968a 100644
--- 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 (
-
+
);
};
diff --git a/web/js/components/map/__snapshots__/coordinates.test.js.snap b/web/js/components/map/__snapshots__/coordinates.test.js.snap
index d33df11cc7..b7cb7e7322 100644
--- 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`] = `"
)}
+
+
+
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 (
+
@@ -18,14 +18,14 @@ function CompareAlertModalBody() { the deactivated time slider to activate that state and change the date.
-
+
There are three compare modes. You can choose different modes using the selection at the bottom of the layer list.
-
+
-
+
);
}
diff --git a/web/js/components/feature-alert/vector-alert-modal.js b/web/js/components/feature-alert/vector-alert-modal.js
index ed005146ab..caa812c1a8 100644
--- a/web/js/components/feature-alert/vector-alert-modal.js
+++ b/web/js/components/feature-alert/vector-alert-modal.js
@@ -50,7 +50,7 @@ function VectorAlertModalBody() {
+
diff --git a/web/js/components/layer/info/date-ranges.js b/web/js/components/layer/info/date-ranges.js
index d3157c7e4b..b5bbd55b38 100644
--- a/web/js/components/layer/info/date-ranges.js
+++ b/web/js/components/layer/info/date-ranges.js
@@ -64,12 +64,17 @@ export default function DateRanges ({ layer }) {
<>
{
- getDateRanges();
- setShowRanges(!showRanges);
- }}
>
- *View Dates
+
diff --git a/web/js/components/layer/settings/vector-style.js b/web/js/components/layer/settings/vector-style.js
deleted file mode 100644
index 008e32f106..0000000000
--- a/web/js/components/layer/settings/vector-style.js
+++ /dev/null
@@ -1,187 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Scrollbar from '../../util/scrollbar';
-import { isConditional } from '../../../modules/vector-styles/util';
-
-class VectorStyleSelect extends React.Component {
- constructor(props) {
- super(props);
- this.state = {
- activeVectorStyle: props.activeVectorStyle,
- };
- }
-
- /**
- * Pass vector style to model after selection
- * @param {String} id | custom VectorStyle Id
- */
- onChangeVectorStyle(vectorStyleId) {
- const {
- layer, clearStyle, setStyle, groupName,
- } = this.props;
- setTimeout(() => {
- if (vectorStyleId === layer.id) {
- clearStyle(layer, vectorStyleId, groupName);
- } else {
- setStyle(layer, vectorStyleId, groupName);
- }
- }, 0);
- this.setState({ activeVectorStyle: vectorStyleId });
- }
-
- /**
- * Apply logic to render correct vectorStyle selection
- * @param {String} id | Legend Id
- */
- customLegend(styleLayerObject) {
- const { activeVectorStyle } = this.state;
- const description = styleLayerObject['source-description'] || styleLayerObject.id;
- const isConditionalStyling = styleLayerObject.paint ? isConditional(styleLayerObject.paint['line-color'] || styleLayerObject.paint['circle-color'] || styleLayerObject.paint['fill-color']) : false;
-
- return isConditionalStyling ? this.renderLegendMultiItem(
- styleLayerObject,
- styleLayerObject.id,
- description,
- )
- : this.renderSelectorItemSingle(
- styleLayerObject,
- styleLayerObject.id,
- description,
- activeVectorStyle === styleLayerObject.id,
- );
- }
-
- /**
- * Render classification legend when there are conditionals in the vectorstyles
- * @param {Object} vectorStyle | VectorStyle object
- * @param {String} id | colormap Id
- * @param {String} description | Colormap name
- */
- // eslint-disable-next-line class-methods-use-this
- renderLegendMultiItem(vectorStyle, vectorStyleId, description) {
- const caseDefaultClassName = 'wv-palette-selector-row ';
- const array = Array.from(vectorStyle.paint['line-color'] || vectorStyle.paint['circle-color'] || vectorStyle.paint['fill-color']);
- array.shift();
- const organizedArray = [];
- let temp = [];
- const chunk = 2;
- // https://stackoverflow.com/a/8495740/4589331
- for (let i = 0, j = array.length; i < j; i += chunk) {
- temp = array.slice(i, i + chunk);
- if (temp.length === 2) {
- const obj = {};
- if (temp[0].length === 3
- && typeof temp[0][2] === 'string'
- && typeof temp[1] === 'string'
- ) {
- [[,, obj.label], obj.color] = temp;
- organizedArray.push(obj);
- } else {
- console.warn('Irregular conditional');
- }
- } else if (temp.length === 1 && typeof temp[0] === 'string') {
- organizedArray.push({ label: 'Default', color: temp[0] });
- } else {
- console.warn('Irregular conditional');
- }
- }
- return organizedArray.map((obj, i) => (
- /* eslint react/no-array-index-key: 1 */
- { e.stopPropagation(); }}
>
{ rotateOnClick(-10); }}
onMouseUp={clearIntervalRotation}
onMouseOut={clearIntervalRotation}
+ onBlur={clearIntervalRotation}
onMouseMove={(e) => { e.stopPropagation(); }}
>
-
)}
{!isMobile &&
);
}
diff --git a/web/js/components/sidebar/event.js b/web/js/components/sidebar/event.js
index c8ff479698..70a15613bd 100644
--- a/web/js/components/sidebar/event.js
+++ b/web/js/components/sidebar/event.js
@@ -106,6 +106,11 @@ function Event (props) {
* Return date list for selected event
*/
function renderDateLists() {
+ const buttonStyle = {
+ background: 'none',
+ border: 'none',
+ color: 'blue',
+ };
if (event.geometry.length > 1) {
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..b5bbd55b38 100644
--- a/web/js/components/layer/info/date-ranges.js
+++ b/web/js/components/layer/info/date-ranges.js
@@ -64,12 +64,17 @@ export default function DateRanges ({ layer }) {
<>
{
- getDateRanges();
- setShowRanges(!showRanges);
- }}
>
- *View Dates
+
- drawMeasurements(category)} > {category.title} - +
-
{category.measurements
@@ -71,12 +73,13 @@ function CategoryCell(props) {
/* eslint react/no-array-index-key: 1 */
key={category.id + index}
>
- drawMeasurements(category)}
>
...
-
+
) : (
- - drawMeasurements(category, current.id, index)} > {current.title} - + {' '} ); 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 index f26ed8d1bc..9d1c3e8dbf 100644 --- a/web/js/components/layer/product-picker/browse/measurement-metadata-detail.js +++ b/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" >
- 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 ( -
diff --git a/web/js/components/layer/product-picker/search/layer-metadata-detail.js b/web/js/components/layer/product-picker/search/layer-metadata-detail.js
index 46551eadec..b0b80eb618 100644
--- a/web/js/components/layer/product-picker/search/layer-metadata-detail.js
+++ b/web/js/components/layer/product-picker/search/layer-metadata-detail.js
@@ -64,8 +64,8 @@ class LayerMetadataDetail extends React.Component {
{showPreviewImage
&& (
)}
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) => (
-
-
-
- ));
- }
-
- /**
- * Render classification customs when there is only one
- * Color in colormap
- * @param {Object} vectorStyle | VectorStyle object
- * @param {String} id | colormap Id
- * @param {String} description | Colormap name
- * @param {Boolean} isSelected | is this colormap active
- */
- renderSelectorItemSingle(vectorStyle, vectorStyleId, description, isSelected) {
- const color = vectorStyle.paint
- ? vectorStyle.paint['line-color'] || vectorStyle.paint['circle-color'] || vectorStyle.paint['fill-color']
- : 'rgb(255, 255, 255)';
- const caseDefaultClassName = 'wv-palette-selector-row wv-checkbox wv-checkbox-round gray ';
- const checkedClassName = isSelected ? 'checked' : '';
- return (
-
- this.onChangeVectorStyle(vectorStyleId)}
- />
- {isSelected && (
-
- )}
-
-
- );
- }
-
- render() {
- const { index, vectorStyles, layer } = this.props;
- const vectorStyleId = layer.vectorStyle.id;
- const vectorStyle = vectorStyles[vectorStyleId];
- const vectorStyleLayers = vectorStyle.layers;
-
- const uniqueStyleLayers = vectorStyleLayers.filter((a) => {
- if (!this[a.id]) {
- this[a.id] = true;
- return true;
- }
- return false;
- }, Object.create(null));
- return (
-
-
- {
- // eslint-disable-next-line array-callback-return
- uniqueStyleLayers.map((styleLayerObject) => {
- if (styleLayerObject && styleLayerObject) {
- const item = this.customLegend(styleLayerObject);
- return item;
- }
- })
- }
-
-
- );
- }
-}
-
-VectorStyleSelect.propTypes = {
- activeVectorStyle: PropTypes.string,
- clearStyle: PropTypes.func,
- groupName: PropTypes.string,
- index: PropTypes.number,
- layer: PropTypes.object,
- setStyle: PropTypes.func,
- vectorStyles: PropTypes.object,
-};
-
-export default VectorStyleSelect;
diff --git a/web/js/components/location-search/location-marker.js b/web/js/components/location-search/location-marker.js
index 1bedc59429..6d809b6a0f 100644
--- a/web/js/components/location-search/location-marker.js
+++ b/web/js/components/location-search/location-marker.js
@@ -33,6 +33,12 @@ export default function LocationMarker ({
const coordinates = [latitude, longitude];
const title = getDialogTitle(reverseGeocodeResults);
const [showDialog, setShowDialog] = useState(dialogVisible);
+ const buttonStyle = {
+ background: 'none',
+ color: 'white',
+ border: 'none',
+ textAlign: 'left',
+ };
return (
Vector Styles
-
@@ -46,13 +52,20 @@ export default function LocationMarker ({
tooltipId={tooltipId}
/>
)}
- 
setShowDialog(true)}
- />
+ >
+
+
);
}
diff --git a/web/js/components/map/rotation.js b/web/js/components/map/rotation.js
index 351f232c85..55690a5a6f 100644
--- a/web/js/components/map/rotation.js
+++ b/web/js/components/map/rotation.js
@@ -63,6 +63,7 @@ function Rotation() {
onMouseDown={() => { rotateOnClick(10); }}
onMouseUp={clearIntervalRotation}
onMouseOut={clearIntervalRotation}
+ onBlur={clearIntervalRotation}
onMouseMove={(e) => { e.stopPropagation(); }}
>
setShowDialog(true)}
- />
+ >
+
+
-
)
: (
- {
e.stopPropagation();
@@ -134,7 +141,7 @@ function Event (props) {
}}
>
{formatDisplayDate(date)}
-
+
)}
{magnitudeOutput(geometry)}
@@ -178,37 +185,49 @@ function Event (props) {
});
}
}
+ const buttonStyle = {
+ width: '100%',
+ background: 'none',
+ color: 'white',
+ border: 'none',
+ textAlign: 'left',
+ };
return (
);
}
diff --git a/web/js/components/smart-handoffs/smart-handoff-modal.js b/web/js/components/smart-handoffs/smart-handoff-modal.js
index a21a9c75cf..ef0e4ee10e 100644
--- a/web/js/components/smart-handoffs/smart-handoff-modal.js
+++ b/web/js/components/smart-handoffs/smart-handoff-modal.js
@@ -45,10 +45,10 @@ function SmartHandoffModal({
- - {dataEl} - - ))} -
@@ -69,7 +69,7 @@ function SmartHandoffModal({
viewport region in @NAME@ will be used to derive data granules within Earthdata Search.
- 
+
);
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
index e3cf77e96f..08834e5c9f 100644
--- 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 {
+ 
+
+
Granules that are available to download will be listed in the white pull out menu. Each granule listed can be downloaded individually or the entire set contained within the bounding box can be downloaded as a zip file. diff --git a/web/js/components/timeline/custom-interval-selector/custom-interval-selector.js b/web/js/components/timeline/custom-interval-selector/custom-interval-selector.js index 4514992d58..d016997056 100644 --- a/web/js/components/timeline/custom-interval-selector/custom-interval-selector.js +++ b/web/js/components/timeline/custom-interval-selector/custom-interval-selector.js @@ -60,7 +60,6 @@ function CustomIntervalSelector(props) {
{ customIntervalWidget = widget; }}
>
+
,
document.getElementById('wv-content'),
diff --git a/web/js/components/util/switch.js b/web/js/components/util/switch.js
index 316d3968e9..d639c3cd5b 100644
--- a/web/js/components/util/switch.js
+++ b/web/js/components/util/switch.js
@@ -1,3 +1,6 @@
+/* eslint-disable jsx-a11y/no-noninteractive-tabindex */
+/* eslint-disable jsx-a11y/label-has-associated-control */
+/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { Tooltip } from 'reactstrap';
diff --git a/web/js/containers/share.js b/web/js/containers/share.js
index 8f88a57f7b..f88d1036f9 100644
--- a/web/js/containers/share.js
+++ b/web/js/containers/share.js
@@ -293,7 +293,14 @@ class ShareLinkContainer extends Component {
{this.renderLayerChoices()} diff --git a/web/scss/features/anim-widget.scss b/web/scss/features/anim-widget.scss index 8b4c3075ab..8020280d95 100644 --- a/web/scss/features/anim-widget.scss +++ b/web/scss/features/anim-widget.scss @@ -162,6 +162,7 @@ } & > a, + & > button, & > div { display: inline-block; margin: 7px 0 0 10px; @@ -179,6 +180,8 @@ background: variables.$wv-dark-blue; position: relative; border-radius: 5px; + padding: 0; + border: none; &.disabled { cursor: not-allowed; @@ -260,7 +263,7 @@ } } -a .wv-animation-widget-icon { +button .wv-animation-widget-icon { font-size: 23px; color: #fff; position: absolute; diff --git a/web/scss/features/layer-categories.scss b/web/scss/features/layer-categories.scss index d306d8ac12..9c5b2d4cc4 100644 --- a/web/scss/features/layer-categories.scss +++ b/web/scss/features/layer-categories.scss @@ -170,6 +170,9 @@ overflow: hidden; box-sizing: border-box; text-decoration: none; + background: none; + text-align: left; + border: none; } & .layer-category-name:hover { diff --git a/web/scss/features/sidebar-panel.scss b/web/scss/features/sidebar-panel.scss index fca20a3693..300ab1f116 100644 --- a/web/scss/features/sidebar-panel.scss +++ b/web/scss/features/sidebar-panel.scss @@ -3,7 +3,7 @@ .sidebar-expand { position: relative; - > a { + > button { float: left; left: 10px; position: absolute; @@ -257,7 +257,7 @@ li.item.productsitem.inmotion, border-color: #fff; } -.productsitem a.visibility { +.productsitem button.visibility { width: 30px; background-color: #ccc; position: absolute; @@ -265,6 +265,11 @@ li.item.productsitem.inmotion, bottom: 0; cursor: pointer; border-right: 1px solid #333; + border-top: none; + border-bottom: none; + border-left: none; + text-align: left; + padding: 0; &.layer-enabled:hover { background: #fff; @@ -387,12 +392,15 @@ li.item.productsitem.inmotion, * End -- Granule active footprint toggle * ************************************/ -.productsitem a.wv-layers-info, -.productsitem a.wv-layers-options { +.productsitem button.wv-layers-info, +.productsitem button.wv-layers-options { position: relative; width: 20px; height: 20px; float: right; + border: none; + background:none; + padding: 0; } .productsitem.inmotion { @@ -400,9 +408,9 @@ li.item.productsitem.inmotion, list-style: none; } -.productsitem a.wv-layers-close:hover, -.productsitem a.wv-layers-info:hover, -.productsitem a.wv-layers-options:hover { +.productsitem button.wv-layers-close:hover, +.productsitem button.wv-layers-info:hover, +.productsitem button.wv-layers-options:hover { background: #fff; } @@ -413,7 +421,6 @@ li.item.productsitem.inmotion, text-align: center; border-radius: 50%; padding: 1px; - margin-top: 3px; } .layer-info svg.svg-inline--fa.wv-layers-options-icon { @@ -426,11 +433,11 @@ li.item.productsitem.inmotion, margin-left: -6px; } -.productsitem.layer-hidden a.wv-layers-options svg.svg-inline--fa.wv-layers-options-icon { +.productsitem.layer-hidden button.wv-layers-options svg.svg-inline--fa.wv-layers-options-icon { background-position: -21px -69px; } -.productsitem.layer-hidden a.wv-layers-options:hover svg.svg-inline--fa.wv-layers-options-icon { +.productsitem.layer-hidden button.wv-layers-options:hover svg.svg-inline--fa.wv-layers-options-icon { background-position: 0 -69px; } @@ -514,15 +521,17 @@ li.item.productsitem.inmotion, } } -.productsitem a.button.wv-layers-close { +.productsitem button.wv-layers-close { display: block; float: right; width: 20px; height: 20px; position: relative; + background: none; + border: none; } -.productsitem a.button.wv-layers-close svg.svg-inline--fa { +.productsitem button.wv-layers-close svg.svg-inline--fa { width: 12px; pointer-events: none; position: absolute; @@ -604,7 +613,7 @@ li.item.productsitem.inmotion, height: 42px; } -.productsitem.layer-hidden a.visibility { +.productsitem.layer-hidden button.visibility { background: #666; } @@ -613,12 +622,12 @@ li.item.productsitem.inmotion, cursor: default; } -.disabled.layer-hidden a.visibility:hover { +.disabled.layer-hidden button.visibility:hover { background: rgb(255 255 255 / 20%); cursor: default; } -.productsitem.disabled.layer-hidden a.visibility:hover svg.svg-inline--fa { +.productsitem.disabled.layer-hidden button.visibility:hover svg.svg-inline--fa { color: #c5c5c8; } @@ -694,7 +703,7 @@ li.item.productsitem.inmotion, margin-top: -13px; } - a.visibility { + button.visibility { width: 45px; } } diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss index 0e15394cec..096b05efe1 100644 --- a/web/scss/features/sidebar.scss +++ b/web/scss/features/sidebar.scss @@ -711,41 +711,41 @@ p.recharts-tooltip-label { } /* Layers Info */ -.sidebar-panel li.item a.wv-layers-info { +.sidebar-panel li.item button.wv-layers-info { color: #333; text-align: center; } -.sidebar-panel li.item a.wv-layers-info .wv-layers-info-icon { +.sidebar-panel li.item button.wv-layers-info .wv-layers-info-icon { border-color: #333; } -.sidebar-panel li.item a.wv-layers-info.disabled { +.sidebar-panel li.item button.wv-layers-info.disabled { color: #aaa; } -.sidebar-panel li.item a.wv-layers-info.disabled .wv-layers-info-icon { +.sidebar-panel li.item button.wv-layers-info.disabled .wv-layers-info-icon { border-color: #aaa; } -.sidebar-panel li.item a.wv-layers-info.disabled:hover { +.sidebar-panel li.item button.wv-layers-info.disabled:hover { cursor: no-drop; background-color: transparent; } -.sidebar-panel li.layer-hidden a.wv-layers-info { +.sidebar-panel li.layer-hidden button.wv-layers-info { color: #999; } -.sidebar-panel li.layer-hidden a.wv-layers-info .wv-layers-info-icon { +.sidebar-panel li.layer-hidden button.wv-layers-info .wv-layers-info-icon { border-color: #999; } -.sidebar-panel li.layer-hidden a.wv-layers-info.disabled { +.sidebar-panel li.layer-hidden button.wv-layers-info.disabled { color: #666; } -.sidebar-panel li.layer-hidden a.wv-layers-info.disabled .wv-layers-info-icon { +.sidebar-panel li.layer-hidden button.wv-layers-info.disabled .wv-layers-info-icon { border-color: #666; } From 2b0b3805fbceb862c45a3d04a894565dcebd3b43 Mon Sep 17 00:00:00 2001 From: Patrick Moulden <4834892+PatchesMaps@users.noreply.github.com> Date: Fri, 17 Jan 2025 13:12:26 -0500 Subject: [PATCH 3/6] dependency-updates-01-17-2025 (#5662) --- package-lock.json | 56 +++++++++++++++++++++++++---------------------- package.json | 14 ++++++------ 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 447853d517..fbcedfb59d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "p-queue": "^8.0.1", "proj4": "^2.15.0", "prop-types": "^15.8.1", - "qs": "^6.13.1", + "qs": "^6.14.0", "react": "^18.3.1", "react-beautiful-dnd": "^13.1.1", "react-device-detect": "^2.2.3", @@ -80,7 +80,7 @@ }, "devDependencies": { "@babel/core": "^7.26.0", - "@babel/eslint-parser": "^7.25.9", + "@babel/eslint-parser": "^7.26.5", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/preset-env": "^7.26.0", @@ -103,15 +103,15 @@ "eslint-config-standard": "^17.1.0", "eslint-import-resolver-webpack": "^0.13.10", "eslint-plugin-import": "^2.31.0", - "eslint-plugin-jest": "^28.10.0", + "eslint-plugin-jest": "^28.11.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-n": "^17.15.1", "eslint-plugin-no-storage": "^1.0.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^6.6.0", - "eslint-plugin-react": "^7.37.3", + "eslint-plugin-react": "^7.37.4", "express": "^4.21.0", - "glob": "^11.0.0", + "glob": "^11.0.1", "husky": "^9.1.7", "jest": "^29.7.0", "jest-canvas-mock": "^2.5.2", @@ -122,13 +122,13 @@ "node-ssh": "^13.2.0", "npm-run-all": "^4.1.5", "patch-package": "^8.0.0", - "postcss": "^8.4.49", + "postcss": "^8.5.1", "postcss-loader": "^8.1.1", "react-refresh": "^0.16.0", "react-test-renderer": "^18.3.1", "redux-mock-store": "^1.5.5", "run-script-os": "^1.1.6", - "sass": "^1.83.1", + "sass": "^1.83.4", "sass-loader": "^16.0.4", "shelljs": "^0.8.5", "showdown": "^2.1.0", @@ -217,7 +217,9 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.25.9", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.26.5.tgz", + "integrity": "sha512-Kkm8C8uxI842AwQADxl0GbcG1rupELYLShazYEZO/2DYjhyWXJIOUVOE3tBYm6JXzUCNJOZEzqc4rCW/jsEQYQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7623,9 +7625,9 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "28.10.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.10.0.tgz", - "integrity": "sha512-hyMWUxkBH99HpXT3p8hc7REbEZK3D+nk8vHXGgpB+XXsi0gO4PxMSP+pjfUzb67GnV9yawV9a53eUmcde1CCZA==", + "version": "28.11.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.11.0.tgz", + "integrity": "sha512-QAfipLcNCWLVocVbZW8GimKn5p5iiMcgGbRzz8z/P5q7xw+cNEpYqyzFMtIF/ZgF2HLOyy+dYBut+DoYolvqig==", "dev": true, "license": "MIT", "dependencies": { @@ -7797,9 +7799,9 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.37.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz", - "integrity": "sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==", + "version": "7.37.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz", + "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==", "dev": true, "license": "MIT", "dependencies": { @@ -8932,7 +8934,9 @@ } }, "node_modules/glob": { - "version": "11.0.0", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz", + "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==", "dev": true, "license": "ISC", "dependencies": { @@ -13897,9 +13901,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz", + "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==", "dev": true, "funding": [ { @@ -13917,7 +13921,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -14625,12 +14629,12 @@ "license": "MIT" }, "node_modules/qs": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz", - "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==", + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.0.6" + "side-channel": "^1.1.0" }, "engines": { "node": ">=0.6" @@ -15839,9 +15843,9 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.83.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.1.tgz", - "integrity": "sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==", + "version": "1.83.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz", + "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 68b278ac11..fa1b2e0d68 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ }, "devDependencies": { "@babel/core": "^7.26.0", - "@babel/eslint-parser": "^7.25.9", + "@babel/eslint-parser": "^7.26.5", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/preset-env": "^7.26.0", @@ -101,15 +101,15 @@ "eslint-config-standard": "^17.1.0", "eslint-import-resolver-webpack": "^0.13.10", "eslint-plugin-import": "^2.31.0", - "eslint-plugin-jest": "^28.10.0", + "eslint-plugin-jest": "^28.11.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-n": "^17.15.1", "eslint-plugin-no-storage": "^1.0.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^6.6.0", - "eslint-plugin-react": "^7.37.3", + "eslint-plugin-react": "^7.37.4", "express": "^4.21.0", - "glob": "^11.0.0", + "glob": "^11.0.1", "husky": "^9.1.7", "jest": "^29.7.0", "jest-canvas-mock": "^2.5.2", @@ -120,13 +120,13 @@ "node-ssh": "^13.2.0", "npm-run-all": "^4.1.5", "patch-package": "^8.0.0", - "postcss": "^8.4.49", + "postcss": "^8.5.1", "postcss-loader": "^8.1.1", "react-refresh": "^0.16.0", "react-test-renderer": "^18.3.1", "redux-mock-store": "^1.5.5", "run-script-os": "^1.1.6", - "sass": "^1.83.1", + "sass": "^1.83.4", "sass-loader": "^16.0.4", "shelljs": "^0.8.5", "showdown": "^2.1.0", @@ -183,7 +183,7 @@ "p-queue": "^8.0.1", "proj4": "^2.15.0", "prop-types": "^15.8.1", - "qs": "^6.13.1", + "qs": "^6.14.0", "react": "^18.3.1", "react-beautiful-dnd": "^13.1.1", "react-device-detect": "^2.2.3", From a15ec6c897de076f0c8e2d4386be108c6614deb9 Mon Sep 17 00:00:00 2001 From: Patrick Moulden <4834892+PatchesMaps@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:14:44 -0500 Subject: [PATCH 4/6] 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 --- e2e/features/animation/animation-test.spec.js | 4 +- .../compare/compare-mobile-test.spec.js | 10 ++--- e2e/features/timeline/timeline-test.spec.js | 6 +-- e2e/test-utils/global-variables/selectors.js | 16 +++---- web/.eslintrc | 1 - web/js/components/compare/mobile-toggle.js | 37 ++++++++++------ .../image-download/lat-long-inputs.js | 8 +++- web/js/components/layer/info/date-ranges.js | 2 +- .../browse/category-layer-row.js | 5 ++- .../browse/measurement-metadata-detail.js | 5 ++- .../product-picker/search/filter-chips.js | 5 ++- .../product-picker/search/search-layer-row.js | 4 +- .../location-search/coordinates-dialog.js | 5 ++- .../__snapshots__/coordinates.test.js.snap | 6 +-- .../__snapshots__/ol-coordinates.test.js.snap | 8 ++-- web/js/components/map/coordinates.js | 5 ++- .../measure-tool/measure-tooltip.js | 4 +- web/js/components/sidebar/event.js | 1 + web/js/components/sidebar/nav/nav-case.js | 5 ++- .../smart-handoffs/granule-count.js | 4 +- .../smart-handoffs/smart-handoff-modal.js | 4 +- .../interval-select.js | 20 ++++----- .../components/timeline/mobile-date-picker.js | 5 ++- .../timeline-controls/animation-button.js | 15 +++++-- .../axis-timescale-change-tooltip.js | 25 ++++++----- .../axis-timescale-change.js | 1 + .../timeline-controls/date-change-arrows.js | 15 ++++--- .../timescale-interval-change.js | 44 +++++++++++-------- .../timeline-coverage/timeline-coverage.js | 5 ++- web/js/components/util/alert.js | 10 +++-- web/js/components/util/arrow.js | 5 ++- web/js/components/util/switch.js | 1 + web/js/containers/alertDropdown.js | 2 +- .../mobile-animation-widget.js | 11 ++++- web/js/containers/embed.js | 2 +- web/js/containers/sidebar/layer-row.js | 5 ++- web/js/containers/timeline/timeline.js | 19 ++++---- web/scss/components/alert.scss | 28 +++++++++--- web/scss/components/dateselector.scss | 6 +++ web/scss/components/facets.scss | 1 + web/scss/components/image.scss | 5 +++ web/scss/components/tooltip.scss | 13 +++++- web/scss/features/anim-widget.scss | 3 ++ web/scss/features/compare.scss | 1 + web/scss/features/layer-categories.scss | 5 +++ web/scss/features/layers.scss | 4 ++ web/scss/features/map.scss | 1 + web/scss/features/sidebar-panel.scss | 4 ++ web/scss/features/smart-handoff.scss | 22 ++++++++++ web/scss/features/timeline.scss | 40 ++++++++++++++--- 50 files changed, 317 insertions(+), 146 deletions(-) diff --git a/e2e/features/animation/animation-test.spec.js b/e2e/features/animation/animation-test.spec.js index 1f2d778f60..ea43c11508 100644 --- 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 index ebd8e92ad9..698bf2ea7a 100644 --- a/e2e/features/compare/compare-mobile-test.spec.js +++ b/e2e/features/compare/compare-mobile-test.spec.js @@ -23,8 +23,8 @@ 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/) }) @@ -32,7 +32,7 @@ test('Mobile comparison A|B toggle buttons are visible and only A is selected by // 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 index 872ee6cced..8647081c98 100644 --- 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 index 659a20c44f..8c56f25aba 100644 --- 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 index f28cdc85ee..4dff861b7d 100644 --- 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 index ae2e206c2e..c4407eacad 100644 --- 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 (
);
diff --git a/web/js/components/layer/product-picker/search/filter-chips.js b/web/js/components/layer/product-picker/search/filter-chips.js
index 33b7165589..06f9f3670d 100644
--- 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,
}) => (
- Custom Interval Selector
diff --git a/web/js/components/timeline/timeline-axis/timeline-axis.js b/web/js/components/timeline/timeline-axis/timeline-axis.js index 18728d4730..ab3a870d52 100644 --- a/web/js/components/timeline/timeline-axis/timeline-axis.js +++ b/web/js/components/timeline/timeline-axis/timeline-axis.js @@ -1513,7 +1513,9 @@ class TimelineAxis extends Component { onMouseUp={this.setLineTime} onWheel={this.handleWheelType} onMouseOver={this.showHoverOn} + onFocus={this.showHoverOn} onMouseLeave={showHoverOff} + onBlur={showHoverOff} onTouchStart={this.handleMouseDown} onTouchEnd={this.setLineTimeTouch} > diff --git a/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js b/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js index 3d990941a7..a68870dcc7 100644 --- a/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js +++ b/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js @@ -52,7 +52,7 @@ class AxisTimeScaleChangeTooltip extends PureComponent { style={{ display: toolTipHovered ? 'block' : 'none' }} >
-
+
- 
+
+
);
diff --git a/web/js/components/tour/tour-box.js b/web/js/components/tour/tour-box.js
index c5ff9b8650..d639bf5a11 100644
--- a/web/js/components/tour/tour-box.js
+++ b/web/js/components/tour/tour-box.js
@@ -17,6 +17,8 @@ class TourBox extends React.Component {
if (backgroundImage) {
this.setState({
styles: {
+ border: 'none',
+ padding: '0',
backgroundImage: `url(config/metadata/stories/${storyId}/${backgroundImage})`,
},
});
@@ -29,6 +31,8 @@ class TourBox extends React.Component {
if (backgroundImageHover) {
this.setState({
styles: {
+ border: 'none',
+ padding: '0',
backgroundImage: `url(config/metadata/stories/${storyId}/${backgroundImageHover})`,
},
});
@@ -41,6 +45,8 @@ class TourBox extends React.Component {
if (backgroundImage) {
this.setState({
styles: {
+ border: 'none',
+ padding: '0',
backgroundImage: `url(config/metadata/stories/${storyId}/${backgroundImage})`,
},
});
@@ -58,11 +64,13 @@ class TourBox extends React.Component {
floatBox = ' tour-box-float';
}
return (
- this.onMouseOver(e)}
+ onFocus={this.onMouseOver}
onMouseOut={(e) => this.onMouseOut(e)}
+ onBlur={this.onMouseOut}
className={className + floatBox}
onClick={(e) => selectTour(e, story, index, storyId)}
>
@@ -76,7 +84,7 @@ class TourBox extends React.Component {
-
+
);
}
}
diff --git a/web/js/components/tour/widget-steps.js b/web/js/components/tour/widget-steps.js
index 0dd736177d..d968782362 100644
--- a/web/js/components/tour/widget-steps.js
+++ b/web/js/components/tour/widget-steps.js
@@ -30,15 +30,23 @@ function Steps(props) {
};
}, []);
+ const buttonStyle = {
+ border: 'none',
+ background: 'none',
+ padding: '0',
+ };
+
return (
);
}
diff --git a/web/js/components/util/image-crop.js b/web/js/components/util/image-crop.js
index 9e26d02ac9..9d15147536 100644
--- a/web/js/components/util/image-crop.js
+++ b/web/js/components/util/image-crop.js
@@ -114,7 +114,7 @@ function Crop(props) {
onComplete={onFinishDrag}
onChange={onDrag}
>
-
+
Including layers that are hidden may affect the display of the timeline’s solid blue overlapping coverage line as it will take into account the dates of those layers, too.
-
+
diff --git a/web/js/components/timeline/timeline-coverage/timeline-coverage.js b/web/js/components/timeline/timeline-coverage/timeline-coverage.js
index be3450029f..f6450fff36 100644
--- a/web/js/components/timeline/timeline-coverage/timeline-coverage.js
+++ b/web/js/components/timeline/timeline-coverage/timeline-coverage.js
@@ -309,9 +309,15 @@ class TimelineLayerCoveragePanel extends Component {
const { onInfoClick } = this.props;
const layerInfoBtnId = 'layer-coverage-info-button';
const layerInfoBtnTitle = 'Timeline Layer Coverage Information';
+ const buttonStyle = {
+ border: 'none',
+ background: 'none',
+ };
return (
- onInfoClick()}
>
- {text}
-
- );
- }
-}
-
-Tooltip.propTypes = {
- dataArray: PropTypes.array.isRequired,
- text: PropTypes.string.isRequired,
- onClick: PropTypes.func,
-};
-
-export default Tooltip;
diff --git a/web/js/components/tour/content-intro.js b/web/js/components/tour/content-intro.js
index 6bf1536e37..2d5293e999 100644
--- a/web/js/components/tour/content-intro.js
+++ b/web/js/components/tour/content-intro.js
@@ -13,10 +13,17 @@ function TourIntro(props) {
NASA Earthdata
), the satellite imagery we provide and events occurring around the world.
{' '}
-
+
+
-
- -
- {dataArray.map((dataEl, i) => (
-
{description}
Please {' '} - contact us + {' '} to enable Worldview embedding on your website.
diff --git a/web/js/containers/sidebar/layer-row.js b/web/js/containers/sidebar/layer-row.js index 8852189ea9..a1e4ba9c3c 100644 --- a/web/js/containers/sidebar/layer-row.js +++ b/web/js/containers/sidebar/layer-row.js @@ -352,7 +352,8 @@ function LayerRow (props) { <> {showDropdownBtn || isMobile ? renderDropdownMenu() : null} {!isChartingActive && ( -
-
+
);
}
diff --git a/web/js/containers/sidebar/smart-handoff.js b/web/js/containers/sidebar/smart-handoff.js
index 8c364ead08..d449a1539f 100644
--- a/web/js/containers/sidebar/smart-handoff.js
+++ b/web/js/containers/sidebar/smart-handoff.js
@@ -513,9 +513,14 @@ class SmartHandoff extends Component {
+
-
+
- {groupOverlays ? renderOverlayGroups() : !shouldHideForEmbedNoOverlays && (
- toggleOverlaysCollapsed(!overlaysCollapsed)}
- layers={overlays}
- layerSplit={overlays.length}
- />
- )}
+ {groupOverlays ? renderOverlayGroups() : !shouldHideForEmbedNoOverlays && (
+ toggleOverlaysCollapsed(!overlaysCollapsed)}
+ layers={overlays}
+ layerSplit={overlays.length}
+ />
+ )}
- {!shouldHideForEmbedNoBaseLayers && (
+ {!shouldHideForEmbedNoBaseLayers && (
+ )}
- + +
)} @@ -585,9 +590,14 @@ class SmartHandoff extends Component { application.- + +
{this.renderLayerChoices()} diff --git a/web/scss/features/anim-widget.scss b/web/scss/features/anim-widget.scss index 8b4c3075ab..8020280d95 100644 --- a/web/scss/features/anim-widget.scss +++ b/web/scss/features/anim-widget.scss @@ -162,6 +162,7 @@ } & > a, + & > button, & > div { display: inline-block; margin: 7px 0 0 10px; @@ -179,6 +180,8 @@ background: variables.$wv-dark-blue; position: relative; border-radius: 5px; + padding: 0; + border: none; &.disabled { cursor: not-allowed; @@ -260,7 +263,7 @@ } } -a .wv-animation-widget-icon { +button .wv-animation-widget-icon { font-size: 23px; color: #fff; position: absolute; diff --git a/web/scss/features/layer-categories.scss b/web/scss/features/layer-categories.scss index d306d8ac12..9c5b2d4cc4 100644 --- a/web/scss/features/layer-categories.scss +++ b/web/scss/features/layer-categories.scss @@ -170,6 +170,9 @@ overflow: hidden; box-sizing: border-box; text-decoration: none; + background: none; + text-align: left; + border: none; } & .layer-category-name:hover { diff --git a/web/scss/features/sidebar-panel.scss b/web/scss/features/sidebar-panel.scss index fca20a3693..300ab1f116 100644 --- a/web/scss/features/sidebar-panel.scss +++ b/web/scss/features/sidebar-panel.scss @@ -3,7 +3,7 @@ .sidebar-expand { position: relative; - > a { + > button { float: left; left: 10px; position: absolute; @@ -257,7 +257,7 @@ li.item.productsitem.inmotion, border-color: #fff; } -.productsitem a.visibility { +.productsitem button.visibility { width: 30px; background-color: #ccc; position: absolute; @@ -265,6 +265,11 @@ li.item.productsitem.inmotion, bottom: 0; cursor: pointer; border-right: 1px solid #333; + border-top: none; + border-bottom: none; + border-left: none; + text-align: left; + padding: 0; &.layer-enabled:hover { background: #fff; @@ -387,12 +392,15 @@ li.item.productsitem.inmotion, * End -- Granule active footprint toggle * ************************************/ -.productsitem a.wv-layers-info, -.productsitem a.wv-layers-options { +.productsitem button.wv-layers-info, +.productsitem button.wv-layers-options { position: relative; width: 20px; height: 20px; float: right; + border: none; + background:none; + padding: 0; } .productsitem.inmotion { @@ -400,9 +408,9 @@ li.item.productsitem.inmotion, list-style: none; } -.productsitem a.wv-layers-close:hover, -.productsitem a.wv-layers-info:hover, -.productsitem a.wv-layers-options:hover { +.productsitem button.wv-layers-close:hover, +.productsitem button.wv-layers-info:hover, +.productsitem button.wv-layers-options:hover { background: #fff; } @@ -413,7 +421,6 @@ li.item.productsitem.inmotion, text-align: center; border-radius: 50%; padding: 1px; - margin-top: 3px; } .layer-info svg.svg-inline--fa.wv-layers-options-icon { @@ -426,11 +433,11 @@ li.item.productsitem.inmotion, margin-left: -6px; } -.productsitem.layer-hidden a.wv-layers-options svg.svg-inline--fa.wv-layers-options-icon { +.productsitem.layer-hidden button.wv-layers-options svg.svg-inline--fa.wv-layers-options-icon { background-position: -21px -69px; } -.productsitem.layer-hidden a.wv-layers-options:hover svg.svg-inline--fa.wv-layers-options-icon { +.productsitem.layer-hidden button.wv-layers-options:hover svg.svg-inline--fa.wv-layers-options-icon { background-position: 0 -69px; } @@ -514,15 +521,17 @@ li.item.productsitem.inmotion, } } -.productsitem a.button.wv-layers-close { +.productsitem button.wv-layers-close { display: block; float: right; width: 20px; height: 20px; position: relative; + background: none; + border: none; } -.productsitem a.button.wv-layers-close svg.svg-inline--fa { +.productsitem button.wv-layers-close svg.svg-inline--fa { width: 12px; pointer-events: none; position: absolute; @@ -604,7 +613,7 @@ li.item.productsitem.inmotion, height: 42px; } -.productsitem.layer-hidden a.visibility { +.productsitem.layer-hidden button.visibility { background: #666; } @@ -613,12 +622,12 @@ li.item.productsitem.inmotion, cursor: default; } -.disabled.layer-hidden a.visibility:hover { +.disabled.layer-hidden button.visibility:hover { background: rgb(255 255 255 / 20%); cursor: default; } -.productsitem.disabled.layer-hidden a.visibility:hover svg.svg-inline--fa { +.productsitem.disabled.layer-hidden button.visibility:hover svg.svg-inline--fa { color: #c5c5c8; } @@ -694,7 +703,7 @@ li.item.productsitem.inmotion, margin-top: -13px; } - a.visibility { + button.visibility { width: 45px; } } diff --git a/web/scss/features/sidebar.scss b/web/scss/features/sidebar.scss index 0e15394cec..096b05efe1 100644 --- a/web/scss/features/sidebar.scss +++ b/web/scss/features/sidebar.scss @@ -711,41 +711,41 @@ p.recharts-tooltip-label { } /* Layers Info */ -.sidebar-panel li.item a.wv-layers-info { +.sidebar-panel li.item button.wv-layers-info { color: #333; text-align: center; } -.sidebar-panel li.item a.wv-layers-info .wv-layers-info-icon { +.sidebar-panel li.item button.wv-layers-info .wv-layers-info-icon { border-color: #333; } -.sidebar-panel li.item a.wv-layers-info.disabled { +.sidebar-panel li.item button.wv-layers-info.disabled { color: #aaa; } -.sidebar-panel li.item a.wv-layers-info.disabled .wv-layers-info-icon { +.sidebar-panel li.item button.wv-layers-info.disabled .wv-layers-info-icon { border-color: #aaa; } -.sidebar-panel li.item a.wv-layers-info.disabled:hover { +.sidebar-panel li.item button.wv-layers-info.disabled:hover { cursor: no-drop; background-color: transparent; } -.sidebar-panel li.layer-hidden a.wv-layers-info { +.sidebar-panel li.layer-hidden button.wv-layers-info { color: #999; } -.sidebar-panel li.layer-hidden a.wv-layers-info .wv-layers-info-icon { +.sidebar-panel li.layer-hidden button.wv-layers-info .wv-layers-info-icon { border-color: #999; } -.sidebar-panel li.layer-hidden a.wv-layers-info.disabled { +.sidebar-panel li.layer-hidden button.wv-layers-info.disabled { color: #666; } -.sidebar-panel li.layer-hidden a.wv-layers-info.disabled .wv-layers-info-icon { +.sidebar-panel li.layer-hidden button.wv-layers-info.disabled .wv-layers-info-icon { border-color: #666; } From 2b0b3805fbceb862c45a3d04a894565dcebd3b43 Mon Sep 17 00:00:00 2001 From: Patrick Moulden <4834892+PatchesMaps@users.noreply.github.com> Date: Fri, 17 Jan 2025 13:12:26 -0500 Subject: [PATCH 3/6] dependency-updates-01-17-2025 (#5662) --- package-lock.json | 56 +++++++++++++++++++++++++---------------------- package.json | 14 ++++++------ 2 files changed, 37 insertions(+), 33 deletions(-) diff --git a/package-lock.json b/package-lock.json index 447853d517..fbcedfb59d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -47,7 +47,7 @@ "p-queue": "^8.0.1", "proj4": "^2.15.0", "prop-types": "^15.8.1", - "qs": "^6.13.1", + "qs": "^6.14.0", "react": "^18.3.1", "react-beautiful-dnd": "^13.1.1", "react-device-detect": "^2.2.3", @@ -80,7 +80,7 @@ }, "devDependencies": { "@babel/core": "^7.26.0", - "@babel/eslint-parser": "^7.25.9", + "@babel/eslint-parser": "^7.26.5", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/preset-env": "^7.26.0", @@ -103,15 +103,15 @@ "eslint-config-standard": "^17.1.0", "eslint-import-resolver-webpack": "^0.13.10", "eslint-plugin-import": "^2.31.0", - "eslint-plugin-jest": "^28.10.0", + "eslint-plugin-jest": "^28.11.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-n": "^17.15.1", "eslint-plugin-no-storage": "^1.0.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^6.6.0", - "eslint-plugin-react": "^7.37.3", + "eslint-plugin-react": "^7.37.4", "express": "^4.21.0", - "glob": "^11.0.0", + "glob": "^11.0.1", "husky": "^9.1.7", "jest": "^29.7.0", "jest-canvas-mock": "^2.5.2", @@ -122,13 +122,13 @@ "node-ssh": "^13.2.0", "npm-run-all": "^4.1.5", "patch-package": "^8.0.0", - "postcss": "^8.4.49", + "postcss": "^8.5.1", "postcss-loader": "^8.1.1", "react-refresh": "^0.16.0", "react-test-renderer": "^18.3.1", "redux-mock-store": "^1.5.5", "run-script-os": "^1.1.6", - "sass": "^1.83.1", + "sass": "^1.83.4", "sass-loader": "^16.0.4", "shelljs": "^0.8.5", "showdown": "^2.1.0", @@ -217,7 +217,9 @@ } }, "node_modules/@babel/eslint-parser": { - "version": "7.25.9", + "version": "7.26.5", + "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.26.5.tgz", + "integrity": "sha512-Kkm8C8uxI842AwQADxl0GbcG1rupELYLShazYEZO/2DYjhyWXJIOUVOE3tBYm6JXzUCNJOZEzqc4rCW/jsEQYQ==", "dev": true, "license": "MIT", "dependencies": { @@ -7623,9 +7625,9 @@ } }, "node_modules/eslint-plugin-jest": { - "version": "28.10.0", - "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.10.0.tgz", - "integrity": "sha512-hyMWUxkBH99HpXT3p8hc7REbEZK3D+nk8vHXGgpB+XXsi0gO4PxMSP+pjfUzb67GnV9yawV9a53eUmcde1CCZA==", + "version": "28.11.0", + "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-28.11.0.tgz", + "integrity": "sha512-QAfipLcNCWLVocVbZW8GimKn5p5iiMcgGbRzz8z/P5q7xw+cNEpYqyzFMtIF/ZgF2HLOyy+dYBut+DoYolvqig==", "dev": true, "license": "MIT", "dependencies": { @@ -7797,9 +7799,9 @@ } }, "node_modules/eslint-plugin-react": { - "version": "7.37.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.3.tgz", - "integrity": "sha512-DomWuTQPFYZwF/7c9W2fkKkStqZmBd3uugfqBYLdkZ3Hii23WzZuOLUskGxB8qkSKqftxEeGL1TB2kMhrce0jA==", + "version": "7.37.4", + "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.4.tgz", + "integrity": "sha512-BGP0jRmfYyvOyvMoRX/uoUeW+GqNj9y16bPQzqAHf3AYII/tDs+jMN0dBVkl88/OZwNGwrVFxE7riHsXVfy/LQ==", "dev": true, "license": "MIT", "dependencies": { @@ -8932,7 +8934,9 @@ } }, "node_modules/glob": { - "version": "11.0.0", + "version": "11.0.1", + "resolved": "https://registry.npmjs.org/glob/-/glob-11.0.1.tgz", + "integrity": "sha512-zrQDm8XPnYEKawJScsnM0QzobJxlT/kHOOlRTio8IH/GrmxRE5fjllkzdaHclIuNjUQTJYH2xHNIGfdpJkDJUw==", "dev": true, "license": "ISC", "dependencies": { @@ -13897,9 +13901,9 @@ } }, "node_modules/postcss": { - "version": "8.4.49", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.49.tgz", - "integrity": "sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==", + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz", + "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==", "dev": true, "funding": [ { @@ -13917,7 +13921,7 @@ ], "license": "MIT", "dependencies": { - "nanoid": "^3.3.7", + "nanoid": "^3.3.8", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" }, @@ -14625,12 +14629,12 @@ "license": "MIT" }, "node_modules/qs": { - "version": "6.13.1", - "resolved": "https://registry.npmjs.org/qs/-/qs-6.13.1.tgz", - "integrity": "sha512-EJPeIn0CYrGu+hli1xilKAPXODtJ12T0sP63Ijx2/khC2JtuaN3JyNIpvmnkmaEtha9ocbG4A4cMcr+TvqvwQg==", + "version": "6.14.0", + "resolved": "https://registry.npmjs.org/qs/-/qs-6.14.0.tgz", + "integrity": "sha512-YWWTjgABSKcvs/nWBi9PycY/JiPJqOD4JA6o9Sej2AtvSGarXxKC3OQSk4pAarbdQlKAh5D4FCQkJNkW+GAn3w==", "license": "BSD-3-Clause", "dependencies": { - "side-channel": "^1.0.6" + "side-channel": "^1.1.0" }, "engines": { "node": ">=0.6" @@ -15839,9 +15843,9 @@ "license": "MIT" }, "node_modules/sass": { - "version": "1.83.1", - "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.1.tgz", - "integrity": "sha512-EVJbDaEs4Rr3F0glJzFSOvtg2/oy2V/YrGFPqPY24UqcLDWcI9ZY5sN+qyO3c/QCZwzgfirvhXvINiJCE/OLcA==", + "version": "1.83.4", + "resolved": "https://registry.npmjs.org/sass/-/sass-1.83.4.tgz", + "integrity": "sha512-B1bozCeNQiOgDcLd33e2Cs2U60wZwjUUXzh900ZyQF5qUasvMdDZYbQ566LJu7cqR+sAHlAfO6RMkaID5s6qpA==", "dev": true, "license": "MIT", "dependencies": { diff --git a/package.json b/package.json index 68b278ac11..fa1b2e0d68 100644 --- a/package.json +++ b/package.json @@ -78,7 +78,7 @@ }, "devDependencies": { "@babel/core": "^7.26.0", - "@babel/eslint-parser": "^7.25.9", + "@babel/eslint-parser": "^7.26.5", "@babel/plugin-transform-class-properties": "^7.25.9", "@babel/plugin-transform-private-methods": "^7.25.9", "@babel/preset-env": "^7.26.0", @@ -101,15 +101,15 @@ "eslint-config-standard": "^17.1.0", "eslint-import-resolver-webpack": "^0.13.10", "eslint-plugin-import": "^2.31.0", - "eslint-plugin-jest": "^28.10.0", + "eslint-plugin-jest": "^28.11.0", "eslint-plugin-jsx-a11y": "^6.10.2", "eslint-plugin-n": "^17.15.1", "eslint-plugin-no-storage": "^1.0.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-promise": "^6.6.0", - "eslint-plugin-react": "^7.37.3", + "eslint-plugin-react": "^7.37.4", "express": "^4.21.0", - "glob": "^11.0.0", + "glob": "^11.0.1", "husky": "^9.1.7", "jest": "^29.7.0", "jest-canvas-mock": "^2.5.2", @@ -120,13 +120,13 @@ "node-ssh": "^13.2.0", "npm-run-all": "^4.1.5", "patch-package": "^8.0.0", - "postcss": "^8.4.49", + "postcss": "^8.5.1", "postcss-loader": "^8.1.1", "react-refresh": "^0.16.0", "react-test-renderer": "^18.3.1", "redux-mock-store": "^1.5.5", "run-script-os": "^1.1.6", - "sass": "^1.83.1", + "sass": "^1.83.4", "sass-loader": "^16.0.4", "shelljs": "^0.8.5", "showdown": "^2.1.0", @@ -183,7 +183,7 @@ "p-queue": "^8.0.1", "proj4": "^2.15.0", "prop-types": "^15.8.1", - "qs": "^6.13.1", + "qs": "^6.14.0", "react": "^18.3.1", "react-beautiful-dnd": "^13.1.1", "react-device-detect": "^2.2.3", From a15ec6c897de076f0c8e2d4386be108c6614deb9 Mon Sep 17 00:00:00 2001 From: Patrick Moulden <4834892+PatchesMaps@users.noreply.github.com> Date: Tue, 21 Jan 2025 17:14:44 -0500 Subject: [PATCH 4/6] 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 --- e2e/features/animation/animation-test.spec.js | 4 +- .../compare/compare-mobile-test.spec.js | 10 ++--- e2e/features/timeline/timeline-test.spec.js | 6 +-- e2e/test-utils/global-variables/selectors.js | 16 +++---- web/.eslintrc | 1 - web/js/components/compare/mobile-toggle.js | 37 ++++++++++------ .../image-download/lat-long-inputs.js | 8 +++- web/js/components/layer/info/date-ranges.js | 2 +- .../browse/category-layer-row.js | 5 ++- .../browse/measurement-metadata-detail.js | 5 ++- .../product-picker/search/filter-chips.js | 5 ++- .../product-picker/search/search-layer-row.js | 4 +- .../location-search/coordinates-dialog.js | 5 ++- .../__snapshots__/coordinates.test.js.snap | 6 +-- .../__snapshots__/ol-coordinates.test.js.snap | 8 ++-- web/js/components/map/coordinates.js | 5 ++- .../measure-tool/measure-tooltip.js | 4 +- web/js/components/sidebar/event.js | 1 + web/js/components/sidebar/nav/nav-case.js | 5 ++- .../smart-handoffs/granule-count.js | 4 +- .../smart-handoffs/smart-handoff-modal.js | 4 +- .../interval-select.js | 20 ++++----- .../components/timeline/mobile-date-picker.js | 5 ++- .../timeline-controls/animation-button.js | 15 +++++-- .../axis-timescale-change-tooltip.js | 25 ++++++----- .../axis-timescale-change.js | 1 + .../timeline-controls/date-change-arrows.js | 15 ++++--- .../timescale-interval-change.js | 44 +++++++++++-------- .../timeline-coverage/timeline-coverage.js | 5 ++- web/js/components/util/alert.js | 10 +++-- web/js/components/util/arrow.js | 5 ++- web/js/components/util/switch.js | 1 + web/js/containers/alertDropdown.js | 2 +- .../mobile-animation-widget.js | 11 ++++- web/js/containers/embed.js | 2 +- web/js/containers/sidebar/layer-row.js | 5 ++- web/js/containers/timeline/timeline.js | 19 ++++---- web/scss/components/alert.scss | 28 +++++++++--- web/scss/components/dateselector.scss | 6 +++ web/scss/components/facets.scss | 1 + web/scss/components/image.scss | 5 +++ web/scss/components/tooltip.scss | 13 +++++- web/scss/features/anim-widget.scss | 3 ++ web/scss/features/compare.scss | 1 + web/scss/features/layer-categories.scss | 5 +++ web/scss/features/layers.scss | 4 ++ web/scss/features/map.scss | 1 + web/scss/features/sidebar-panel.scss | 4 ++ web/scss/features/smart-handoff.scss | 22 ++++++++++ web/scss/features/timeline.scss | 40 ++++++++++++++--- 50 files changed, 317 insertions(+), 146 deletions(-) diff --git a/e2e/features/animation/animation-test.spec.js b/e2e/features/animation/animation-test.spec.js index 1f2d778f60..ea43c11508 100644 --- 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 index ebd8e92ad9..698bf2ea7a 100644 --- a/e2e/features/compare/compare-mobile-test.spec.js +++ b/e2e/features/compare/compare-mobile-test.spec.js @@ -23,8 +23,8 @@ 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/) }) @@ -32,7 +32,7 @@ test('Mobile comparison A|B toggle buttons are visible and only A is selected by // 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 index 872ee6cced..8647081c98 100644 --- 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 index 659a20c44f..8c56f25aba 100644 --- 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 index f28cdc85ee..4dff861b7d 100644 --- 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 index ae2e206c2e..c4407eacad 100644 --- 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 (
-
);
}
diff --git a/web/js/components/image-download/lat-long-inputs.js b/web/js/components/image-download/lat-long-inputs.js
index 9779675c71..fcd9daae1c 100644
--- a/web/js/components/image-download/lat-long-inputs.js
+++ b/web/js/components/image-download/lat-long-inputs.js
@@ -98,7 +98,11 @@ function LatLongSelect(props) {
return (
toggleCompareASelected(true)}
+ onClick={handleClick}
>
A
-
-
+
+
-
{doesMetaDataNeedExpander && (
- { setShowCoordinates(!showCoordinates); }}>
+
+
{showCoordinates && (
<>
diff --git a/web/js/components/layer/info/date-ranges.js b/web/js/components/layer/info/date-ranges.js
index b5bbd55b38..90bc081910 100644
--- 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 }) {
>
{isSelected ? this.renderContent() : ''}
);
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
index 9d1c3e8dbf..db88e2491a 100644
--- 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()}
setMetadataExpansion(!isMetadataExpanded)}
>
{isMetadataExpanded ? '^' : '...'}
-
+
)}
removeFilter(field, value)}
@@ -33,7 +34,7 @@ export default function FilterChips(props) {
icon="times"
fixedWidth
/>
-
+
))}
+
)}
-
+
0.0000°, 0.0000°
"`;
+exports[`formats coordinate in latlon-dd format 1`] = `""`;
-exports[`formats coordinate in latlon-dm format 1`] = `"EPSG:4326
0°00.000'N, 0°00.000'E
"`;
+exports[`formats coordinate in latlon-dm format 1`] = `""`;
-exports[`formats coordinate in latlon-dms format 1`] = `"EPSG:4326
0°00'00"N, 0°00'00"E
"`;
+exports[`formats coordinate in latlon-dms format 1`] = `""`;
diff --git a/web/js/components/map/__snapshots__/ol-coordinates.test.js.snap b/web/js/components/map/__snapshots__/ol-coordinates.test.js.snap
index 60ad40681d..9c1d54cf19 100644
--- 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`] = `""`;
-exports[`reprojects (0,0) to (-45, 90) for EPSG:3413 1`] = `"EPSG:4326
90.0000°, -45.0000°
EPSG:3413
20.0000°, 10.0000°
EPSG:4326
20.0000°, -160.0000°
EPSG:4326
20.0000°, 10.0000°
EPSG:4326
{!active && (
-
+
+
)}
);
diff --git a/web/js/components/sidebar/event.js b/web/js/components/sidebar/event.js
index 70a15613bd..43f5a1321c 100644
--- a/web/js/components/sidebar/event.js
+++ b/web/js/components/sidebar/event.js
@@ -126,6 +126,7 @@ function Event (props) {
e.stopPropagation()}
+ onKeyDown={(e) => e.stopPropagation()}
>
{formatDisplayDate(date)}
diff --git a/web/js/components/sidebar/nav/nav-case.js b/web/js/components/sidebar/nav/nav-case.js
index d86df3f41b..7df025297c 100644
--- a/web/js/components/sidebar/nav/nav-case.js
+++ b/web/js/components/sidebar/nav/nav-case.js
@@ -98,7 +98,8 @@ function NavCase (props) {
{!isEventsTabDisabledEmbed && renderEvents()}
{renderDataDownload()}
-
Hide sidebar
-
+
);
}
diff --git a/web/js/components/smart-handoffs/granule-count.js b/web/js/components/smart-handoffs/granule-count.js
index 8cf75b8c46..84c233c9a6 100644
--- a/web/js/components/smart-handoffs/granule-count.js
+++ b/web/js/components/smart-handoffs/granule-count.js
@@ -121,9 +121,9 @@ export default function GranuleCount (props) {
{ granulesExist && (
{`(${sizeText})`}
)}
-
+
+
);
};
diff --git a/web/js/components/smart-handoffs/smart-handoff-modal.js b/web/js/components/smart-handoffs/smart-handoff-modal.js
index ef0e4ee10e..b8b69c6936 100644
--- a/web/js/components/smart-handoffs/smart-handoff-modal.js
+++ b/web/js/components/smart-handoffs/smart-handoff-modal.js
@@ -95,9 +95,9 @@ function SmartHandoffModal({
)}
- toggleInfo(!showMoreInfo)}>
+
+
diff --git a/web/js/components/timeline/custom-interval-selector/interval-select.js b/web/js/components/timeline/custom-interval-selector/interval-select.js
index 965b1a5d76..e73c253660 100644
--- a/web/js/components/timeline/custom-interval-selector/interval-select.js
+++ b/web/js/components/timeline/custom-interval-selector/interval-select.js
@@ -48,30 +48,30 @@ function IntervalSelect(props) {
{TIME_SCALE_FROM_NUMBER[interval].toUpperCase()}
-
- handleChangeZoomLevelMobile('year')}>
+ handleChangeZoomLevelMobile('year')}>
+
Year
-
- handleChangeZoomLevelMobile('month')}>
+ handleChangeZoomLevelMobile('month')}>
+
Month
-
- handleChangeZoomLevelMobile('day')}>
+ handleChangeZoomLevelMobile('day')}>
+
Day
{hasSubdailyLayers ? (
<>
-
- handleChangeZoomLevelMobile('hour')}>
+ handleChangeZoomLevelMobile('hour')}>
+
Hour
-
- handleChangeZoomLevelMobile('minute')}>
+ handleChangeZoomLevelMobile('minute')}>
+
Minute
diff --git a/web/js/components/timeline/mobile-date-picker.js b/web/js/components/timeline/mobile-date-picker.js
index b7e6127d11..7f2aaffa1c 100644
--- a/web/js/components/timeline/mobile-date-picker.js
+++ b/web/js/components/timeline/mobile-date-picker.js
@@ -125,14 +125,15 @@ function MobileDatePicker(props) {
return (
time && (
<>
-
+
-
+
);
}
diff --git a/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js b/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js
index a68870dcc7..315d12c108 100644
--- a/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js
+++ b/web/js/components/timeline/timeline-controls/axis-timescale-change-tooltip.js
@@ -61,43 +61,48 @@ class AxisTimeScaleChangeTooltip extends PureComponent {
>
TIMESCALE
-
YEAR
-
-
+
-
+
+
{hasSubdailyLayers ? (
<>
-
HOUR
-
-
+
+
) : null}
diff --git a/web/js/components/timeline/timeline-controls/axis-timescale-change.js b/web/js/components/timeline/timeline-controls/axis-timescale-change.js
index 59ae274435..2f74b47ef8 100644
--- a/web/js/components/timeline/timeline-controls/axis-timescale-change.js
+++ b/web/js/components/timeline/timeline-controls/axis-timescale-change.js
@@ -95,6 +95,7 @@ class AxisTimeScaleChange extends PureComponent {
{ timeScale
? (
{displayDate}
-
diff --git a/web/js/components/timeline/timeline-controls/date-change-arrows.js b/web/js/components/timeline/timeline-controls/date-change-arrows.js
index 722ab7870a..f67d1833ea 100644
--- a/web/js/components/timeline/timeline-controls/date-change-arrows.js
+++ b/web/js/components/timeline/timeline-controls/date-change-arrows.js
@@ -94,7 +94,8 @@ class DateChangeArrows extends PureComponent {
)}
{/* LEFT ARROW */}
-
+
{/* RIGHT ARROW */}
-
- this.handleClickInterval('year')}
>
Year
-
-
+
-
+
+
{hasSubdailyLayers ? (
<>
- this.handleClickInterval('hour')}
>
Hour
-
-
+
+
) : null}
- this.handleClickInterval('custom')}
>
{customIntervalText}
-
-
+
+
);
@@ -200,26 +207,25 @@ class TimeScaleIntervalChange extends PureComponent {
isDisabled,
} = this.props;
- const className = `no-drag interval-btn interval-btn-active${customSelected ? ' custom-interval-text' : ''} ${isDisabled ? ' disabled' : ''}`;
+ const className = `no-drag interval-list-btn interval-btn-active${customSelected ? ' custom-interval-text' : ''} ${isDisabled ? ' disabled' : ''}`;
return (
- this.setTooltipState(true)}
onMouseLeave={() => this.setTooltipState(false)}
onClick={this.onClick}
>
-
{customSelected ? customIntervalText : `${1} ${TIME_SCALE_FROM_NUMBER[interval]}`}
-
{!isDisabled ? this.renderTooltip() : null}
-
+
);
}
}
diff --git a/web/js/components/timeline/timeline-coverage/timeline-coverage.js b/web/js/components/timeline/timeline-coverage/timeline-coverage.js
index f6450fff36..06b648176a 100644
--- a/web/js/components/timeline/timeline-coverage/timeline-coverage.js
+++ b/web/js/components/timeline/timeline-coverage/timeline-coverage.js
@@ -410,7 +410,8 @@ class TimelineLayerCoveragePanel extends Component {
return (
<>
{/* Timeline Layer Coverage Panel open/close handle */}
-
-
+
-
+
{onDismiss && (
- {message}
- this.closeAlert()}
>
+
)}
);
diff --git a/web/js/components/util/arrow.js b/web/js/components/util/arrow.js
index ede6bac07a..350f3cae36 100644
--- a/web/js/components/util/arrow.js
+++ b/web/js/components/util/arrow.js
@@ -12,13 +12,14 @@ function Arrow({
const arrowClassName = `${direction}arrow`;
return (
-
-