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] 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 (
-
toggleCompareASelected(true)} + onClick={handleClick} > A -
-
+
+
); } 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 (
-
{ 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()}
{doesMetaDataNeedExpander && ( -
setMetadataExpansion(!isMetadataExpanded)} > {isMetadataExpanded ? '^' : '...'} -
+ )} ); 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, }) => ( -
removeFilter(field, value)} @@ -33,7 +34,7 @@ export default function FilterChips(props) { icon="times" fixedWidth /> -
+ ))} ); 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 { )} -
+ )} -
+ ); } 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 ( -
this.copyToClipboard(formattedCoordinates)} @@ -169,7 +170,7 @@ class CoordinatesDialog extends Component { )} -
+ ); }; 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`] = `"
0.0000°, 0.0000°
EPSG:4326
"`; +exports[`formats coordinate in latlon-dd format 1`] = `""`; -exports[`formats coordinate in latlon-dm format 1`] = `"
0°00.000'N, 0°00.000'E
EPSG:4326
"`; +exports[`formats coordinate in latlon-dm format 1`] = `""`; -exports[`formats coordinate in latlon-dms format 1`] = `"
0°00'00"N, 0°00'00"E
EPSG:4326
"`; +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`] = `"
90.0000°, -45.0000°
EPSG:3413
"`; +exports[`reprojects (0,0) to (-45, 90) for EPSG:3413 1`] = `"
"`; -exports[`shows 20°00.000'N, 10°00.000'E when set to degrees and minutes format 1`] = `"
20.0000°, 10.0000°
EPSG:4326
"`; +exports[`shows 20°00.000'N, 10°00.000'E when set to degrees and minutes format 1`] = `"
"`; -exports[`shows coordinates of (-160, 20) when moving the mouse over wrapped 1`] = `"
20.0000°, -160.0000°
EPSG:4326
"`; +exports[`shows coordinates of (-160, 20) when moving the mouse over wrapped 1`] = `"
"`; -exports[`shows coordinates of (10, 20) when moving the mouse 1`] = `"
20.0000°, 10.0000°
EPSG:4326
"`; +exports[`shows coordinates of (10, 20) when moving the mouse 1`] = `"
"`; diff --git a/web/js/components/map/coordinates.js b/web/js/components/map/coordinates.js index 2c9a37085b..b33d982320 100644 --- a/web/js/components/map/coordinates.js +++ b/web/js/components/map/coordinates.js @@ -38,7 +38,8 @@ export default class Coordinates extends React.Component { ); return ( -
- + ); } } diff --git a/web/js/components/measure-tool/measure-tooltip.js b/web/js/components/measure-tool/measure-tooltip.js index d16dadc3f0..8555c4bd55 100644 --- a/web/js/components/measure-tool/measure-tooltip.js +++ b/web/js/components/measure-tool/measure-tooltip.js @@ -125,9 +125,9 @@ export default function MeasureTooltip(props) {
{!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 && ( <> -
{displayDate}
-
+
@@ -61,7 +70,7 @@ function AnimationButton(props) { )}
-
+ ); } 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 ? (
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 */} -
-
+ {/* NOW BUTTON */} -
-
+
); } diff --git a/web/js/components/timeline/timeline-controls/timescale-interval-change.js b/web/js/components/timeline/timeline-controls/timescale-interval-change.js index f2f2505d6f..e08dcfec5e 100644 --- a/web/js/components/timeline/timeline-controls/timescale-interval-change.js +++ b/web/js/components/timeline/timeline-controls/timescale-interval-change.js @@ -131,60 +131,67 @@ class TimeScaleIntervalChange extends PureComponent { style={{ display: toolTipHovered ? 'block' : 'none' }} >
- 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 */} -
-
+
-
{message}
-
+ {onDismiss && ( -
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 ( -
-
+ ); } diff --git a/web/js/components/util/switch.js b/web/js/components/util/switch.js index d639c3cd5b..2f2af21c70 100644 --- a/web/js/components/util/switch.js +++ b/web/js/components/util/switch.js @@ -67,6 +67,7 @@ function Switch(props) { {label} diff --git a/web/js/containers/alertDropdown.js b/web/js/containers/alertDropdown.js index 1afce2c519..1afef2e669 100644 --- a/web/js/containers/alertDropdown.js +++ b/web/js/containers/alertDropdown.js @@ -15,7 +15,7 @@ export default function AlertDropdown(isTourActive) { return (
Too many animation frames. Reduce time range or increase increment size. diff --git a/web/js/containers/embed.js b/web/js/containers/embed.js index 220a424683..5caa147899 100644 --- a/web/js/containers/embed.js +++ b/web/js/containers/embed.js @@ -56,7 +56,7 @@ function Embed ({ isEmbedModeActive, selectedDate, isMobile }) { > {showClickToInteractMessage && ( <> -
+ ); }; diff --git a/web/js/containers/timeline/timeline.js b/web/js/containers/timeline/timeline.js index 19769b82a2..43c9699b0c 100644 --- a/web/js/containers/timeline/timeline.js +++ b/web/js/containers/timeline/timeline.js @@ -1254,13 +1254,13 @@ class Timeline extends React.Component { />
- - - +
+ +
{this.renderDateChangeArrows()}
{/* Open/Close Chevron */} -
-
+ )} diff --git a/web/scss/components/alert.scss b/web/scss/components/alert.scss index adce34fcd0..3197d8bc09 100644 --- a/web/scss/components/alert.scss +++ b/web/scss/components/alert.scss @@ -8,11 +8,27 @@ width: 450px; background: #282828; + .multiple-alerts-btn { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + position: relative; + color: #fff; + background: #282828; + border: #282828; + border-radius: 0; + min-height: 40px; + padding: 0; + z-index: 100; + padding-left: 1rem; + padding-right: 1rem; + } button { width: 100%; display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; position: relative; color: #fff; @@ -20,13 +36,15 @@ border: #282828; border-radius: 0; min-height: 40px; - cursor: pointer; padding: 0; z-index: 100; - margin-bottom: 5px; padding-left: 1rem; padding-right: 1rem; } + + .close-alert { + width: unset; + } } .wv-alert-container { @@ -47,7 +65,7 @@ cursor: pointer; padding: 0; z-index: 100; - margin-bottom: 5px; + margin-bottom: 0; } .alert-content { @@ -77,7 +95,7 @@ text-align: center; } -.wv-alert div:hover { +.wv-alert button:hover { background-color: #ddd; color: #333; } diff --git a/web/scss/components/dateselector.scss b/web/scss/components/dateselector.scss index 26386def86..ae2db0bd26 100644 --- a/web/scss/components/dateselector.scss +++ b/web/scss/components/dateselector.scss @@ -113,6 +113,9 @@ .date-arrows { display: block; height: 10px; + background: none; + border: none; + width: 100%; } .zoom-level-change-arrows .date-arrows { @@ -120,6 +123,9 @@ margin-top: -5px; padding-bottom: 20px; margin-bottom: 5px; + background: none; + border: none; + width: 100%; } .wv-date-selector-widget .date-arrows svg, diff --git a/web/scss/components/facets.scss b/web/scss/components/facets.scss index 3ec486ef4c..80a0b2fe20 100644 --- a/web/scss/components/facets.scss +++ b/web/scss/components/facets.scss @@ -20,6 +20,7 @@ position: relative; display: inline-block; cursor: pointer; + border: none; span { font-weight: 500; diff --git a/web/scss/components/image.scss b/web/scss/components/image.scss index 3d4cb3b1c4..22119ab9dc 100644 --- a/web/scss/components/image.scss +++ b/web/scss/components/image.scss @@ -120,6 +120,11 @@ padding: 5px 0; font-weight: 600; cursor: pointer; + width: 100%; + background: none; + border: none; + color: white; + text-align: left; &:hover { font-weight: 900; diff --git a/web/scss/components/tooltip.scss b/web/scss/components/tooltip.scss index bd95119c44..42d74c3272 100644 --- a/web/scss/components/tooltip.scss +++ b/web/scss/components/tooltip.scss @@ -158,6 +158,13 @@ bottom: 0; height: 20px; width: 23px; + background: none; + border: none; + padding: 0; + + & svg { + height: 13px; + } } } @@ -176,9 +183,13 @@ .close-tooltip, .minimize-tooltip { - padding-left: 6px; + padding: 0 0 0 6px; margin-left: 8px; border-left: 1px solid #777; + border-top: none; + border-right: none; + border-bottom: none; + background: none; &.close-coordinates-tooltip, &.minimize-coordinates-tooltip { diff --git a/web/scss/features/anim-widget.scss b/web/scss/features/anim-widget.scss index 8020280d95..d49732a7c7 100644 --- a/web/scss/features/anim-widget.scss +++ b/web/scss/features/anim-widget.scss @@ -145,6 +145,9 @@ & .interval-btn.interval-btn-active { color: #ce4c21; display: inline; + background: none; + border: none; + padding: 0; &.disabled { color: #fff; diff --git a/web/scss/features/compare.scss b/web/scss/features/compare.scss index ab272f8e78..458c2187f4 100644 --- a/web/scss/features/compare.scss +++ b/web/scss/features/compare.scss @@ -208,6 +208,7 @@ padding: 13.5px; color: #fff; border: thin solid transparent; + background-color: transparent; &:first-child { border-bottom-left-radius: 5px; diff --git a/web/scss/features/layer-categories.scss b/web/scss/features/layer-categories.scss index 9c5b2d4cc4..ba6be169f6 100644 --- a/web/scss/features/layer-categories.scss +++ b/web/scss/features/layer-categories.scss @@ -226,6 +226,10 @@ position: relative; cursor: pointer; min-height: 44px; + width: 100%; + border: none; + background: none; + text-align: start; & .arrow-icon { color: #d54e21; @@ -338,6 +342,7 @@ background: #333; border-top: 2px solid #d54e21; box-shadow: 0 -2px 16px rgb(0 0 0 / 35%); + width: 100%; } .layers-all .metadata-more:hover, diff --git a/web/scss/features/layers.scss b/web/scss/features/layers.scss index a55112e1e1..51fa243dc3 100644 --- a/web/scss/features/layers.scss +++ b/web/scss/features/layers.scss @@ -279,6 +279,10 @@ .layers-all-header { padding: 0 0 0 40px; + width: 100%; + background: none; + border: none; + text-align: left; &.notice { padding: 0 0 0 70px; diff --git a/web/scss/features/map.scss b/web/scss/features/map.scss index c6e2647c7c..3134883e05 100644 --- a/web/scss/features/map.scss +++ b/web/scss/features/map.scss @@ -200,6 +200,7 @@ cursor: pointer; height: 35px; padding: 0 0 0 5px; + width: 100%; } .wv-coords-map:hover { diff --git a/web/scss/features/sidebar-panel.scss b/web/scss/features/sidebar-panel.scss index 300ab1f116..7fce6dba8e 100644 --- a/web/scss/features/sidebar-panel.scss +++ b/web/scss/features/sidebar-panel.scss @@ -82,6 +82,7 @@ display: flex; align-items: center; justify-content: center; + background: none; svg.collapse-icon { height: 22px; @@ -327,6 +328,9 @@ li.item.productsitem.inmotion, position: absolute; right: 4px; bottom: 7px; + background: none; + border: none; + padding: 0; } .productsitem .layer-pointer-icon svg.svg-inline--fa { diff --git a/web/scss/features/smart-handoff.scss b/web/scss/features/smart-handoff.scss index 8bc4fa168b..b94a19bdfc 100644 --- a/web/scss/features/smart-handoff.scss +++ b/web/scss/features/smart-handoff.scss @@ -174,6 +174,25 @@ a.help-link { vertical-align: bottom; } } + + button { + color: #fff; + font-size: 16px; + font-weight: 900; + margin: 14px 5px 5px; + display: inline-block; + text-align: center; + background: none; + border: none; + padding: 0; + height: auto; + width: auto; + + &.help-link { + text-align: left; + display: inline; + } + } } .loading-granule-count { @@ -331,6 +350,9 @@ a.help-link { color: #7bf; font-size: 17px; text-align: center; + width: 100%; + background: none; + border: none; } .toggle-more-info:hover { diff --git a/web/scss/features/timeline.scss b/web/scss/features/timeline.scss index 978b0ee3a0..54b1c9bbea 100644 --- a/web/scss/features/timeline.scss +++ b/web/scss/features/timeline.scss @@ -228,6 +228,9 @@ button:focus { width: 35px; margin: auto; text-align: center; + background: none; + border: none; + padding: 0; } & .date-arrows svg { @@ -288,6 +291,8 @@ button:focus { width: 34px; height: 34px; margin-top: -1.5px; + padding: 0; + vertical-align: top; svg { left: 15px; @@ -324,6 +329,7 @@ button:focus { top: 16px; right: 4px; background-color: transparent; + border: none; & svg { top: 5px; @@ -372,6 +378,8 @@ button:focus { width: 40px; vertical-align: middle; position: relative; + background: none; + border: none; } .date-arrow-wrapper { @@ -463,10 +471,10 @@ button:focus { .zoom-level-change-arrows { user-select: none; background: transparent; - border: thin solid transparent; vertical-align: middle; box-sizing: border-box; width: 55px; + border: none; } /* Interval selector */ @@ -561,14 +569,18 @@ button:focus { width: 100%; margin-left: auto; margin-right: auto; - padding: 4px; + padding: 0; background-color: variables.$wv-transparent-black; border-radius: 3px; } #timeline-header #timeline-interval-btn-container, #zoom-btn-container-axis { + color: white; display: block; + background: none; + border: none; + width: inherit; } .timeline-container .wv-tooltip { @@ -601,13 +613,12 @@ button:focus { .zoom-btn-active, .interval-btn-active { - width: 90px; + width: inherit; color: #ccc; font-size: 12px; line-height: 14px; display: block; clear: both; - cursor: pointer; text-transform: uppercase; text-align: center; font-family: variables.$wv-monospace-font; @@ -638,6 +649,21 @@ button:focus { line-height: 16px; color: #ccc; padding: 2px 0; + background: none; + border: none; + width: 100%; +} + +.interval-list-btn { + display: block; + clear: both; + text-transform: uppercase; + text-align: center; + font-family: variables.$wv-monospace-font; + font-size: 14px; + line-height: 16px; + color: inherit; + padding: 2px 0; } .zoom-btn:hover, @@ -652,10 +678,14 @@ button:focus { right: 0; height: 64px; width: 20px; - cursor: pointer; border-left: variables.$wv-dark-menu-border; border-top-right-radius: variables.$wv-menu-border-radius; border-bottom-right-radius: variables.$wv-menu-border-radius; + border-right: none; + background: none; + padding: 0; + border-top: none; + border-bottom: none; } #timeline-hide:hover,