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

refactors status-indicator imgs and related elements for ARIA labeling #6021

Merged
merged 4 commits into from
Aug 4, 2021

Conversation

cfm
Copy link
Member

@cfm cfm commented Jun 24, 2021

Status

Ready for review

Description of Changes

Resolves #5985.

This PR builds on #5996 to make more-meaningful use of both alt attributes (on img elements) and aria-* annotations (on img and other elements) in those cases where an image indicates the status of another UI element. These images are not strictly decorative, but nor is their UI role communicated (and narrated by screen-readers) from functional markup such as button elements. Instead, this more-nuanced refactoring (a) simplifies the existing markup (and narration) and (b) establishes narratable relationships between elements.

This PR (especially cbff6b9) can be thought of as the prototype for the top-down semantic refactoring proposed in #5986 and #5987.

Testing

With a screen-reader running:

  1. Journalist Interface → log in as a journalist: Observe that a source's "star" button, un/starred status, selection checkbox, and link are announced separately and logically, before the other information in the row.
  2. Journalist Interface → log in as a journalist → select a source: Observe that a document's name, un/read status, and type are announced together; followed by its selection checkbox; followed by the other information in the row.

Deployment

No special considerations.

Checklist

If you made changes to the server application code:

  • Linting (make lint) and tests (make test) pass in the development container

@cfm cfm requested a review from zenmonkeykstop June 24, 2021 22:23
@codecov-commenter
Copy link

codecov-commenter commented Jun 24, 2021

Codecov Report

Merging #6021 (94a5a3a) into develop (0589168) will not change coverage.
The diff coverage is n/a.

Impacted file tree graph

@@           Coverage Diff            @@
##           develop    #6021   +/-   ##
========================================
  Coverage    85.11%   85.11%           
========================================
  Files           55       55           
  Lines         3863     3863           
  Branches       479      479           
========================================
  Hits          3288     3288           
  Misses         463      463           
  Partials       112      112           

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 0589168...94a5a3a. Read the comment docs.

cfm added 4 commits June 29, 2021 15:05
Icon IMGs now carry their own TITLE tooltips, eliminating the SPAN
elements originating in #382.  Each LI.submission carries an ARIA label
composed from those of its filename link, file-type icon, and read-state
icon.
@cfm cfm force-pushed the img-aria-annotations branch from cbff6b9 to 94a5a3a Compare June 29, 2021 22:06
@cfm cfm marked this pull request as ready for review June 29, 2021 22:07
@cfm cfm requested a review from a team as a code owner June 29, 2021 22:07
Copy link
Contributor

@SaptakS SaptakS left a comment

Choose a reason for hiding this comment

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

As long as #6041 (comment) is addressed in a separate PR, I think this is ready to be merged.

Copy link
Contributor

@rmol rmol left a comment

Choose a reason for hiding this comment

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

👍 Agree that the label semantics can be improved later, but Orca, at least, reads this current work well.

@rmol rmol merged commit 980039b into develop Aug 4, 2021
@rmol rmol deleted the img-aria-annotations branch August 4, 2021 15:13
@eloquence eloquence added this to the 2.1.0 milestone Sep 28, 2021
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.

status-indicator imgs need explanatory alts and ARIA annotations
5 participants