Add partial check-in/check-out indicators and screen reader accessibility features to datepicker (WooExt-330) #550

m-muhsin · 2025-12-01T01:42:48Z

All Submissions:

Does your code follow the WooCommerce Sniffs variant of WordPress coding standards?
Have you written new tests for your changes, as applicable?
Have you successfully run tests with your changes locally?
Will this change require new documentation or changes to existing documentation?

Changes proposed in this Pull Request:

This PR enhances the accessibility and visual clarity of the accommodation booking datepicker by:

Accessibility Improvements:
- Introduced visually hidden text for screen readers to enhance accessibility for datepicker cells
- Implemented addAccessibleText() function to dynamically add screen reader announcements to date cells
- Created formatDateForScreenReader() function to format dates in a human-readable format (e.g., "January 15, 2025, Monday") for screen reader users
- Added contextual announcements for different date availability states:
  - "Available for check-out only" for dates that can only be used as check-out dates
  - "Available for check-in only" for dates that can only be used as check-in dates
  - "Fully booked and unavailable" for dates that cannot be used for either check-in or check-out
Visual Enhancements:
- Updated styles for fully booked dates to include visual indicators (cross/X marks) using CSS pseudo-elements (::before and ::after)
- Added diagonal slash indicators for partially available dates:
  - Top-left to bottom-right slash for check-out only dates
  - Top-right to bottom-left slash for check-in only dates
- Improved contrast and styling for unavailable dates with black background and white text
- Adjusted opacity for partially available dates to 0.65 for better visual distinction
Technical Implementation:
- Added .screen-reader-text CSS class following WordPress accessibility standards for visually hidden content
- Ensured that screen reader text is re-added after date selection triggers a refresh using a timeout mechanism
- Maintained backward compatibility with existing datepicker functionality

Fixes the following accessibility issues:

WooExt-330.

Closes #553
Closes https://linear.app/a8c/issue/WOOACBK-76/tracking-issue-for-pr-550-add-screen-reader-accessibility-features-to

Steps to test the changes in this Pull Request:

Navigate to a product page with an Accommodation Booking product type
Open the booking datepicker calendar
Test visual indicators:
- Verify that fully booked dates (unavailable for both check-in and check-out) display with a black background and white X/cross indicator
- Verify that partially available dates show diagonal slashes:
  - Dates available only for check-out show a slash from top-left to bottom-right
  - Dates available only for check-in show in a dark gray background.
Test accessibility with screen reader:
- Enable a screen reader
- Navigate through the datepicker calendar using keyboard navigation
- Verify that each date cell announces:
  - The full date (month, day, year, day of week)
  - The availability status (check-in only, check-out only, or fully booked)
Test date selection flow:
- Select a check-in date and verify that the datepicker refreshes correctly
- Verify that screen reader announcements persist after date selection
- Verify that visual indicators remain correct after selection
Test with different date availability scenarios:
- Test with dates that are fully booked
- Test with dates that are partially available (check-in only or check-out only)
- Verify that the appropriate visual and accessibility indicators appear for each state

Changelog entry

Add - Enhanced datepicker accessibility with screen reader support and improved visual indicators for booking availability status.

- Introduced visually hidden text for screen readers to enhance accessibility for datepicker cells. - Implemented functions to format and add accessible text for fully booked and partially available dates. - Updated styles for fully booked dates to include visual indicators (crosses) for better user experience. - Ensured that screen reader text is re-added after date selection triggers a refresh.

github-actions · 2025-12-01T01:42:57Z

This is linked to GitHub issue #551.

github-actions · 2025-12-01T01:45:22Z

This is linked to GitHub issue #552.

github-actions · 2025-12-01T01:49:44Z

This is linked to GitHub issue #553.

iamdharmesh

Thanks for the PR @m-muhsin. Added few questions could you please check. Thanks

iamdharmesh · 2025-12-01T08:00:20Z

src/js/booking-form.js

