contentauth / c2pa-js

JavaScript SDK for displaying and validating C2PA data
https://opensource.contentauthenticity.org
MIT License
74 stars 40 forks source link

fix(#145): ManifestSummary/Tooltip/Popover accessibility #146

Open majornista opened 8 months ago

majornista commented 8 months ago

Changes in this pull request

Tooltip component used in ManifestSummary should:

  1. Trigger should be keyboard accessible as a button.
  2. Trigger should be labeled by the Tooltip and the header.
  3. Popover for Tooltip should expand on focus and close on blur.
  4. Popover should hide with Escape key and toggle on Trigger click.
  5. Fix text color contrast for --cai-secondary-color.
  6. Fix color contrast for --cai-icon-fill
  7. Add focus outline color and outline-offset to Tooltip button and View More
  8. Use <section> with aria-labelledby for PanelSection.
  9. Add role="heading" and a heading level for the .heading-text element within PanelSection
  10. Add role="img" and appropriate aria-label for each of the Icons

Types of changes

Checklist

dkozma commented 8 months ago

Thank you @majornista - we were working on updates to the ManifestSummary during the initial PR, and I see that you have updated main. We will take a look into getting this in this sprint.

majornista commented 3 months ago

@dkozma and @emensch Can we please get a review of this PR? It is a blocker for making the content credentials popover accessible. A particular concern is the DOM order of the trigger versus the content:

https://github.com/contentauth/c2pa-js/pull/146/commits/d6f2741e5f5bfc5442c3d4ce27fbcc2577af082d#diff-0af38510afd0ed067e98bb00486befb58e93e539b3d6070dff1fd2d2ae12874fL392-L420

majornista commented 1 month ago

@dkozma and @emensch Can we please get a review of this PR? It is a blocker for making the content credentials popover accessible. A particular concern is the DOM order of the trigger versus the content:

https://github.com/contentauth/c2pa-js/pull/146/commits/d6f2741e5f5bfc5442c3d4ce27fbcc2577af082d#diff-0af38510afd0ed067e98bb00486befb58e93e539b3d6070dff1fd2d2ae12874fL392-L420

Bump!