Skip to content

Adds custom middleware for rendering attachment in live region for screen reader#3548

Merged
compulim merged 21 commits intomicrosoft:masterfrom
compulim:feat-accessibility-narrate-attachments
Oct 26, 2020
Merged

Adds custom middleware for rendering attachment in live region for screen reader#3548
compulim merged 21 commits intomicrosoft:masterfrom
compulim:feat-accessibility-narrate-attachments

Conversation

@compulim
Copy link
Copy Markdown
Contributor

@compulim compulim commented Oct 20, 2020

Fixes #3547.

Changelog Entry

Fixed

Description

Added new middleware for rendering attachment in screen reader.

Added default renderer for built-in attachment types, including Adaptive Cards, rich cards, and other media.

Design

Today, the screen reader narrate "Bot said: Hi I am Clara. 1 attachment."

Tomorrow, the screen reader will narrate "Bot said: Hi I am Clara. Card: I agree button. I don't agree button."

The DOM tree rendered in live region need to be simplified. Thus, we provide a new middleware for rendering attachments specific for live region.

Specific Changes

  • Added new useCreateAttachmentForScreenReaderRenderer hook
  • Updated ScreenReaderActivity to render using the new middleware
  • Added middleware for built-in attachment types
  • 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 packages/component/src/Utils/Fade.js Outdated
Comment thread packages/testharness/src/conditions/mediaBuffered.js Outdated
Comment thread packages/component/src/Localization/yue.json
Comment thread __tests__/html/accessibility.liveRegionAttachment.adaptiveCard.html
Comment thread CHANGELOG.md Outdated
Comment thread docs/HOOKS.md Outdated
"ADAPTIVE_CARD_ERROR_BOX_TITLE_PARSE": "Adaptive Card parse error",
"ADAPTIVE_CARD_ERROR_BOX_TITLE_RENDER": "Adaptive Card render error",
"ATTACHMENT_AUDIO": "An audio clip.",
"ATTACHMENT_CARD": "A card: $1 $2 $3",
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Do we want to specify attachment here? "A card attachment: $1 $2 $3"

Comment thread packages/bundle/src/adaptiveCards/hooks/internal/useParseAdaptiveCardJSON.js Outdated
Comment thread packages/component/src/Composer.js Outdated
Copy link
Copy Markdown
Contributor

@corinagum corinagum left a comment

Choose a reason for hiding this comment

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

Approved, pending comments

@compulim compulim merged commit df4c2ff into microsoft:master Oct 26, 2020
@compulim compulim deleted the feat-accessibility-narrate-attachments branch October 26, 2020 18:05
@compulim compulim mentioned this pull request Oct 29, 2020
48 tasks
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.

[Accessibility] Custom render attachment for screen reader

2 participants