Add carousel example

[jongund]

This adds the basic carousel implementation called for by issue #458.

Preview Link

• Work is in the issue458-add-carousel-example feature branch.
• View the carousel example page in the feature branch

[mcking65]

@jongund commented:

@mcking65 I have pushed the following changes:

• Changed h2s to h3s in the slides

Looks good.

• Changed using button.disabled property to aria-disabled

Ditto

• Changed pause button labels to "Start automatic slide rotation" and "Stop automatic slide rotation"

Good, although still waiting for input from others on the mailing list. This is easy to adjust at any time if the group decides on something different.

• Added disabled property to documentation

Thank you. I'll now finish up my part of the documentation work.

[annabbott]

I can't figure out how to make edit suggestions to the text - when I go to Files, all I see is carousel code.

Second sentence of second paragraph following h1
For instance, Rotation stops when users move focus...
Lower case "r" on "rotation".

The rest looks good to me.
NOTE: I did NOT test with an AT.

[jnurthen]

Second sentence of second paragraph following h1
For instance, Rotation stops when users move focus...
Lower case "r" on "rotation".

@annabbott I added a review comment for you

[charmarkk]

I can take on researching CMS rules for us.

[jongund]

@mcking65 Removed the use of aria-describedby from each slide and updated the regression test to use new ids

[accdc]

Hi,
It looks good to me. As we spoke of during the call, minus the aria-describedby attribute.

As discovered during testing, screen reader support for aria-roledescription is still incomplete. As such, the screen reader support of this design pattern is not sufficient to justify mainstream developers to use this as part of public web technologies, but for now, this widget is something that screen reader providers can use to test against to make sure this functionality is built in as time goes on.

[mcking65]

All review comments have been addressed. Completion of regression test development is tracked by issue #969. Merging as discussed in today's meeting. Thank you all, especially @jongund, for helping bring this to life!

[shirsha]

The content over the image, and previous/next button are difficult to see due to the busyness of the image behind it. Add a background color to the buttons and insert CSS color block between the text and the image so that they can be visible even when the background image is busy.

[elamurugan-r]

a)

<section aria-roledescription="carousel" aria-labelledby="carousel-header" >
        <h1 id="carousel-header" >Popular Web series and Episodes</h1>
        <button>Trigger</button>
</section>

b)

<div role="region" aria-roledescription="carousel" aria-labelledby="carousel-header" >
        <h1 id="carousel-header" >Popular Web series and Episodes</h1>
        <button>Trigger</button>
</div>

For the above codes, axe-core-4.3.5 gives the following error eventhough using implicit/explicit aria-role:
a & b) aria-roledescription must be on elements with a semantic role.
Issue Description: Ensure aria-roledescription is only used on elements with an implicit or explicit role

Screen reader (ChromeVox) is reading the above as
a) Section Trigger button
b) Popular Web Series and its Episodes Trigger

Its not reading the text inside aria-roledescription.

FYI: Even the carousel design pattern examples provided in w3c is also not reading the aria-roledescription