Skip to content

Commit

Permalink
Fix carousels' improper aria-roledescription (#3599)
Browse files Browse the repository at this point in the history
* Fix some carousels' improper aria-roledescription

* Update CHANGELOG.md

* Fix tests
  • Loading branch information
corinagum authored Nov 11, 2020
1 parent f25d9cb commit ab8b244
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 11 deletions.
4 changes: 2 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,12 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
- [`[email protected]`](https://npmjs.com/package/sanitize-html)
- [`[email protected]`](https://npmjs.com/package/whatwg-fetch)

## Unreleased
### Fixed

### Changed
- Fixes [#3278](https://github.com/microsoft/BotFramework-WebChat/issues/3278). Update `HOOKS.md` verbiage, by [@corinagum](https://github.com/corinagum) in PR [#3564](https://github.com/microsoft/BotFramework-WebChat/pull/3564)
- Fixes [#3534](https://github.com/microsoft/BotFramework-WebChat/issues/3534). Remove 2020 deprecations, by [@corinagum](https://github.com/corinagum) in PR [#3564](https://github.com/microsoft/BotFramework-WebChat/pull/3564)
- Fixes [#3561](https://github.com/microsoft/BotFramework-WebChat/issues/3561). Remove MyGet mentions from samples, by [@corinagum](https://github.com/corinagum) in PR [#3564](https://github.com/microsoft/BotFramework-WebChat/pull/3564)
- Fixes [#3537](https://github.com/microsoft/BotFramework-WebChat/issues/3537). Fix some carousels improperly using aria-roledescription, by [@corinagum](https://github.com/corinagum) in PR [#3599](https://github.com/microsoft/BotFramework-WebChat/pull/3599)

## [4.11.0] - 2020-11-04

Expand Down
8 changes: 6 additions & 2 deletions __tests__/html/accessibility.aria-roledescription.html
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,11 @@
await pageObjects.wait(conditions.uiConnected(), timeouts.directLine);

await pageObjects.sendMessageViaSendBox('carousel', { waitForSend: true });
await pageObjects.sendMessageViaSendBox('layout double', { waitForSend: true });
await pageObjects.sendMessageViaSendBox('layout carousel', { waitForSend: true });
await pageObjects.sendMessageViaSendBox('Hello world', { waitForSend: true });
await pageObjects.sendMessageViaSendBox('receiptcard', { waitForSend: true });
await pageObjects.wait(conditions.minNumActivitiesShown(6), timeouts.directLine);
await pageObjects.wait(conditions.minNumActivitiesShown(10), timeouts.directLine);
await pageObjects.wait(conditions.scrollToBottomCompleted(), timeouts.directLine);

const invalidElements = [].filter.call(
Expand All @@ -45,7 +47,9 @@
);

invalidElements.length &&
console.error('Elements with "aria-roledescription" attribute but not "role" attribute', { invalidElements });
console.error('Elements with "aria-roledescription" attribute but not "role" attribute:', {
invalidElements
});

expect(invalidElements).toHaveProperty('length', 0);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

const messageRole = document.querySelector('.webchat__stacked-layout__message-row').getAttribute('role');

expect(messageRole).toEqual('group');
expect(messageRole).toBeTruthy();

await host.done();
})().catch(async err => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@

const attachmentRole = document.querySelector('.webchat__carousel-filmstrip__attachment').getAttribute('role');

expect(attachmentRole).toEqual('group');
expect(attachmentRole).toBeTruthy();

await host.done();
})().catch(async err => {
Expand Down
15 changes: 10 additions & 5 deletions packages/component/src/Activity/CarouselFilmStrip.js
Original file line number Diff line number Diff line change
Expand Up @@ -196,9 +196,14 @@ const CarouselFilmStrip = ({
<div className="webchat__carousel-filmstrip__avatar-gutter">{showAvatar && renderAvatar({ activity })}</div>
<div className="webchat__carousel-filmstrip__content">
{!!activityDisplayText && (
// Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
/* eslint-disable-next-line react/forbid-dom-props */
<div aria-roledescription="message" className="webchat__carousel-filmstrip__message" id={ariaLabelId}>
<div
aria-roledescription="message"
className="webchat__carousel-filmstrip__message"
// Disable "Prop `id` is forbidden on DOM Nodes" rule because we are using the ID prop for accessibility.
/* eslint-disable-next-line react/forbid-dom-props */
id={ariaLabelId}
role="group"
>
<ScreenReaderText text={greetingAlt} />
<Bubble
className="webchat__carousel-filmstrip__bubble"
Expand Down Expand Up @@ -227,10 +232,10 @@ const CarouselFilmStrip = ({
<li
aria-roledescription="attachment"
className="webchat__carousel-filmstrip__attachment react-film__filmstrip__item"
/* Attachments do not have an ID, it is always indexed by number */
/* Attachments do not have an ID; it is always indexed by number */
/* eslint-disable-next-line react/no-array-index-key */
key={index}
role="group"
role="listitem"
>
<ScreenReaderText text={attachedAlt} />
{/* eslint-disable-next-line react/no-array-index-key */}
Expand Down

0 comments on commit ab8b244

Please sign in to comment.