---
src/components/panels/hours-panel-date-viewer.js | 6 +-----
1 file changed, 1 insertion(+), 5 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index cdf5d874..25ad9405 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -301,11 +301,7 @@ const CalendarView = ({ isVisible, weekOffset }) => {
>
{['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'].map((day) => {
return (
-
+
{day}
);
From 7b67c75a7e6a5fa7dad4fa83c2c67fbf4c309f18 Mon Sep 17 00:00:00 2001
From: Josh Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:35:43 -0500
Subject: [PATCH 30/41] Update src/components/panels/hours-panel-date-viewer.js
Co-authored-by: Erin Sullivan
---
src/components/panels/hours-panel-date-viewer.js | 4 +---
1 file changed, 1 insertion(+), 3 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index 25ad9405..e83ccfbf 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -337,9 +337,7 @@ const CalendarView = ({ isVisible, weekOffset }) => {
key={weekIndex}
aria-label={`${currentlySelectedWeek ? 'This is the currently selected week.' : 'View'} week ${weekIndex + 1} in ${month} from ${getFormattedDate(week[0])} to ${getFormattedDate(week[week.length - 1])}`}
css={{
- border: currentlySelectedWeek
- ? `2px solid var(--color-maize-400)`
- : `2px solid rgba(0,0,0,0)`,
+ border: `2px solid ${currentlySelectedWeek ? 'var(--color-maize-400)' : 'transparent'}`,
display: 'grid',
gap: '4px',
gridTemplateColumns: 'repeat(7, 1fr)',
From a1439ee58e7c69021cbb9aeb573d83205141673e Mon Sep 17 00:00:00 2001
From: Josh Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:36:00 -0500
Subject: [PATCH 31/41] Update src/components/panels/hours-panel-date-viewer.js
Co-authored-by: Erin Sullivan
---
src/components/panels/hours-panel-date-viewer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index e83ccfbf..87048b82 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -1,4 +1,4 @@
-import { Heading, Icon, Link, Margins, MEDIA_QUERIES, SPACING, TYPOGRAPHY } from '../../reusable';
+import { Heading, Icon, Margins, MEDIA_QUERIES, SPACING, TYPOGRAPHY } from '../../reusable';
import React, { useEffect, useState } from 'react';
import PropTypes from 'prop-types';
import { useStateValue } from '../use-state';
From d0f39462991978764b000e276bc423863d474d5f Mon Sep 17 00:00:00 2001
From: Josh Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Wed, 22 Jan 2025 12:37:35 -0500
Subject: [PATCH 32/41] Update src/components/panels/hours-panel-date-viewer.js
Co-authored-by: Erin Sullivan
---
.../panels/hours-panel-date-viewer.js | 25 ++++++++++---------
1 file changed, 13 insertions(+), 12 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index 87048b82..0cf5e089 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -441,18 +441,19 @@ const HoursPanelNextPrev = ({ toggleCalendarVisibility, isCalendarVisible }) =>
Previous week
-
+
esc
-
+
{' '}
to
close
diff --git a/src/components/site-search.js b/src/components/site-search.js
index 6c3b2fa5..b358ae54 100644
--- a/src/components/site-search.js
+++ b/src/components/site-search.js
@@ -1,5 +1,5 @@
/* eslint-disable no-underscore-dangle */
-import { Alert, Icon, SPACING, TYPOGRAPHY, Z_SPACE } from '../reusable';
+import { Alert, Icon, Kbd, SPACING, TYPOGRAPHY, Z_SPACE } from '../reusable';
import React, { useEffect, useState } from 'react';
import { findAll } from 'highlight-words-core';
import { Link as GatsbyLink } from 'gatsby';
@@ -254,16 +254,6 @@ const ResultsList = ({ searching, noResults, results, query, error }) => {
background: 'var(--color-blue-100)',
borderBottom: `solid 1px var(--color-neutral-100)`,
color: 'var(--color-neutral-300)',
- kbd: {
- background: 'white',
- border: `solid 1px var(--color-neutral-200)`,
- borderRadius: '4px',
- boxShadow: `0 1px 1px rgba(0, 0, 0, .2), 0 2px 0 0 rgba(255, 255, 255, .7) inset;`,
- display: 'inline-block',
- fontFamily: 'monospace',
- fontSize: '0.85rem',
- padding: `0 ${SPACING['2XS']}`
- },
padding: `${SPACING.S} ${SPACING.L}`
}}
aria-hidden='true'
@@ -328,13 +318,13 @@ ResultsList.propTypes = {
const KeyboardControlIntructions = () => {
return (
- tab
+ tab
{' '}
to navigate,
- enter
+ enter
{' '}
to select,
- esc
+ esc
{' '}
to
dismiss
diff --git a/src/reusable/index.js b/src/reusable/index.js
index 1ae7e94c..34cacd2b 100644
--- a/src/reusable/index.js
+++ b/src/reusable/index.js
@@ -8,6 +8,7 @@ import Card from './card';
import createSlug from './create-slug';
import Heading from './heading';
import Input from './input';
+import Kbd from './kbd';
import Link from './link';
import List from './list';
import Text from './text';
@@ -34,6 +35,7 @@ export {
List,
Icon,
icons,
+ Kbd,
Text,
Link,
TextInput,
diff --git a/src/reusable/kbd.js b/src/reusable/kbd.js
new file mode 100644
index 00000000..113ad612
--- /dev/null
+++ b/src/reusable/kbd.js
@@ -0,0 +1,15 @@
+import { SPACING } from './utils';
+import styled from '@emotion/styled';
+
+const Kbd = styled(`kbd`)({
+ background: 'white',
+ border: 'solid 1px var(--color-neutral-200)',
+ borderRadius: '4px',
+ boxShadow: '0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset',
+ display: 'inline-block',
+ fontFamily: 'monospace',
+ fontSize: '0.85rem',
+ padding: `0 ${SPACING['2XS']}`
+});
+
+export default Kbd;
From 13c478312250e3009cfa4c210e082943b195537d Mon Sep 17 00:00:00 2001
From: Joshua Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Tue, 28 Jan 2025 12:48:52 -0500
Subject: [PATCH 36/41] Function for isEnterOrSpace
---
src/components/panels/hours-panel-date-viewer.js | 12 ++++++------
1 file changed, 6 insertions(+), 6 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index 8b81804a..0eb0402d 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -13,6 +13,10 @@ const dateFormat = (date, abbreviated = false) => {
return date.toLocaleString('en-US', options);
};
+const isEnterOrSpace = (event) => {
+ return event.key === 'Enter' || event.key === ' ';
+};
+
const updateWeekOffset = ({
dispatch,
weekOffset,
@@ -20,11 +24,7 @@ const updateWeekOffset = ({
week = null,
relativeOffset = null
}) => {
- if (
- !event
- || event.type === 'click'
- || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))
- ) {
+ if (!event || event.type === 'click' || (event.type === 'keydown' && isEnterOrSpace)) {
if (event) {
event.preventDefault();
}
@@ -379,7 +379,7 @@ const HoursPanelNextPrev = ({ toggleCalendarVisibility, isCalendarVisible }) =>
};
const handleInteraction = (event, action) => {
- if (event.type === 'click' || (event.type === 'keydown' && (event.key === 'Enter' || event.key === ' '))) {
+ if (event.type === 'click' || (event.type === 'keydown' && isEnterOrSpace)) {
event.preventDefault();
action();
}
From c5b9961dec3614c9b46b41698090b04ee0850f44 Mon Sep 17 00:00:00 2001
From: Joshua Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Tue, 28 Jan 2025 15:22:13 -0500
Subject: [PATCH 37/41] Alignment fixes and consistent icon sizes
---
.../panels/hours-panel-date-viewer.js | 25 +++++++++++++------
1 file changed, 18 insertions(+), 7 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index 0eb0402d..ca82e1ba 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -204,7 +204,7 @@ const CalendarView = ({ isVisible, weekOffset }) => {
maxWidth: '320px',
overflow: 'hidden',
position: 'absolute',
- top: '47px',
+ top: '45px',
transition: 'height 0.3s ease',
width: '100%',
zIndex: 1
@@ -234,6 +234,8 @@ const CalendarView = ({ isVisible, weekOffset }) => {
aria-label='previous month'
>
@@ -260,6 +262,8 @@ const CalendarView = ({ isVisible, weekOffset }) => {
aria-label='Next month'
>
@@ -331,7 +335,6 @@ const CalendarView = ({ isVisible, weekOffset }) => {
css={{
backgroundColor: getColorBasedOnDate(day),
borderRadius: '4px',
- color: day.getMonth() === currentBrowseDate.getMonth() ? 'inherit' : '#999',
padding: '10px',
textAlign: 'center'
}}
@@ -394,7 +397,7 @@ const HoursPanelNextPrev = ({ toggleCalendarVisibility, isCalendarVisible }) =>
>
{
'&:hover': {
boxShadow: 'inset 0 -2px var(--color-teal-400);'
},
- alignItems: 'center',
boxShadow: 'none',
color: 'var(--color-teal-400)',
display: 'none',
@@ -506,18 +508,23 @@ const PreviousNextWeekButton = ({ type, children, ...rest }) => {
>
{type === 'previous' && (
)}
{children}
{type === 'next' && (
-
+
)}
From 03b9806fe734f371d4e97a4fe0c336e4a7f689d9 Mon Sep 17 00:00:00 2001
From: Joshua Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Thu, 30 Jan 2025 12:06:57 -0500
Subject: [PATCH 38/41] Forgot to pass event to isEnterOrSpace function
---
src/components/panels/hours-panel-date-viewer.js | 4 ++--
1 file changed, 2 insertions(+), 2 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index ca82e1ba..1c5dbd42 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -24,7 +24,7 @@ const updateWeekOffset = ({
week = null,
relativeOffset = null
}) => {
- if (!event || event.type === 'click' || (event.type === 'keydown' && isEnterOrSpace)) {
+ if (!event || event.type === 'click' || (event.type === 'keydown' && isEnterOrSpace(event))) {
if (event) {
event.preventDefault();
}
@@ -382,7 +382,7 @@ const HoursPanelNextPrev = ({ toggleCalendarVisibility, isCalendarVisible }) =>
};
const handleInteraction = (event, action) => {
- if (event.type === 'click' || (event.type === 'keydown' && isEnterOrSpace)) {
+ if (event.type === 'click' || (event.type === 'keydown' && isEnterOrSpace(event))) {
event.preventDefault();
action();
}
From a7783844ed317081015870c6817f335abdbad329 Mon Sep 17 00:00:00 2001
From: Joshua Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Fri, 31 Jan 2025 15:40:51 -0500
Subject: [PATCH 39/41] added aria-live to date range label
we definitely want to announce changes to the label when prev / next week are selected
---
src/components/panels/hours-panel-date-viewer.js | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index 1c5dbd42..c0a014f9 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -439,7 +439,7 @@ const HoursPanelNextPrev = ({ toggleCalendarVisibility, isCalendarVisible }) =>
level={2}
size='S'
>
-
+
{hoursRange.label}
From c5970ee42ecd9615190c946901bb7c631caf663f Mon Sep 17 00:00:00 2001
From: Joshua Salazar <6354268+SalazarJosh@users.noreply.github.com>
Date: Fri, 31 Jan 2025 16:14:47 -0500
Subject: [PATCH 40/41] Handled esc key close announcement
The esc key wasn't announcing the calendar close state. This fixes that and removes some redundant logic along the way.
---
.../panels/hours-panel-date-viewer.js | 46 +++++++++++--------
1 file changed, 28 insertions(+), 18 deletions(-)
diff --git a/src/components/panels/hours-panel-date-viewer.js b/src/components/panels/hours-panel-date-viewer.js
index c0a014f9..0e838328 100644
--- a/src/components/panels/hours-panel-date-viewer.js
+++ b/src/components/panels/hours-panel-date-viewer.js
@@ -54,24 +54,30 @@ export default function HoursPanelDateViewer () {
const [isCalendarVisible, setIsCalendarVisible] = useState(false);
const [calendarStatus, setCalendarStatus] = useState('');
- const handleKeydown = (event) => {
- if (event.keyCode === 27) {
- setIsCalendarVisible(false);
+ const toggleCalendarVisibility = (event) => {
+ if (event?.key && event.key !== 'Escape') {
+ return;
}
+
+ setIsCalendarVisible((prev) => {
+ const newState = !prev;
+ setCalendarStatus(`Calendar ${newState ? 'open' : 'closed'}`);
+ return newState;
+ });
+
+ event?.preventDefault();
};
useEffect(() => {
- document.addEventListener('keydown', handleKeydown);
+ const handleKeydown = (event) => {
+ return toggleCalendarVisibility(event);
+ };
+ document.addEventListener('keydown', handleKeydown);
return () => {
- document.addEventListener('keydown', handleKeydown);
+ return document.removeEventListener('keydown', handleKeydown);
};
- });
-
- const toggleCalendarVisibility = () => {
- setIsCalendarVisible(!isCalendarVisible);
- setCalendarStatus(`Calendar ${isCalendarVisible ? 'closed' : 'open'}`);
- };
+ }, []);
return (
{
);
})}
-
-
- esc
-
- {' '}
- to
- close
+
+
+
+ esc
+
+
+
+ {' '}
+ to
+ close
+