Description

Motivation & context

This adds the Carousel web component with both the Basic and Tabbed patterns of ARIA as defined here:
https://w3c.github.io/aria-practices/#carousel
https://w3c.github.io/aria-practices/#basic-carousel-elements
https://w3c.github.io/aria-practices/#tabbed-carousel-elements

It adds a Carousel Test Slide component for use in the Carousel Fixtures.

This ALSO required some minor non-breaking changes to Tabs listed below:

• some methods and properties changed to public so they can be overridden when Tabs is extended
• adds activeSlideIdChanged to properly handle the activeSlideId attr being updated

This ALSO requires changes to Flipper:

• Now extends ARIAGlobalStatesAndProperties to allow for the use of aria-label and aria-labelledby

Questions: Please comment on this!

• Should we expose methods for the author to implement their own custom methods for flexibility?

  • Autoplay, autoplay timer,
  • Rotation control (could have a public increment method that is built in for the custom Rotation control method to use)
  • Hover effect (typically used for pausing the slides when mouse is hovering over)

• Or should all/any of the above methods baked in to the controller and strictly controlled per ARIA spec?

Notes:

1. Currently these items are built in per ARIA spec:

• The Carousel pauses rotation whenever the mouse is over the carousel OR the content is in focus.

• Per ARIA spec it also stops rotation anytime keyboard focus is brought to any part of the carousel, AND is not restarted unless the user specifically activates the rotation control button.

  • The ARIA example does NOT do the above as it states to "restart the rotation once keyboard focus leaves the Carousel", so the ARIA spec/examples are in disagreement depending on how "not restarted unless the user specifically activates the rotation control button" is interpreted.
    With that in mind I have chosen to interpret it as to NOT restart the rotation when keyboard focus leaves as this may be a disruptive feature for AT users.
  • For this implementation, if the user has chosen to specifically restart the rotation the carousel stays rotating until the carousel is re-focused and the rotation control is triggered. This is my interpretation and I'd appreciate it if others chimed in on what they think is the right way to handle the spec. I plan to write to ARAI for clarification.

2. The original FAST Carousel Spec stated that a reference to active slide would be passed when a change is emitted for the Author to read states like paused and activeid, but the active slide does not have access to these properties so the change emitted now passes a reference to the Carousel where those states can properly be read.

Issue type checklist

• Chore: A change that does not impact distributed packages.
• Bug fix: A change that fixes an issue, link to the issue above.
• New feature: A change that adds functionality.

Is this a breaking change?

• This change causes current functionality to break.

Adding or modifying component(s) in @microsoft/fast-components checklist

• I have added a new component
• I have modified an existing component
• I have updated the definition file
• I have updated the configuration file

Process & policy checklist

• I have added tests for my changes.
• I have tested my changes.
• I have updated the project documentation to reflect my changes.
• I have read the CONTRIBUTING documentation and followed the standards for this project.