Skip to content

Commit

Permalink
Implement the live region so that SR can read contents of each slide …
Browse files Browse the repository at this point in the history 
…when slides change.
  • Loading branch information
@NaotoshiFujita
NaotoshiFujita committed Feb 26, 2022
1 parent 0cad6ff commit 1f4b101
Show file tree
Hide file tree
Showing 35 changed files with 678 additions and 279 deletions.
2 changes: 1 addition & 1 deletion dist/js/splide-renderer.min.js
View file

Large diffs are not rendered by default.

122 changes: 66 additions & 56 deletions dist/js/splide.cjs.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -272,10 +272,12 @@ function assert(condition, message) {
}
}

function nextTick(callback) {
setTimeout(callback);
function apply(func) {
return func.bind(null, ...slice(arguments, 1));
}

const nextTick = setTimeout;

const noop = () => {
};

Expand Down Expand Up @@ -437,7 +439,7 @@ function EventInterface(Splide2) {
function forEachEvent(targets, events, iteratee) {
forEach(targets, (target) => {
if (target) {
events.split(" ").forEach(iteratee.bind(null, target));
events.split(" ").forEach(apply(iteratee, target));
}
});
}
Expand Down Expand Up @@ -701,6 +703,7 @@ const CLASSES = {
function Elements(Splide2, Components2, options) {
const { on } = EventInterface(Splide2);
const { root } = Splide2;
const { i18n } = options;
const elements = {};
const slides = [];
let classes;
Expand All @@ -713,18 +716,16 @@ function Elements(Splide2, Components2, options) {
addClass(root, classes = getClasses());
}
function mount() {
on(EVENT_REFRESH, refresh, DEFAULT_EVENT_PRIORITY - 2);
const priority = DEFAULT_EVENT_PRIORITY - 2;
on(EVENT_REFRESH, destroy, priority);
on(EVENT_REFRESH, setup, priority);
on(EVENT_UPDATED, update);
}
function destroy() {
empty(slides);
removeClass(root, classes);
removeAttribute([root, track, list], ALL_ATTRIBUTES.concat("style"));
}
function refresh() {
destroy();
setup();
}
function update() {
removeClass(root, classes);
addClass(root, classes = getClasses());
Expand Down Expand Up @@ -757,7 +758,9 @@ function Elements(Splide2, Components2, options) {
root.id = id;
track.id = track.id || `${id}-track`;
list.id = list.id || `${id}-list`;
setAttribute(root, ARIA_ROLEDESCRIPTION, "carousel");
setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || null);
setAttribute(list, ROLE, "none");
}
function find(selector) {
return child(root, selector) || child(slider, selector);
Expand Down Expand Up @@ -785,7 +788,7 @@ const FADE = "fade";
function Slide$1(Splide2, index, slideIndex, slide) {
const { on, emit, bind, destroy: destroyEvents } = EventInterface(Splide2);
const { Components, root, options } = Splide2;
const { isNavigation, updateOnMove } = options;
const { isNavigation, updateOnMove, i18n } = options;
const { resolve } = Components.Direction;
const styles = getAttribute(slide, "style");
const isClone = slideIndex > -1;
Expand All @@ -796,7 +799,8 @@ function Slide$1(Splide2, index, slideIndex, slide) {
if (!isClone) {
slide.id = `${root.id}-slide${pad(index + 1)}`;
setAttribute(slide, ROLE, "group");
setAttribute(slide, ARIA_ROLEDESCRIPTION, "slide");
setAttribute(slide, ARIA_ROLEDESCRIPTION, i18n.slide);
setAttribute(slide, ARIA_LABEL, format(i18n.slideLabel, [index + 1, Splide2.length]));
}
listen();
}
Expand All @@ -819,7 +823,7 @@ function Slide$1(Splide2, index, slideIndex, slide) {
}
function initNavigation() {
const idx = isClone ? slideIndex : index;
const label = format(options.i18n.slideX, idx + 1);
const label = format(i18n.slideX, idx + 1);
const controls = Splide2.splides.map((target) => target.splide.root.id).join(" ");
setAttribute(slide, ARIA_LABEL, label);
setAttribute(slide, ARIA_CONTROLS, controls);
Expand Down Expand Up @@ -904,7 +908,8 @@ function Slides(Splide2, Components2, options) {
const Slides2 = [];
function mount() {
init();
on(EVENT_REFRESH, refresh);
on(EVENT_REFRESH, destroy);
on(EVENT_REFRESH, init);
on([EVENT_MOUNTED, EVENT_REFRESH], () => {
Slides2.sort((Slide1, Slide2) => Slide1.index - Slide2.index);
});
Expand All @@ -920,10 +925,6 @@ function Slides(Splide2, Components2, options) {
});
empty(Slides2);
}
function refresh() {
destroy();
init();
}
function update() {
forEach$1((Slide2) => {
Slide2.update();
Expand Down Expand Up @@ -955,7 +956,7 @@ function Slides(Splide2, Components2, options) {
const ref = slides[index];
ref ? before(slide, ref) : append(list, slide);
addClass(slide, options.classes.slide);
observeImages(slide, emit.bind(null, EVENT_RESIZE));
observeImages(slide, apply(emit, EVENT_RESIZE));
}
});
emit(EVENT_REFRESH);
Expand Down Expand Up @@ -1121,7 +1122,8 @@ function Clones(Splide2, Components2, options) {
let cloneCount;
function mount() {
init();
on(EVENT_REFRESH, refresh);
on(EVENT_REFRESH, destroy);
on(EVENT_REFRESH, init);
on([EVENT_UPDATED, EVENT_RESIZE], observe);
}
function init() {
Expand All @@ -1134,10 +1136,6 @@ function Clones(Splide2, Components2, options) {
remove(clones);
empty(clones);
}
function refresh() {
destroy();
init();
}
function observe() {
if (cloneCount < computeCloneCount()) {
emit(EVENT_REFRESH);
Expand Down Expand Up @@ -1497,8 +1495,7 @@ function Arrows(Splide2, Components2, options) {
}
if (prev && next) {
if (!arrows.prev) {
const { id } = Elements.track;
setAttribute([prev, next], ARIA_CONTROLS, id);
setAttribute([prev, next], ARIA_CONTROLS, Elements.list.id);
arrows.prev = prev;
arrows.next = next;
listen();
Expand All @@ -1517,12 +1514,8 @@ function Arrows(Splide2, Components2, options) {
function listen() {
const { go } = Controller;
on([EVENT_MOUNTED, EVENT_MOVED, EVENT_UPDATED, EVENT_REFRESH, EVENT_SCROLLED], update);
bind(next, "click", () => {
go(">", true);
});
bind(prev, "click", () => {
go("<", true);
});
bind(next, "click", apply(go, ">", true, void 0));
bind(prev, "click", apply(go, "<", true, void 0));
}
function createArrows() {
wrapper = create("div", classes.arrows);
Expand Down Expand Up @@ -1647,30 +1640,25 @@ function Cover(Splide2, Components2, options) {
const { on } = EventInterface(Splide2);
function mount() {
if (options.cover) {
on(EVENT_LAZYLOAD_LOADED, (img, Slide) => {
toggle(true, img, Slide);
});
on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply.bind(null, true));
on(EVENT_LAZYLOAD_LOADED, apply(toggle, true));
on([EVENT_MOUNTED, EVENT_UPDATED, EVENT_REFRESH], apply(cover, true));
}
}
function destroy() {
apply(false);
}
function apply(cover) {
function cover(cover2) {
Components2.Slides.forEach((Slide) => {
const img = child(Slide.container || Slide.slide, "img");
if (img && img.src) {
toggle(cover, img, Slide);
toggle(cover2, img, Slide);
}
});
}
function toggle(cover, img, Slide) {
Slide.style("background", cover ? `center/cover no-repeat url("${img.src}")` : "", true);
display(img, cover ? "none" : "");
function toggle(cover2, img, Slide) {
Slide.style("background", cover2 ? `center/cover no-repeat url("${img.src}")` : "", true);
display(img, cover2 ? "none" : "");
}
return {
mount,
destroy
destroy: apply(cover, false)
};
}

Expand Down Expand Up @@ -1860,9 +1848,7 @@ function Drag(Splide2, Components2, options) {
if (isFree) {
Controller.scroll(destination);
} else if (Splide2.is(FADE)) {
const { length } = Splide2;
const index = Splide2.index + orient(sign(velocity));
Controller.go(rewind ? (index + length) % length : index);
Controller.go(orient(sign(velocity)) < 0 ? rewind ? "<" : "-" : rewind ? ">" : "+");
} else if (Splide2.is(SLIDE) && exceeded && rewind) {
Controller.go(exceededLimit(true) ? ">" : "<");
} else {
Expand Down Expand Up @@ -1994,16 +1980,13 @@ function LazyLoad(Splide2, Components2, options) {
function mount() {
if (options.lazyLoad) {
init();
on(EVENT_REFRESH, refresh);
on(EVENT_REFRESH, destroy);
on(EVENT_REFRESH, init);
if (!isSequential) {
on([EVENT_MOUNTED, EVENT_REFRESH, EVENT_MOVED, EVENT_SCROLLED], observe);
}
}
}
function refresh() {
destroy();
init();
}
function init() {
Components2.Slides.forEach((_Slide) => {
queryAll(_Slide.slide, IMAGE_SELECTOR).forEach((_img) => {
Expand Down Expand Up @@ -2114,10 +2097,9 @@ function Pagination(Splide2, Components2, options) {
for (let i = 0; i < max; i++) {
const li = create("li", null, list);
const button = create("button", { class: classes.page, type: "button" }, li);
const controls = Slides.getIn(i).map((Slide) => Slide.slide.id);
const text = !hasFocus() && perPage > 1 ? i18n.pageX : i18n.slideX;
bind(button, "click", onClick.bind(null, i));
setAttribute(button, ARIA_CONTROLS, controls.join(" "));
bind(button, "click", apply(onClick, i));
setAttribute(button, ARIA_CONTROLS, Components2.Elements.list.id);
setAttribute(button, ARIA_LABEL, format(text, i + 1));
items.push({ li, button, page: i });
}
Expand Down Expand Up @@ -2215,6 +2197,29 @@ function Sync(Splide2, Components2, options) {
};
}

function Live(Splide2, Components2, options) {
const { on } = EventInterface(Splide2);
const { list } = Components2.Elements;
const { live } = options;
function mount() {
if (live) {
setAttribute(list, ARIA_ATOMIC, false);
disable(!Components2.Autoplay.isPaused());
on(EVENT_AUTOPLAY_PLAY, apply(disable, true));
on(EVENT_AUTOPLAY_PAUSE, apply(disable, false));
}
}
function disable(disabled) {
if (live) {
setAttribute(list, ARIA_LIVE, disabled ? "off" : "polite");
}
}
return {
mount,
disable
};
}

function Wheel(Splide2, Components2, options) {
const { bind } = EventInterface(Splide2);
function mount() {
Expand Down Expand Up @@ -2259,6 +2264,7 @@ var ComponentConstructors = /*#__PURE__*/Object.freeze({
LazyLoad: LazyLoad,
Pagination: Pagination,
Sync: Sync,
Live: Live,
Wheel: Wheel
});

Expand All @@ -2270,11 +2276,15 @@ const I18N = {
slideX: "Go to slide %s",
pageX: "Go to page %s",
play: "Start autoplay",
pause: "Pause autoplay"
pause: "Pause autoplay",
carousel: "carousel",
slide: "slide",
slideLabel: "%s of %s"
};

const DEFAULTS = {
type: "slide",
role: "region",
speed: 400,
waitForTransition: true,
perPage: 1,
Expand Down
Loading

0 comments on commit 1f4b101

Please sign in to comment.