Skip to content

Commit 453ae88

Browse files
NaotoshiFujitaNaotoshiFujita
committed
Make label and labelledby options responsive for destruction.
1 parent c718299 commit 453ae88

18 files changed

Lines changed: 188 additions & 164 deletions

File tree

‎dist/js/splide-renderer.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/splide.cjs.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ function assign(object) {
163163
}
164164

165165
function merge(object) {
166-
slice(arguments).forEach(function (source) {
166+
slice(arguments, 1).forEach(function (source) {
167167
forOwn(source, function (value, key) {
168168
if (isArray(value)) {
169169
object[key] = value.slice();
@@ -603,20 +603,20 @@ function Media(Splide2, Components2, options) {
603603
}
604604

605605
function update() {
606+
var destroyed = Splide2.state.is(DESTROYED);
606607
var direction = options.direction;
607608
var merged = queries.reduce(function (merged2, entry) {
608609
return merge(merged2, entry[1].matches ? entry[0] : {});
609610
}, {});
610611
omit(options);
611-
merge(options, merged);
612+
Splide2.options = merged;
612613

613614
if (options.destroy) {
614615
Splide2.destroy(options.destroy === "completely");
615-
} else if (Splide2.state.is(DESTROYED)) {
616+
} else if (destroyed) {
616617
destroy(true);
617618
Splide2.mount();
618619
} else {
619-
Splide2.options = merged;
620620
direction !== options.direction && Splide2.refresh();
621621
}
622622
}
@@ -680,12 +680,13 @@ var ARIA_CONTROLS = ARIA_PREFIX + "controls";
680680
var ARIA_CURRENT = ARIA_PREFIX + "current";
681681
var ARIA_SELECTED = ARIA_PREFIX + "selected";
682682
var ARIA_LABEL = ARIA_PREFIX + "label";
683+
var ARIA_LABELLEDBY = ARIA_PREFIX + "labelledby";
683684
var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
684685
var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
685686
var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
686687
var ARIA_LIVE = ARIA_PREFIX + "live";
687688
var ARIA_RELEVANT = ARIA_PREFIX + "relevant";
688-
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
689+
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
689690
var CLASS_ROOT = PROJECT_CODE;
690691
var CLASS_TRACK = PROJECT_CODE + "__track";
691692
var CLASS_LIST = PROJECT_CODE + "__list";
@@ -758,8 +759,6 @@ function Elements(Splide2, Components2, options) {
758759
var i18n = options.i18n;
759760
var elements = {};
760761
var slides = [];
761-
var rootRole = getAttribute(root, ROLE);
762-
var rootLabel = getAttribute(root, ARIA_LABEL);
763762
var rootClasses = [];
764763
var trackClasses = [];
765764
var track;
@@ -787,18 +786,12 @@ function Elements(Splide2, Components2, options) {
787786
}
788787

789788
function destroy(completely) {
789+
var attrs = ALL_ATTRIBUTES.concat("style");
790790
empty(slides);
791791
removeClass(root, rootClasses);
792792
removeClass(track, trackClasses);
793-
removeAttribute([track, list], ALL_ATTRIBUTES.concat("style"));
794-
removeAttribute(root, "style");
795-
796-
if (completely) {
797-
removeAttribute(root, ALL_ATTRIBUTES);
798-
setAttribute(root, ROLE, rootRole);
799-
}
800-
801-
setAttribute(root, ARIA_LABEL, rootLabel);
793+
removeAttribute([track, list], attrs);
794+
removeAttribute(root, completely ? attrs : ["style", ARIA_ROLEDESCRIPTION]);
802795
}
803796

804797
function update() {
@@ -808,6 +801,8 @@ function Elements(Splide2, Components2, options) {
808801
trackClasses = getClasses(CLASS_TRACK);
809802
addClass(root, rootClasses);
810803
addClass(track, trackClasses);
804+
setAttribute(root, ARIA_LABEL, options.label);
805+
setAttribute(root, ARIA_LABELLEDBY, options.labelledby);
811806
}
812807

813808
function collect() {
@@ -835,12 +830,15 @@ function Elements(Splide2, Components2, options) {
835830

836831
function init() {
837832
var id = root.id || uniqueId(PROJECT_CODE);
838-
var role = rootRole || root.tagName !== "SECTION" && options.role || "";
839833
root.id = id;
840834
track.id = track.id || id + "-track";
841835
list.id = list.id || id + "-list";
836+
837+
if (!getAttribute(root, ROLE)) {
838+
setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
839+
}
840+
842841
setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
843-
getAttribute(root, ROLE) || setAttribute(root, ROLE, role);
844842
setAttribute(list, ROLE, "presentation");
845843
}
846844

@@ -2943,7 +2941,10 @@ var _Splide = /*#__PURE__*/function () {
29432941
var root = isString(target) ? query(document, target) : target;
29442942
assert(root, root + " is invalid.");
29452943
this.root = root;
2946-
options = merge({}, DEFAULTS, _Splide.defaults, options || {});
2944+
options = merge({
2945+
label: getAttribute(root, ARIA_LABEL) || "",
2946+
labelledby: getAttribute(root, ARIA_LABELLEDBY) || ""
2947+
}, DEFAULTS, _Splide.defaults, options || {});
29472948

29482949
try {
29492950
merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));

‎dist/js/splide.esm.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -158,7 +158,7 @@ function assign(object) {
158158
}
159159

160160
function merge(object) {
161-
slice(arguments).forEach(function (source) {
161+
slice(arguments, 1).forEach(function (source) {
162162
forOwn(source, function (value, key) {
163163
if (isArray(value)) {
164164
object[key] = value.slice();
@@ -598,20 +598,20 @@ function Media(Splide2, Components2, options) {
598598
}
599599

600600
function update() {
601+
var destroyed = Splide2.state.is(DESTROYED);
601602
var direction = options.direction;
602603
var merged = queries.reduce(function (merged2, entry) {
603604
return merge(merged2, entry[1].matches ? entry[0] : {});
604605
}, {});
605606
omit(options);
606-
merge(options, merged);
607+
Splide2.options = merged;
607608

608609
if (options.destroy) {
609610
Splide2.destroy(options.destroy === "completely");
610-
} else if (Splide2.state.is(DESTROYED)) {
611+
} else if (destroyed) {
611612
destroy(true);
612613
Splide2.mount();
613614
} else {
614-
Splide2.options = merged;
615615
direction !== options.direction && Splide2.refresh();
616616
}
617617
}
@@ -675,12 +675,13 @@ var ARIA_CONTROLS = ARIA_PREFIX + "controls";
675675
var ARIA_CURRENT = ARIA_PREFIX + "current";
676676
var ARIA_SELECTED = ARIA_PREFIX + "selected";
677677
var ARIA_LABEL = ARIA_PREFIX + "label";
678+
var ARIA_LABELLEDBY = ARIA_PREFIX + "labelledby";
678679
var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
679680
var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
680681
var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
681682
var ARIA_LIVE = ARIA_PREFIX + "live";
682683
var ARIA_RELEVANT = ARIA_PREFIX + "relevant";
683-
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
684+
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
684685
var CLASS_ROOT = PROJECT_CODE;
685686
var CLASS_TRACK = PROJECT_CODE + "__track";
686687
var CLASS_LIST = PROJECT_CODE + "__list";
@@ -753,8 +754,6 @@ function Elements(Splide2, Components2, options) {
753754
var i18n = options.i18n;
754755
var elements = {};
755756
var slides = [];
756-
var rootRole = getAttribute(root, ROLE);
757-
var rootLabel = getAttribute(root, ARIA_LABEL);
758757
var rootClasses = [];
759758
var trackClasses = [];
760759
var track;
@@ -782,18 +781,12 @@ function Elements(Splide2, Components2, options) {
782781
}
783782

784783
function destroy(completely) {
784+
var attrs = ALL_ATTRIBUTES.concat("style");
785785
empty(slides);
786786
removeClass(root, rootClasses);
787787
removeClass(track, trackClasses);
788-
removeAttribute([track, list], ALL_ATTRIBUTES.concat("style"));
789-
removeAttribute(root, "style");
790-
791-
if (completely) {
792-
removeAttribute(root, ALL_ATTRIBUTES);
793-
setAttribute(root, ROLE, rootRole);
794-
}
795-
796-
setAttribute(root, ARIA_LABEL, rootLabel);
788+
removeAttribute([track, list], attrs);
789+
removeAttribute(root, completely ? attrs : ["style", ARIA_ROLEDESCRIPTION]);
797790
}
798791

799792
function update() {
@@ -803,6 +796,8 @@ function Elements(Splide2, Components2, options) {
803796
trackClasses = getClasses(CLASS_TRACK);
804797
addClass(root, rootClasses);
805798
addClass(track, trackClasses);
799+
setAttribute(root, ARIA_LABEL, options.label);
800+
setAttribute(root, ARIA_LABELLEDBY, options.labelledby);
806801
}
807802

808803
function collect() {
@@ -830,12 +825,15 @@ function Elements(Splide2, Components2, options) {
830825

831826
function init() {
832827
var id = root.id || uniqueId(PROJECT_CODE);
833-
var role = rootRole || root.tagName !== "SECTION" && options.role || "";
834828
root.id = id;
835829
track.id = track.id || id + "-track";
836830
list.id = list.id || id + "-list";
831+
832+
if (!getAttribute(root, ROLE)) {
833+
setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
834+
}
835+
837836
setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
838-
getAttribute(root, ROLE) || setAttribute(root, ROLE, role);
839837
setAttribute(list, ROLE, "presentation");
840838
}
841839

@@ -2938,7 +2936,10 @@ var _Splide = /*#__PURE__*/function () {
29382936
var root = isString(target) ? query(document, target) : target;
29392937
assert(root, root + " is invalid.");
29402938
this.root = root;
2941-
options = merge({}, DEFAULTS, _Splide.defaults, options || {});
2939+
options = merge({
2940+
label: getAttribute(root, ARIA_LABEL) || "",
2941+
labelledby: getAttribute(root, ARIA_LABELLEDBY) || ""
2942+
}, DEFAULTS, _Splide.defaults, options || {});
29422943

29432944
try {
29442945
merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));

‎dist/js/splide.js‎

Lines changed: 20 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
163163
}
164164

165165
function merge(object) {
166-
slice(arguments).forEach(function (source) {
166+
slice(arguments, 1).forEach(function (source) {
167167
forOwn(source, function (value, key) {
168168
if (isArray(value)) {
169169
object[key] = value.slice();
@@ -599,20 +599,20 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
599599
}
600600

601601
function update() {
602+
var destroyed = Splide2.state.is(DESTROYED);
602603
var direction = options.direction;
603604
var merged = queries.reduce(function (merged2, entry) {
604605
return merge(merged2, entry[1].matches ? entry[0] : {});
605606
}, {});
606607
omit(options);
607-
merge(options, merged);
608+
Splide2.options = merged;
608609

609610
if (options.destroy) {
610611
Splide2.destroy(options.destroy === "completely");
611-
} else if (Splide2.state.is(DESTROYED)) {
612+
} else if (destroyed) {
612613
destroy(true);
613614
Splide2.mount();
614615
} else {
615-
Splide2.options = merged;
616616
direction !== options.direction && Splide2.refresh();
617617
}
618618
}
@@ -676,12 +676,13 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
676676
var ARIA_CURRENT = ARIA_PREFIX + "current";
677677
var ARIA_SELECTED = ARIA_PREFIX + "selected";
678678
var ARIA_LABEL = ARIA_PREFIX + "label";
679+
var ARIA_LABELLEDBY = ARIA_PREFIX + "labelledby";
679680
var ARIA_HIDDEN = ARIA_PREFIX + "hidden";
680681
var ARIA_ORIENTATION = ARIA_PREFIX + "orientation";
681682
var ARIA_ROLEDESCRIPTION = ARIA_PREFIX + "roledescription";
682683
var ARIA_LIVE = ARIA_PREFIX + "live";
683684
var ARIA_RELEVANT = ARIA_PREFIX + "relevant";
684-
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
685+
var ALL_ATTRIBUTES = [ROLE, TAB_INDEX, DISABLED, ARIA_CONTROLS, ARIA_CURRENT, ARIA_LABEL, ARIA_LABELLEDBY, ARIA_HIDDEN, ARIA_ORIENTATION, ARIA_ROLEDESCRIPTION];
685686
var CLASS_ROOT = PROJECT_CODE;
686687
var CLASS_TRACK = PROJECT_CODE + "__track";
687688
var CLASS_LIST = PROJECT_CODE + "__list";
@@ -752,8 +753,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
752753
var i18n = options.i18n;
753754
var elements = {};
754755
var slides = [];
755-
var rootRole = getAttribute(root, ROLE);
756-
var rootLabel = getAttribute(root, ARIA_LABEL);
757756
var rootClasses = [];
758757
var trackClasses = [];
759758
var track;
@@ -781,18 +780,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
781780
}
782781

783782
function destroy(completely) {
783+
var attrs = ALL_ATTRIBUTES.concat("style");
784784
empty(slides);
785785
removeClass(root, rootClasses);
786786
removeClass(track, trackClasses);
787-
removeAttribute([track, list], ALL_ATTRIBUTES.concat("style"));
788-
removeAttribute(root, "style");
789-
790-
if (completely) {
791-
removeAttribute(root, ALL_ATTRIBUTES);
792-
setAttribute(root, ROLE, rootRole);
793-
}
794-
795-
setAttribute(root, ARIA_LABEL, rootLabel);
787+
removeAttribute([track, list], attrs);
788+
removeAttribute(root, completely ? attrs : ["style", ARIA_ROLEDESCRIPTION]);
796789
}
797790

798791
function update() {
@@ -802,6 +795,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
802795
trackClasses = getClasses(CLASS_TRACK);
803796
addClass(root, rootClasses);
804797
addClass(track, trackClasses);
798+
setAttribute(root, ARIA_LABEL, options.label);
799+
setAttribute(root, ARIA_LABELLEDBY, options.labelledby);
805800
}
806801

807802
function collect() {
@@ -829,12 +824,15 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
829824

830825
function init() {
831826
var id = root.id || uniqueId(PROJECT_CODE);
832-
var role = rootRole || root.tagName !== "SECTION" && options.role || "";
833827
root.id = id;
834828
track.id = track.id || id + "-track";
835829
list.id = list.id || id + "-list";
830+
831+
if (!getAttribute(root, ROLE)) {
832+
setAttribute(root, ROLE, root.tagName !== "SECTION" && options.role || "");
833+
}
834+
836835
setAttribute(root, ARIA_ROLEDESCRIPTION, i18n.carousel);
837-
getAttribute(root, ROLE) || setAttribute(root, ROLE, role);
838836
setAttribute(list, ROLE, "presentation");
839837
}
840838

@@ -2937,7 +2935,10 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
29372935
var root = isString(target) ? query(document, target) : target;
29382936
assert(root, root + " is invalid.");
29392937
this.root = root;
2940-
options = merge({}, DEFAULTS, _Splide.defaults, options || {});
2938+
options = merge({
2939+
label: getAttribute(root, ARIA_LABEL) || "",
2940+
labelledby: getAttribute(root, ARIA_LABELLEDBY) || ""
2941+
}, DEFAULTS, _Splide.defaults, options || {});
29412942

29422943
try {
29432944
merge(options, JSON.parse(getAttribute(root, DATA_ATTRIBUTE)));

‎dist/js/splide.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/js/splide.min.js.gz‎

29 Bytes
Binary file not shown.

‎dist/js/splide.min.js.map‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/types/index.d.ts‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -282,10 +282,6 @@ interface Options extends ResponsiveOptions {
282282
* If the tag is `<section>`, this value will not be used. The default value is `'region'`.
283283
*/
284284
role?: string;
285-
/**
286-
* The label for the root element.
287-
*/
288-
label?: string;
289285
/**
290286
* Determines whether to disable any actions while the slider is transitioning.
291287
* Even if `false`, the slider forcibly waits for transition on the loop points.
@@ -466,6 +462,15 @@ interface ResponsiveOptions {
466462
* Accepts arbitrary properties for extensions, although it's not ideal typing.
467463
*/
468464
[key: string]: any;
465+
/**
466+
* The label for the root element.
467+
* Use `labelledby` instead if there is a visible label.
468+
*/
469+
label?: string;
470+
/**
471+
* The ID for the element that used as the label of the carousel.
472+
*/
473+
labelledby?: string;
469474
/**
470475
* The transition speed in milliseconds.
471476
*/

0 commit comments

Comments
 (0)