Website 38 investigate adding the ability to navigate via calendar in hours view #319

SalazarJosh · 2024-11-18T15:48:43Z

Overview

Users can only navigate one week a time on the Hours View, which makes it tedious to look further ahead.

This PR adds a calendar component to the hours view (deploy URL). The calendar component provides a singular component to give the user the ability to navigate by weeks while also having a monthly calendar display.

The calendar is a sticky header component that scrolls with the user. The previous implementation of having a previous / next week component for each section caused a significant amount of visual information. Hopefully this alleviates some of that.

ChatGPT helped write some of the algorithms for comparing JS Date objects, since those aren't always super intuitive. I gave it all an additional pass to clean up / combine logic and make it more human legible.

This pull request resolves/closes/fixes WEBSITE-38.

Anything else?

As part of this work, I was exploring anchor links since the hours view is the only page we support anchor links. For example: https://deploy-preview-319--future-wwwlib-previews.netlify.app/locations-and-hours/hours-view#art-architecture-and-engineering-library

We handle anchor links in the gatsby-browser file. I extended the function to offset the anchor position by the height of the sticky header.

I also explored fixing the tab order for anchor links. In essence, when a user gets to a page via an anchor link, I want the anchored element to receive focus. Instead of trying to explore that issue within this PR, I broke it out into a separate ticket.

Testing

List instructions on how to test the pull request. Some examples:

Make sure the PR is consistent in these browsers:
- Chrome
- Firefox
- Safari (the assignee was not able to test the pull request in this browser)
- Edge
Run accessibility tests:
- WAVE
- ARC Toolkit
- axe DevTools

…ate-adding-the-ability-to-navigate-via-calendar-in-Hours-View

added calendar expansion on clicking date range heading. Now I need to get the calendar view fixed under the heading, clean up the code, remove the repeated component, and see if we can sticky it on scroll.

moved the previous / next week component to its own component file and render it once at the top of the hours view versus multiple times at the top of each hours location. Also made the component sticky.

made the background color match the maize used throughout the rest of the interface and moved the sticky up 1px so there's not a gap.

…to-navigate-via-calendar-in-Hours-View

User can now select week from calendar view, changed the previous and next week button to a link, added conditional highlighting for border of week.

next / previous week now changes month if moving to a different month. Selecting a week in a different month no longer selects the week index of the current month.

…to-navigate-via-calendar-in-Hours-View

Renamed the file to coincide with naming convention for panels. Added accessibility and keyboard navigation to calendar view. Updated the days positioning (sun, mon, tue, etc.) to better align with the columns.

…ia-calendar-in-Hours-View' of https://github.com/mlibrary/lib.umich.edu into WEBSITE-38-Investigate-adding-the-ability-to-navigate-via-calendar-in-Hours-View

Changed background color for calendar and working on consolidating actions.

refactored common logic into single utility function.

added esc close and instructions.

Moved the isVisible up to encapsulate entire calendar component.

accessibility updates for table view.

SalazarJosh

Thanks for taking the time to review! I've made all the suggested changes. Since your last review, Emma and Heidi got some user feedback and we made two more UI edits. I'll mark those so you don't have to review all the code again. Thanks again!

SalazarJosh · 2025-01-28T20:53:41Z

src/components/panels/hours-panel-date-viewer.js

