Skip to content

Fix Narrator reading out attachments and timestamps in transcript#2226

Merged
corinagum merged 9 commits intomicrosoft:masterfrom
corinagum:fix-2193
Jul 29, 2019
Merged

Fix Narrator reading out attachments and timestamps in transcript#2226
corinagum merged 9 commits intomicrosoft:masterfrom
corinagum:fix-2193

Conversation

@corinagum
Copy link
Copy Markdown
Contributor

@corinagum corinagum commented Jul 25, 2019 •
edited
Loading

Fixes #2193
Fixes #2150

Changelog Entry

Description

A previous change to Web Chat made screenreaders ignore attachments and the timestamp. attachments will no longer be ignored, and timestamps have been set to be read as mm/dd/ hh:mm by the narrator.

Specific Changes

  • Minor sample link fix on root README
  • To reduce linting errors, React Legacy Lifecycle methods have been updated with the UNSAFE_ prefix.
  • <span> has been added in Web Chat to force screen reader to behave more uniformly across browsers. To prevent the screen reader reading the same thing twice, the corresponding displayed element has been marked with aria-disabled=true
  • There is an Edge bug where Adaptive Cards read by Narrator does not read some texts. This is not a Web Chat issue, unfortunately
  • NVDA does not read timestamps in the correct order. This is also a browser issue. :/

Please note that there have been additions made to our Localization strings, and native speakers of non-English languages are invited to perform PRs with these new additions. Thank you! :)

Testing json file:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json",
  "type": "AdaptiveCard",
  "version": "1.0",
  "body": [
    {
      "type": "Image",
      "url": "http://herbi.org/ImagesNew/Glass.jpg",
      "altText": "A stained-glass window of the Ninja Bot",
      "size": "stretch"
    },
    {
      "type": "TextBlock",
      "spacing": "medium",
      "size": "default",
      "weight": "bolder",
      "text": "Welcome to Bill the Ninja Bot 2019!",
      "wrap": true,
      "maxLines": 0
    },
    {
      "type": "TextBlock",
      "size": "default",
      "isSubtle": "yes",
      "text": "Ask me anything!",
      "wrap": true,
      "maxLines": 0
    }
  ],
  "actions": [
    {
      "type": "Action.OpenUrl",
      "title": "Learn about Azure Cognitive Services",
      "url": "https://azure.microsoft.com/en-us/services/cognitive-services/"
    }
  ]
}
  • Testing Added

@coveralls
Copy link
Copy Markdown

coveralls commented Jul 25, 2019

Coverage Status

Coverage increased (+0.06%) to 64.94% when pulling 18d2d01 on corinagum:fix-2193 into 18a9a3b on microsoft:master.

compulim
compulim approved these changes Jul 26, 2019
View reviewed changes
Copy link
Copy Markdown
Contributor

@compulim compulim left a comment •
edited by corinagum
Loading

Choose a reason for hiding this comment

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

  • In CarouselFilmStrip.js line 143, you will see <Timestamp ... />. Can you remove the aria-hidden prop there? It is because Timestamp.js no longer support aria-hidden prop.
  • Also in CarouselFilmStrip.js line 132, you will see <Bubble fromUser...>, this one does not set the required aria-hidden prop.

Thanks for cleaning up unused props. 👍

Comment thread packages/component/src/Activity/StackedLayout.js
Comment thread packages/component/src/Activity/Timestamp.js Outdated
Comment thread packages/component/src/Activity/Bubble.js Outdated
Comment thread packages/component/src/Attachment/DownloadAttachment.js Outdated
Comment thread packages/component/src/Attachment/Assets/DownloadIcon.js Outdated
Comment thread packages/component/src/Attachment/TextContent.js Outdated
Comment thread packages/component/src/ErrorBox.js Outdated
Comment thread CHANGELOG.md Outdated
Comment thread packages/component/src/Activity/SendStatus.js Outdated
Comment thread packages/component/src/Localization/getLocaleString.js
@corinagum corinagum marked this pull request as ready for review July 27, 2019 00:31
@corinagum
Copy link
Copy Markdown
Contributor Author

corinagum commented Jul 27, 2019

Okay, final fixes are in. I'll do one more sanity check before merging, probably by Monday. If anyone wants to comment or pull this branch to test before that merge, please feel free to do so. :)

@corinagum corinagum merged commit f5b8db5 into microsoft:master Jul 29, 2019
compulim pushed a commit that referenced this pull request Jul 30, 2019
@corinagum @compulim
Fix Narrator reading out attachments and timestamps in transcript (#2226
dd87318 
)

* Fix README sample link

* Update Legacy lifecycle methods to UNSAFE_

* fix #2193: Attachments not spoken by Narrator

* Add timestamp back to aria-labels

* fixes

* PR fixes

* Apply PR fixes
@compulim compulim mentioned this pull request Aug 2, 2019
Closed
@cimbis cimbis mentioned this pull request Aug 7, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@compulim compulim compulim approved these changes

@a-b-r-o-w-n a-b-r-o-w-n Awaiting requested review from a-b-r-o-w-n a-b-r-o-w-n is a code owner

@cwhitten cwhitten Awaiting requested review from cwhitten cwhitten is a code owner

@tonyanziano tonyanziano Awaiting requested review from tonyanziano

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

3 participants

@corinagum @coveralls @compulim