Skip to content

Allow carousel's scrollable content to be tab-able with visual focus#3841

Merged
corinagum merged 13 commits intomicrosoft:masterfrom
corinagum:3814
Apr 16, 2021
Merged

Allow carousel's scrollable content to be tab-able with visual focus#3841
corinagum merged 13 commits intomicrosoft:masterfrom
corinagum:3814

Conversation

@corinagum
Copy link
Copy Markdown
Contributor

@corinagum corinagum commented Apr 9, 2021

Fixes #3814
Fixes #3835

Changelog Entry

Description

Carousel focus on children needed to be added in order to allow tabbing and AT to read contents.

Focus style will match from the following variables:
transcriptVisualKeyboardIndicatorColor
transcriptVisualKeyboardIndicatorStyle
transcriptVisualKeyboardIndicatorWidth

Specific Changes

#3814 - Allow carousel's scrollable content to be tab-able with visual focus

  • Add tabindex to carousel card(s)
  • Add focus indicator to carousel's children

#3835 - Ensure carousel attachments are read by AT on focus

  • Fixed by 3814; No test because we don't have a way to verify if AT reads content or not

[Other]

  • update CODEOWNERS
  • eslint comments in Playground
  • Remove unused asset from focusManagement.(...).html test
  • 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/focusManagement.sendFailedRetry.html
Comment thread packages/playground/src/index.js
Comment thread packages/playground/src/registerServiceWorker.js
@corinagum
Copy link
Copy Markdown
Contributor Author

corinagum commented Apr 10, 2021

This won't be merge-able until #3836 gets in due to MB changes

3836 is merged

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.

Need some work to make it conform with CSS BEM.

Comment thread packages/component/src/Activity/CarouselFilmStrip.js Outdated
Comment thread packages/component/src/Styles/StyleSet/CarouselFilmStrip.ts Outdated
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.

Looks great!

Comment thread packages/component/src/Styles/StyleSet/CarouselFilmStripAttachment.ts Outdated
Comment thread packages/component/src/Styles/StyleSet/CarouselFilmStripAttachment.ts Outdated
@corinagum corinagum enabled auto-merge (squash) April 16, 2021 20:06
@corinagum corinagum merged commit 0cfa100 into microsoft:master Apr 16, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

2 participants