+    >
+      <div
+        css={{
+          alignItems: 'center',


center aligned all items in the HoursPanelNextPrev component

SalazarJosh · 2025-01-28T20:55:57Z

src/components/panels/hours-panel-date-viewer.js

+                        <div
+                          key={dayIndex}
+                          css={{
+                            backgroundColor: getColorBasedOnDate(day),


I was dynamically setting the color here if the day didn't fall in the current month. UX team found the color wasn't accessible on gold background (which is the case for last / first week of month if there are overlapping days. The suggestion was to make all the numbers the same color so that rule is now gone.

erinesullivan

This looks great! I have done accessibility testing, and there are two blockers:

✅ Everything works with keyboard and mouse.
❔ NOT A BLOCKER! I did VoiceOver testing and this is more of a question for Ben and Bridget on how descriptive should this be:
- For the previous/next week/month buttons, they say the text. Would it be worth to voice what the next week or month the user will be moved into?
- Have you thought about trying to use the details element? I believe the open/close voicing is natively baked in.
❌ The esc to close text color does not have a high enough contrast.
❌ ARC Toolkit gave out this error: ARIA attribute is not allowed and this warning: Missing href. I believe these can be resolved in two ways:
1. Continue using the anchor element, and add an empty href attribute, and move the aria-label value inside the anchor and wrap it in a span.visually-hidden element. You make also need to add aria-hidden to the days of the week so they're not voiced.
2. Change the anchor to a button.

You're almost there!

we definitely want to announce changes to the label when prev / next week are selected

The esc key wasn't announcing the calendar close state. This fixes that and removes some redundant logic along the way.

SalazarJosh · 2025-01-31T21:28:26Z

This looks great! I have done accessibility testing, and there are two blockers:

✅ Everything works with keyboard and mouse.

❔ NOT A BLOCKER! I did VoiceOver testing and this is more of a question for Ben and Bridget on how descriptive should this be:

For the previous/next week/month buttons, they say the text. Would it be worth to voice what the next week or month the user will be moved into?

Have you thought about trying to use the details element? I believe the open/close voicing is natively baked in.

❌ The esc to close text color does not have a high enough contrast.

❌ ARC Toolkit gave out this error: ARIA attribute is not allowed and this warning: Missing href. I believe these can be resolved in two ways:

Continue using the anchor element, and add an empty href attribute, and move the aria-label value inside the anchor and wrap it in a span.visually-hidden element. You make also need to add aria-hidden to the days of the week so they're not voiced.

Change the anchor to a button.

You're almost there!

Thanks again! I made quite a few changes but I'll summarize here:

I added an aria-live to the date range title so the previous / next week buttons announce changes on input. It's after the action versus before, but it's definitely still an improvement. I'll share with Ben / Bridget to get their input as well.
Changed the 'to close' text in 'esc to close' to the neutral-400 color.
I think the details element is a step in the right direction. After implementing it I was able to remove all the logic around tracking and setting calendar visibility. However, there are still quite a few bugs with the element, specifically in FireFox. Here's a good writeup on it from a couple of years ago. I reverted these changes but would like to explore options for enhancing this component and using native HTML elements in the future. Perhaps I can do this in CodePen and disambiguate it from this so it can be more universally applied.
Fixed the ARC errors by changing the <a> to a button element. That seemed like the path of least resistance and was still clear when using NVDA screen reader.

…to-navigate-via-calendar-in-Hours-View

SalazarJosh · 2025-02-04T15:14:31Z

src/components/panels/hours-panel-date-viewer.js

@@ -316,7 +316,7 @@ const CalendarView = ({ isVisible, weekOffset }) => {
                  return weekStartDay.getTime() === viewedWeekStartDay.getTime();
                });
                return (
-                  <a
+                  <button


@erinesullivan This worked quite well in NVDA. I'm curious if it's still functional and makes sense with VoiceOver.

erinesullivan

👍🏻 The accessibility issues have been resolved! This looks great.

SalazarJosh added 8 commits October 21, 2024 17:04

changed heading level for locations (currently skipping level)

978b313

added calendar view

d4c6e98

Merge remote-tracking branch 'origin/master' into WEBSITE-38-Investig…

d35ffc1

…ate-adding-the-ability-to-navigate-via-calendar-in-Hours-View

made calendar expandable

529ab02

added calendar expansion on clicking date range heading. Now I need to get the calendar view fixed under the heading, clean up the code, remove the repeated component, and see if we can sticky it on scroll.

new component for previous / next week, sticky

40114e6

moved the previous / next week component to its own component file and render it once at the top of the hours view versus multiple times at the top of each hours location. Also made the component sticky.

Update previous-next-week-calendar-view.js

97b20c1

made the background color match the maize used throughout the rest of the interface and moved the sticky up 1px so there's not a gap.

Merge branch 'master' into WEBSITE-38-Investigate-adding-the-ability-…

73db816

…to-navigate-via-calendar-in-Hours-View

updated icons. no longer using html character icons

edfbc5b

SalazarJosh temporarily deployed to previews November 18, 2024 15:48 — with GitHub Actions Inactive

updated calendar positioning

278b2a2

SalazarJosh temporarily deployed to previews November 18, 2024 16:44 — with GitHub Actions Inactive

SalazarJosh added 4 commits December 10, 2024 12:08

Merge branch 'master' into WEBSITE-38-Investigate-adding-the-ability-…

c0f45ba

…to-navigate-via-calendar-in-Hours-View

Week selection implemented

55239fd

User can now select week from calendar view, changed the previous and next week button to a link, added conditional highlighting for border of week.

Update previous-next-week-calendar-view.js

236cbe0

next / previous week now changes month if moving to a different month. Selecting a week in a different month no longer selects the week index of the current month.

Merge branch 'master' into WEBSITE-38-Investigate-adding-the-ability-…

9527c5c

…to-navigate-via-calendar-in-Hours-View

SalazarJosh temporarily deployed to previews December 13, 2024 20:43 — with GitHub Actions Inactive

SalazarJosh added 2 commits December 16, 2024 15:26

Naming and accessibility

e6e8fb1

Renamed the file to coincide with naming convention for panels. Added accessibility and keyboard navigation to calendar view. Updated the days positioning (sun, mon, tue, etc.) to better align with the columns.

Merge branch 'WEBSITE-38-Investigate-adding-the-ability-to-navigate-v…

794eddd

…ia-calendar-in-Hours-View' of https://github.com/mlibrary/lib.umich.edu into WEBSITE-38-Investigate-adding-the-ability-to-navigate-via-calendar-in-Hours-View

SalazarJosh had a problem deploying to previews December 16, 2024 20:26 — with GitHub Actions Error

Removed table element and added aria-live to calendar heading

4eaf98c

SalazarJosh temporarily deployed to previews December 16, 2024 20:32 — with GitHub Actions Inactive

Update hours-panel-date-viewer.js

c83a01c

Changed background color for calendar and working on consolidating actions.

SalazarJosh temporarily deployed to previews December 17, 2024 14:55 — with GitHub Actions Inactive

Update hours-panel-date-viewer.js

4373f77

refactored common logic into single utility function.

SalazarJosh temporarily deployed to previews December 17, 2024 16:25 — with GitHub Actions Inactive

Update hours-panel-date-viewer.js

551b0ee

added esc close and instructions.

SalazarJosh temporarily deployed to previews December 17, 2024 16:44 — with GitHub Actions Inactive

Update hours-panel-date-viewer.js

9dba1df

Moved the isVisible up to encapsulate entire calendar component.

SalazarJosh had a problem deploying to previews December 18, 2024 21:59 — with GitHub Actions Failure

Update hours-panel-date-viewer.js

ec36206

accessibility updates for table view.

SalazarJosh had a problem deploying to previews January 22, 2025 17:50 — with GitHub Actions Error

Replaced hidden element css with visually-hidden class

7115c2f

SalazarJosh had a problem deploying to previews January 22, 2025 17:52 — with GitHub Actions Error

Added Kbd component

776f8c9

SalazarJosh temporarily deployed to previews January 28, 2025 14:59 — with GitHub Actions Inactive

Function for isEnterOrSpace

13c4783

SalazarJosh temporarily deployed to previews January 28, 2025 17:48 — with GitHub Actions Inactive

Alignment fixes and consistent icon sizes

c5b9961

SalazarJosh temporarily deployed to previews January 28, 2025 20:22 — with GitHub Actions Inactive

SalazarJosh commented Jan 28, 2025

View reviewed changes

SalazarJosh marked this pull request as ready for review January 28, 2025 20:56

Forgot to pass event to isEnterOrSpace function

03b9806

SalazarJosh temporarily deployed to previews January 30, 2025 17:07 — with GitHub Actions Inactive

erinesullivan requested changes Jan 31, 2025

View reviewed changes

added aria-live to date range label

a778384

we definitely want to announce changes to the label when prev / next week are selected

SalazarJosh temporarily deployed to previews January 31, 2025 20:40 — with GitHub Actions Inactive

Handled esc key close announcement

c5970ee

The esc key wasn't announcing the calendar close state. This fixes that and removes some redundant logic along the way.

SalazarJosh had a problem deploying to previews January 31, 2025 21:14 — with GitHub Actions Error

anchors to buttons

a924e24

SalazarJosh temporarily deployed to previews January 31, 2025 21:20 — with GitHub Actions Inactive

Merge branch 'master' into WEBSITE-38-Investigate-adding-the-ability-…

2fbba88

…to-navigate-via-calendar-in-Hours-View

SalazarJosh temporarily deployed to previews February 3, 2025 21:45 — with GitHub Actions Inactive

SalazarJosh requested a review from erinesullivan February 4, 2025 15:12

SalazarJosh commented Feb 4, 2025

View reviewed changes

erinesullivan approved these changes Feb 6, 2025

View reviewed changes

SalazarJosh merged commit 331a8a5 into master Feb 6, 2025
2 checks passed

SalazarJosh deleted the WEBSITE-38-Investigate-adding-the-ability-to-navigate-via-calendar-in-Hours-View branch February 6, 2025 16:08

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Website 38 investigate adding the ability to navigate via calendar in hours view #319

Website 38 investigate adding the ability to navigate via calendar in hours view #319

SalazarJosh commented Nov 18, 2024 •

edited

Loading

SalazarJosh left a comment

SalazarJosh Jan 28, 2025

SalazarJosh Jan 28, 2025

erinesullivan left a comment •

edited

Loading

SalazarJosh commented Jan 31, 2025 •

edited

Loading

SalazarJosh Feb 4, 2025

erinesullivan left a comment

Website 38 investigate adding the ability to navigate via calendar in hours view #319

Website 38 investigate adding the ability to navigate via calendar in hours view #319

Conversation

SalazarJosh commented Nov 18, 2024 • edited Loading

Overview

Anything else?

Testing

SalazarJosh left a comment

Choose a reason for hiding this comment

SalazarJosh Jan 28, 2025

Choose a reason for hiding this comment

SalazarJosh Jan 28, 2025

Choose a reason for hiding this comment

erinesullivan left a comment • edited Loading

Choose a reason for hiding this comment

SalazarJosh commented Jan 31, 2025 • edited Loading

SalazarJosh Feb 4, 2025

Choose a reason for hiding this comment

erinesullivan left a comment

Choose a reason for hiding this comment

SalazarJosh commented Nov 18, 2024 •

edited

Loading

erinesullivan left a comment •

edited

Loading

SalazarJosh commented Jan 31, 2025 •

edited

Loading