Skip to content

Fix accessibility issues due to aria-hidden and aria-labelledby in FileContent and CarouselFilmStrip#3836

Merged
corinagum merged 6 commits intomicrosoft:masterfrom
corinagum:a11y-fastpass
Apr 11, 2021
Merged

Fix accessibility issues due to aria-hidden and aria-labelledby in FileContent and CarouselFilmStrip#3836
corinagum merged 6 commits intomicrosoft:masterfrom
corinagum:a11y-fastpass

Conversation

@corinagum
Copy link
Copy Markdown
Contributor

@corinagum corinagum commented Apr 7, 2021

Fixes #3810
Fixes #3811

Changelog Entry

Description

This contains a few accessibility fixes when running FastPass on Web Chat.

Specific Changes

#3810 - Ensures aria-hidden elements do not contain focusable elements

  • FileContent.js: Add aria-label alt text to download link, which was previously not being read.
  • FileContent.js: Remove erroneous aria-hidden=true
  • FileContent.js: Remove <ScreenReaderText />

#3811 - Ensure all ARIA attributes have valid values

  • CarouselFilmStrip.js - remove erroneous aria-labelledby attribute
    • aria-labelledby is intended for visible text attributed as the label
    • When this is removed, no new a11y violations are detected
    • Remove (now)unused ariaID
  • I have added tests and executed them locally
  • I have updated CHANGELOG.md
  • I have updated documentation

Review Checklist

This section is for contributors to review your work.

  • Accessibility reviewed (tab order, content readability, alt text, color contrast)
  • Browser and platform compatibilities reviewed
  • CSS styles reviewed (minimal rules, no z-index)
  • Documents reviewed (docs, samples, live demo)
  • Internationalization reviewed (strings, unit formatting)
  • package.json and package-lock.json reviewed
  • Security reviewed (no data URIs, check for nonce leak)
  • Tests reviewed (coverage, legitimacy)

Comment thread __tests__/html/accessibility.activity.stackedLayoutRole.html
Comment thread samples/05.custom-components/l.disable-adaptive-cards/index.html
@corinagum corinagum changed the title A11y fastpass Fix accessibility issues due to aria-hidden and aria-labelledby in FileContent and CarouselFilmStrip Apr 7, 2021
Comment thread packages/component/src/Activity/CarouselFilmStrip.js
Copy link
Copy Markdown
Contributor

@compulim compulim left a comment

Choose a reason for hiding this comment

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

Simpler code. :)

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.

aria-valid-attribute: Ensures all ARIA attributes have valid values aria-hidden-focus: Ensures aria-hidden elements do not contain focusable elements

2 participants