PR #550 did not have a linked issue, so this issue has been created for tracking purposes.
WooExt-330
Dates that are fully booked and not available have a pink background. Dates that have partial availability (check-in or check-out only) also have a pink background. There is a title attribute attribute that communicates this information, but it is not read out to screen readers only.
There is no way to distinguish partly available and unavailable days visually. Available days are only different from unavailables because of their color.
This issue is related to WooExt-318 in the Bookings report.
Recommended fix
Add the availability information to the span like this:
1 November 2025, Saturday, Fully booked and unavailable.
Alternatively, use buttons instead of spans for unavailable dates and add the disabled attribute and aria-disabled="true" to the button.
For partially available dates, the information must be added to the accessible name:
1 November 2025, Saturday. Available for check-in only.
For sighted people, come up with a better way of distinguishing available, partially available, or unavailable days. For example, add an icon, slash or partial background through the dates that are partially available. The plugin used to do this but not longer does (as shown here: https://github.com/woocommerce/woocommerce-accommodation-bookings/issues/201#issuecomment-469707765)..) If reimplementing, there needs to be atleast 3:1 contrast between the two colors and they should not be red/green as this is a common color-blind combination. It may be easiest to denote with a shape on each type of day, such as a solid circle if available, an outlined circle if partially available, and nothing if unavailable.
PR #550 did not have a linked issue, so this issue has been created for tracking purposes.
WooExt-330
Dates that are fully booked and not available have a pink background. Dates that have partial availability (check-in or check-out only) also have a pink background. There is a title attribute attribute that communicates this information, but it is not read out to screen readers only.
There is no way to distinguish partly available and unavailable days visually. Available days are only different from unavailables because of their color.
This issue is related to WooExt-318 in the Bookings report.
Recommended fix
Add the availability information to the span like this:
1 November 2025, Saturday, Fully booked and unavailable.
Alternatively, use buttons instead of spans for unavailable dates and add the disabled attribute and aria-disabled="true" to the button.
For partially available dates, the information must be added to the accessible name:
1 November 2025, Saturday. Available for check-in only.
For sighted people, come up with a better way of distinguishing available, partially available, or unavailable days. For example, add an icon, slash or partial background through the dates that are partially available. The plugin used to do this but not longer does (as shown here: https://github.com/woocommerce/woocommerce-accommodation-bookings/issues/201#issuecomment-469707765)..) If reimplementing, there needs to be atleast 3:1 contrast between the two colors and they should not be red/green as this is a common color-blind combination. It may be easiest to denote with a shape on each type of day, such as a solid circle if available, an outlined circle if partially available, and nothing if unavailable.