Skip to content
This repository has been archived by the owner on Apr 28, 2023. It is now read-only.

Commit

Permalink
adding notes on carousel accessibility
Browse files Browse the repository at this point in the history
  • Loading branch information
stephenhmarsh committed Dec 27, 2021
1 parent aac3546 commit 5c67883
Showing 1 changed file with 11 additions and 1 deletion.
12 changes: 11 additions & 1 deletion src/components/carousel/slide/carousel-slide.stories.js
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,21 @@ import video from "../../../../.storybook/assets/video/stock-footage-a-nice-bee-
const data = {
header: "Carousel Slide",
description: html`<p>Either an image or a video, whatever.</p>
<p>A <a href="#">link</a>, perhaps?</p>`,
<p>A <a href="#">link</a>, perhaps?</p>`,
video: video,
images: image1920,
};

// TODO:
// add a snapshot test of 2-up content cards holding layout even when you delete one of the headings


// problems to solve
// if you tab into a carousel, you should get a NaS-like helper telling you that you're in a carousel/do you want to skip out (along those lines)
// - we don't want all the slides to be announced / or have to tab through all the slides (manage tabindex and aria-hidden carefully)
// - paging: 1) bubble on arrow key down from the links back up to flickity!!! 2) plan b? if there's links in the slides, how do you page the slides? (you have to tab all the way through them to get to arrows keys, and go up/down with shift+tab)
// - how do you know when the carousel has changed if you use the arrows now (aria-live/changed?)

const markup = (model, video) => {
useEffect(videoSlide);
return html`
Expand Down

0 comments on commit 5c67883

Please sign in to comment.