Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(calendar): clipped text for static calendars #2019

Merged
merged 6 commits into from
Mar 27, 2023
Merged

Conversation

LuLaValva
Copy link
Member

@LuLaValva LuLaValva commented Mar 23, 2023

  • This PR contains CSS changes
  • This PR does not contain CSS changes

Description

A few minor clean-up changes that were noticed during review of the date input on eBayUI:

  • span should now have full support for aria-disabled so there is no need for the calendar__cell--disabled class
  • In the static calendar, aria-label is replaced with an additional clipped span
  • There is now indication that a button is active (I opted for bolded text, this may be debated in the comments)

Checklist

  • I verify the build is in a non-broken state
  • I verify all changes are within scope of the linked issue
  • I regenerated all CSS files under dist folder
  • I tested the UI in all supported browsers
  • I did a visual regression check of the components impacted by doing a Percy build and approved the build
  • I tested the UI in dark mode and RTL mode
  • I added/updated/removed Storybook coverage as appropriate

@LuLaValva LuLaValva self-assigned this Mar 23, 2023
@LuLaValva
Copy link
Member Author

Thanks for the comments Ian, I think I've addressed everything that you pointed out

@ianmcburnie
Copy link
Contributor

Last changes needed:

For interactive, move aria-current onto the button.
For non-interactive, replace aria-current on td with clipped text in span.

@LuLaValva
Copy link
Member Author

Thanks for the quick reviews Ian, much appreciated

Copy link
Contributor

@ianmcburnie ianmcburnie left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks Luke! You have the patience of a saint :-)

@LuLaValva LuLaValva changed the title feat(calendar): better support for screen readaers on static calendars feat(calendar): better support for screen readers on static calendars Mar 24, 2023
@LuLaValva LuLaValva changed the title feat(calendar): better support for screen readers on static calendars feat(calendar): clipped text for static calendars Mar 24, 2023
@LuLaValva
Copy link
Member Author

Ok, here's a summary of the changes made here that need to be reflected in ebayui-core.

All calendar cells:

  • td that used aria-selected="true" now uses class="calendar__cell--selected", and (configurable) "selected" text must be added to the aria-label of buttons or to the clipped text of spans.

Interactive calendar cells:

  • Move aria-current="date" from td to button

Static calendar cells:

  • all aria labels should be moved to clipped text
  • td aria-current="date" > span `##`
    should be transformed to
    td > span.calendar__cell--current `##` > span.clipped ` - [configurable text]`
    where the default text is "today"
  • Spans with the calendar__cell--disabled class should have configurable clipped text that defaults to "inactive"

@agliga agliga merged commit b918593 into 16.0.0 Mar 27, 2023
@ianmcburnie ianmcburnie deleted the static-calendar-a11y branch June 2, 2023 23:04
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants