The appointments lists have some overzealous aria labelling that can be removed to clarify for screenreader users. See CC ticket #55864 and #55851 for full context on these changes. These changes are for both the upcoming and past appts lists.
For the aria-label on a div in the first column of each appointment:
Remove the aria-label attribute, and move its content into <span class="sr-only"> tags inside the div it's currently attached to. (aria-label isn't a valid attribute for divs)
Remove the text appointment on from the content. The span should just contain the date information, i.e.: <span class="sr-only">Friday, September 20, 9:40 a.m. Pacific Time</span>
Remove <span class="sr-only">Appointments in</span> from the H2 month/year headings:
Remove the aria-labelledby attribute from the ul that follows the heading. The context of the heading is enough to create the association. (Also remove the ID on the heading if this isn't being used for other functionality).
Development Checklist
Background: the toggle toggle is on (remove if not needed)
[ ] Task 1
[ ] Task 2
Design Assets
N/A
Developer Reference
[Swagger File]() (remove if not needed)
[File path]() (remove if not needed)
Definition of Done
[ ] All tasks criteria are met
[ ] [Technical Documentation]() is updated (must confirm if needed/or remove)
How to configure this issue (Delete this section before creating the ticket)
[ ] Attached to a Feature (what body of work is this a part of?)
[ ] Labeled with Practice Area (backend, frontend, devops, design, research, product, ia, qa, analytics, contact center, research, accessibility, content)
[ ] Labeled with Type (bug, request, discovery, documentation, etc.)
Description
The appointments lists have some overzealous aria labelling that can be removed to clarify for screenreader users. See CC ticket #55864 and #55851 for full context on these changes. These changes are for both the upcoming and past appts lists.
aria-label
attribute, and move its content into<span class="sr-only">
tags inside the div it's currently attached to. (aria-label
isn't a valid attribute fordiv
s)appointment on
from the content. The span should just contain the date information, i.e.:<span class="sr-only">Friday, September 20, 9:40 a.m. Pacific Time</span>
<span class="sr-only">Appointments in</span>
from the H2 month/year headings:aria-labelledby
attribute from the ul that follows the heading. The context of the heading is enough to create the association. (Also remove the ID on the heading if this isn't being used for other functionality).Development Checklist
Background: the
toggle
toggle is on (remove if not needed)Design Assets
Developer Reference
Definition of Done
How to configure this issue (Delete this section before creating the ticket)
backend
,frontend
,devops
,design
,research
,product
,ia
,qa
,analytics
,contact center
,research
,accessibility
,content
)bug
,request
,discovery
,documentation
, etc.)