c2pa-js icon indicating copy to clipboard operation
c2pa-js copied to clipboard

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

Open majornista opened this issue 4 months ago • 1 comments

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

  • [x] Bug fix (non-breaking change which fixes an issue)
  • [x] New feature (non-breaking change which adds functionality)
  • [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist

  • [ ] All applicable changes have been documented
  • [ ] Any TO DO items (or similar) have been entered as GitHub issues and the link to that issue has been included in a comment

majornista avatar Mar 05 '24 22:03 majornista