+	 */
+	const formatDateForScreenReader = ($cell) => {
+		const $dayElement = $cell.find('span, a').first();
+		const day = $dayElement.contents().first().text().trim();


How about add formatted date attribute and use that directly instead of parsing content and generate it?

src/js/booking-form.js

src/css/frontend.scss

… generation for booked dates.

… specificity.

iamdharmesh

Thanks for the changes @m-muhsin. Added note around formattedDate not getting added. Could you please help to check? Also, Eslint action is getting failed, would be great if you can fix the reported errors there as well. Thanks.

src/js/booking-form.js

src/css/frontend.scss

…date formatting by robustly retrieving date components, and refine `addAccessibleText` targeting.

…tting.

iamdharmesh

Thanks for the changes @m-muhsin. It looks good now. Just waiting for conclude on this, once done. we are good to go.

Btw, this is fix for "WooExt-330" right? If yes, could you please update PR description. Thanks.

m-muhsin · 2025-12-11T14:50:02Z

Btw, this is fix for "WooExt-330" right? If yes, could you please update PR description. Thanks.

Yes, correct. I have updated accordingly. Thank you.

vikrampm1 · 2025-12-15T17:40:10Z

@m-muhsin is there is anything pending here or did you address all the feedback above? If yes, can you re-request review to @iamdharmesh so this can be progressed further?

…visual indicators and updated gradients for availability representation.

m-muhsin · 2025-12-17T03:25:26Z

Hi @vikrampm1. We had a discussion around this in yesterday's call. We decided to implement it like this:

I have done it likewise now.

Thanks!

src/js/booking-form.js

vikrampm1 · 2025-12-22T17:38:45Z

@m-muhsin it would be great to get these addressed soon so we can move this to the next step. Thanks!

Co-authored-by: Dharmesh Patel <[email protected]>

m-muhsin · 2025-12-22T20:21:29Z

@iamdharmesh I have now incorporated your feedback. Thanks!

CC: @vikrampm1

iamdharmesh · 2025-12-24T18:58:54Z

Thanks for the changes @m-muhsin. Changes looks good. However, I noticed that accessibility text not getting added on months other than current. Example: It works fine for current month (Dec) but not for the January

iamdharmesh · 2026-01-06T13:15:02Z

@m-muhsin Reminder for addressing this.

m-muhsin · 2026-01-06T14:16:07Z

Thanks for the reminder, @iamdharmesh. I was trying to replicate it but could not. I even checked for 2027 just in case it was for the following year.

iamdharmesh · 2026-01-06T15:39:30Z

Note: As discussed over call UI part is work well but accessibility text not getting added on months other than current. Thanks.

…r improved accessibility.

…o that it applies to other months than the current month alone.

m-muhsin · 2026-01-07T07:22:25Z

@iamdharmesh I have now added even listeners to change of month. So, the last reported issue is now sorted. Thanks!

iamdharmesh · 2026-01-09T10:50:46Z

src/js/booking-form.js

+		'change',
+		'.ui-datepicker-month, .ui-datepicker-year',
+		function () {
+			setTimeout(() => {


Do we need this setTimeout? If we don't have proper event to tag this then we might look into fix the issues in bookings itself if that's more solid way to fix this.

It was required for when testing with a throttled network. I have removed it now. Shall we address it upstream if it comes again?

@iamdharmesh as discussed I added the setTimeout back along with a comment explaining it.

iamdharmesh · 2026-01-09T10:51:55Z

Thanks for fixing it @m-muhsin. Added one question to get some information.

m-muhsin · 2026-01-11T14:28:04Z

@iamdharmesh as mentioned, in this comment, can we address it in upstream if it comes up again? I removed the setTimeout which is required for slower networks.

…n reader text for improved accessibility.

m-muhsin · 2026-01-14T10:46:41Z

@iamdharmesh I felt better to add the setTimeout so did it with a comment explaining it.

github-actions bot mentioned this pull request Dec 1, 2025

Tracking Issue for PR #550: Add screen reader accessibility features to datepicker #551

Closed

github-actions bot mentioned this pull request Dec 1, 2025

Tracking Issue for PR #550: Add screen reader accessibility features to datepicker #552

Closed

github-actions bot mentioned this pull request Dec 1, 2025

A11y: Status relies on color alone, not programatically defined (WooExt-330) #553

Open

m-muhsin self-assigned this Dec 1, 2025

m-muhsin requested a review from iamdharmesh December 1, 2025 01:51

m-muhsin changed the title ~~Add screen reader accessibility features to datepicker~~ Add partial check-in/check-out indicators and screen reader accessibility features to datepicker Dec 1, 2025

iamdharmesh requested changes Dec 1, 2025

View reviewed changes

iamdharmesh requested a review from dkotter December 1, 2025 08:11

Muhammad Muhsin added 2 commits December 5, 2025 15:09

Add data-day attribute to date cells and centralize accessible text…

6402ee3

… generation for booked dates.

Refine date picker styling for fully booked dates and update selector…

d20bd3a

… specificity.

m-muhsin requested a review from iamdharmesh December 5, 2025 11:40

iamdharmesh requested changes Dec 9, 2025

View reviewed changes

src/js/booking-form.js Outdated Show resolved Hide resolved

src/css/frontend.scss Outdated Show resolved Hide resolved

Muhammad Muhsin added 2 commits December 10, 2025 08:39

Merge branch 'trunk' into fix/wooext-328

b6cff4e

Introduce shared month and day name constants, enhance screen reader …

3153f61

…date formatting by robustly retrieving date components, and refine `addAccessibleText` targeting.

m-muhsin requested a review from iamdharmesh December 11, 2025 08:31

refactor: improve code readability and consistency with updated forma…

8ed9e72

…tting.

iamdharmesh reviewed Dec 11, 2025

View reviewed changes

Enhance date picker styling for partially booked dates with improved …

d075946

…visual indicators and updated gradients for availability representation.

m-muhsin requested review from faisal-alvi and iamdharmesh December 17, 2025 03:38

iamdharmesh reviewed Dec 18, 2025

View reviewed changes

src/js/booking-form.js Outdated Show resolved Hide resolved

Remove repeated date.

bae6b19

Co-authored-by: Dharmesh Patel <[email protected]>

m-muhsin requested a review from iamdharmesh December 22, 2025 20:21

Merge branch 'trunk' into fix/wooext-328

2b9984f

Muhammad Muhsin added 2 commits January 6, 2026 20:57

Enhance booking form attributes by adding data-month and data-year fo…

7b1aaf5

…r improved accessibility.

Add screen reader support for datepicker navigation in booking form s…

ff64f3e

…o that it applies to other months than the current month alone.

iamdharmesh reviewed Jan 9, 2026

View reviewed changes

Remove setTimeout

3190de0

Update booking form to wait for datepicker update before adding scree…

8348e4f

…n reader text for improved accessibility.

m-muhsin requested a review from iamdharmesh January 14, 2026 10:46

m-muhsin changed the title ~~Add partial check-in/check-out indicators and screen reader accessibility features to datepicker~~ Add partial check-in/check-out indicators and screen reader accessibility features to datepicker (WooExt-330) Jan 14, 2026

Add partial check-in/check-out indicators and screen reader accessibility features to datepicker (WooExt-330) #550

Are you sure you want to change the base?

Add partial check-in/check-out indicators and screen reader accessibility features to datepicker (WooExt-330) #550

Conversation

m-muhsin commented Dec 1, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

All Submissions:

Changes proposed in this Pull Request:

Steps to test the changes in this Pull Request:

Changelog entry

Uh oh!

github-actions bot commented Dec 1, 2025

Uh oh!

github-actions bot commented Dec 1, 2025

Uh oh!

github-actions bot commented Dec 1, 2025

Uh oh!

iamdharmesh left a comment

Choose a reason for hiding this comment

Uh oh!

iamdharmesh Dec 1, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

iamdharmesh left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

iamdharmesh left a comment

Choose a reason for hiding this comment

Uh oh!

m-muhsin commented Dec 11, 2025

Uh oh!

vikrampm1 commented Dec 15, 2025

Uh oh!

m-muhsin commented Dec 17, 2025

Uh oh!

Uh oh!

vikrampm1 commented Dec 22, 2025

Uh oh!

m-muhsin commented Dec 22, 2025

Uh oh!

iamdharmesh commented Dec 24, 2025

Uh oh!

iamdharmesh commented Jan 6, 2026

Uh oh!

m-muhsin commented Jan 6, 2026

Uh oh!

iamdharmesh commented Jan 6, 2026

Uh oh!

m-muhsin commented Jan 7, 2026

Uh oh!

iamdharmesh Jan 9, 2026

Choose a reason for hiding this comment

Uh oh!

m-muhsin Jan 11, 2026

Choose a reason for hiding this comment

Uh oh!

m-muhsin Jan 14, 2026

Choose a reason for hiding this comment

Uh oh!

iamdharmesh commented Jan 9, 2026

Uh oh!

m-muhsin commented Jan 11, 2026

Uh oh!

m-muhsin commented Jan 14, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

m-muhsin commented Dec 1, 2025 •

edited

Loading