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.

Sign up for GitHub

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

Jump to bottom

Custom calendar VoiceOver improvements #17756

Merged
merged 6 commits into from
Jan 14, 2022
Merged

Custom calendar VoiceOver improvements #17756

merged 6 commits into from
Jan 14, 2022

Conversation

joshheald
Copy link
Contributor

@joshheald joshheald commented Jan 13, 2022 •
edited
Loading

Part of #15722

Description

This improves the VoiceOver announcements for the calendars in a variety of ways. Each commit covers one of the five areas detailed below, and the commit message gives details on exactly what changes are made, what the previous state was, and why the changes are improvements. Testing notes below cover the changes which I made.

Addresses:

  • Calendar accessibility: Add heading trait to month headings for navigation
  • Calendar accessibility: Announce selected dates as selected
  • Calendar accessibility: Announce weekday for selectable dates, instead of as headings
  • Calendar accessibility: Announce current selection as a date range
  • Calendar accessibility: Give descriptive accessibilityLabels to the previous/next month buttons on Schedule Post

To test:

On the Activity Log for a site with filters available:

Scenario 1

  1. Open the date filter with VoiceOver enabled
  2. Swipe left repeatedly until you get to a date cell
  3. Observe that the date range heading is announced as a heading, as "No date range selected"
  4. Observe that you do not land on the Weekday headings (M,T,W,T,F,S,S) in this process.

Scenario 2

  1. Select heading navigation in the rotor
  2. Swipe up with 2 fingers to start at the top of the screen
  3. Swipe down with 1 finger to go from one heading to the next
  4. Observe that the cursor stops at each of the month headings within the calendar

Scenario 3

  1. While on a month heading, swipe right with 1 finger to go to a date cell
  2. Observe that the weekday is read out at the start of the date
  3. Observe that the control is specified as a button in the announcement

Scenario 4

  1. Double tap to select a date
  2. Observe that the date is announced with the word "selected" in the announcement
  3. Swipe up with 2 fingers to read the screen from the top
  4. Observe that the date range heading is read as "Selected range: {date} only"
  5. Double tap on the first date cell it gets to
  6. Repeat from step 3, and observe that the date range heading is read as "Selected range: {date1} to {date2}"

On the Schedule Post calendar:

Scenario 5

  1. Open the date filter with VoiceOver enabled
  2. Swipe left repeatedly until you get to a date cell (major known issue - it will be Jan 1 1951!)
  3. Observe that the previous/next month headers are announced as "Previous month" and "Next month"
  4. Observe that you do not land on the Weekday headings (M,T,W,T,F,S,S) in this process.

Scenario 6

  1. Tap on a date cell
  2. Observe that the weekday is read out at the start of the date
  3. Observe that the control is specified as a button in the announcement

Scenario 7

  1. Double tap to select a date
  2. Observe that the date is announced with the word "selected" in the announcement

Screenshots

This video covers the above testing scenarios in order. Sound on!

VoiceOver.improvements.on.calendars.mp4

Regression Notes

  1. Potential unintended areas of impact
    There are no other areas where the Calendar is used, and both uses have been carefully tested for these changes. The calendars do behave differently but share code, so both should be tested.

  2. What I did to test those areas of impact (or what existing automated tests I relied on)
    Navigating, selecting, changing dates using Voiceover.

  3. What automated tests I added (or what prevented me from doing so)
    None

PR submission checklist:

  • I have completed the Regression Notes.
  • I have considered adding unit tests for my changes.
  • I have considered adding accessibility improvements for my changes.
  • I have considered if this change warrants user-facing release notes and have added them to RELEASE-NOTES.txt if necessary.

@joshheald
15722 Add heading trait to months for navigation
9b59f9c 
VoiceOver users typically navigate by headings, rather than by scrolling.

Previously, the "January 2022" headers within the calendar collection view were not accessible via voiceover Headings navigation.

This change allows a VoiceOver user to step through the months one at a time.
@joshheald
15722 Announce weekday for selectable dates
78a0b8c 
Previously, the weekday headers were individually selectable accessibility elements, which were not linked in the VoiceOver heirarchy with the DateCells which they related to.
This meant that in VoiceOver, there was no way to know what day of the week the focused day was, and the user had to swipe through the unusable day of the week headings before getting to the DateCells.

This change removes the weekday headings from the VoiceOver heirarchy, and announces the weekday along with the date when the user focuses on a DateCell, e.g. "Wednesday, 12th January 2022".
@joshheald
15722 Calendar a11y: Announce selected dates
3f8aebd 
Previously, there were no indicators to VoiceOver users that dates were selectable, nor which dates were selected.

Announces date cells as buttons, with those at the beginning and end of of a range, or individually selected, annouced as "Selected".

e.g. VoiceOver would announce "Selected, Thursday, the sixth of January, 2022, button" for a selected date, or "Friday, the seventh of January, 2022, button" for an unselected date.
@joshheald
15722 Announce calendar selection as a date range
0802076 
Previously, the date range header in the Activity Log calendar filter was announced by VoiceOver as three separate elements. They were read as "Start date; hyphen; End date" or "The fifth of January, 2021; hyphen; End date" or "The fifth of January, 2021; hyphen; The seventh of January, 2021".

This did not give good context to the user that it represented the selection made in the calendar, nor the true meaning of these labels.

This change makes VoiceOver read the summary as a single element, with a localized accessibilty label that describes the selection the user has made.

First: "No date range selected"
With one selection: "Selected range: the fifth of January, 2021 only"
With two selections: "Selected range: the fifth of January 2021 to the seventh of January 2021"

N.B. selecting 1 date only is valid, and the user can tap done in that state. This filter shows only that day's logs, not an open ended search to today.
@joshheald
15722 Monthly calendar accessibility improvements
3443c86 
Gives descriptive accessibilityLabels to the previous/next month buttons on Schedule Post
@joshheald joshheald added this to the 19.1 milestone Jan 13, 2022
@joshheald joshheald self-assigned this Jan 13, 2022
@peril-wordpress-mobile
Copy link

peril-wordpress-mobile bot commented Jan 13, 2022 •
edited
Loading

You can trigger an installable build for these changes by visiting CircleCI here.

@peril-wordpress-mobile
Copy link

peril-wordpress-mobile bot commented Jan 13, 2022 •
edited
Loading

You can trigger optional UI/connected tests for these changes by visiting CircleCI here.

momo-ozawa
momo-ozawa approved these changes Jan 14, 2022
View reviewed changes
Copy link
Contributor

@momo-ozawa momo-ozawa left a comment

Choose a reason for hiding this comment

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

💯 LGTM! Thank you for your detailed commit messages -- it made it way easier to understand the issue you were solving and your solution!

@joshheald joshheald merged commit e4c226e into develop Jan 14, 2022
@joshheald joshheald deleted the issue/15722-custom-calendar-accessibility-improvements branch January 14, 2022 10:01
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@momo-ozawa momo-ozawa momo-ozawa approved these changes

@leandroalonso leandroalonso Awaiting requested review from leandroalonso

Assignees

@joshheald joshheald

Labels
Accessibility Activity Log
Projects
None yet
Milestone
19.1
Development

Successfully merging this pull request may close these issues.
2 participants
@joshheald @momo-ozawa