From 7ce29d75f38f2c81f57e8a6cf14c510655e2e316 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laussel=20Lo=C3=AFc?= Date: Sat, 28 Mar 2020 08:51:24 +0100 Subject: v5 tabs - accessibility issue when using ul/li semantic Add aria-role presentation on li element when ul element has role tablist and remove dropdown from visual tests as they've been removed from doc --- js/tests/unit/tab.spec.js | 34 ++++++++++++------------ js/tests/visual/collapse.html | 8 +++--- js/tests/visual/modal.html | 6 ++--- js/tests/visual/tab.html | 60 ++++++++++++++++++++----------------------- 4 files changed, 52 insertions(+), 56 deletions(-) (limited to 'js') diff --git a/js/tests/unit/tab.spec.js b/js/tests/unit/tab.spec.js index 3e45f4d03..70aa8eb33 100644 --- a/js/tests/unit/tab.spec.js +++ b/js/tests/unit/tab.spec.js @@ -129,8 +129,8 @@ describe('Tab', () => { it('should not fire shown when tab is already active', done => { fixtureEl.innerHTML = [ '', '
', '
', @@ -155,8 +155,8 @@ describe('Tab', () => { it('should not fire shown when tab is disabled', done => { fixtureEl.innerHTML = [ '', '
', '
', @@ -181,8 +181,8 @@ describe('Tab', () => { it('show and shown events should reference correct relatedTarget', done => { fixtureEl.innerHTML = [ '', '
', '
', @@ -275,17 +275,17 @@ describe('Tab', () => { it('should handle removed tabs', done => { fixtureEl.innerHTML = [ ' @@ -72,20 +72,20 @@ -
- Action - Another action - Something else here -
+
-
- Action - Another action - Something else here -
+
@@ -173,11 +173,11 @@
-
- Action - Another action - Something else here -
+
@@ -186,11 +186,11 @@ -
- Action - Another action - Something else here -
+
@@ -198,11 +198,11 @@ -
- Action - Another action - Something else here -
+
diff --git a/js/tests/visual/scrollspy.html b/js/tests/visual/scrollspy.html index 30ce86e1f..03e62c1f4 100644 --- a/js/tests/visual/scrollspy.html +++ b/js/tests/visual/scrollspy.html @@ -25,11 +25,11 @@
  • -
    - One - Two - Three -
    +
  • Final diff --git a/js/tests/visual/tab.html b/js/tests/visual/tab.html index 323b65c29..e5bc0448b 100644 --- a/js/tests/visual/tab.html +++ b/js/tests/visual/tab.html @@ -165,10 +165,10 @@ Profile
    -
    - @fat - @mdo -
    +
    Disabled -- cgit v1.2.3 From dfa017adc382c63766cd5d021bdc8f6ad1b04932 Mon Sep 17 00:00:00 2001 From: ysds Date: Wed, 4 Mar 2020 23:51:15 +0900 Subject: Always modal scroll top to 0 --- js/src/modal.js | 6 ++---- js/tests/unit/modal.spec.js | 16 ++++++++-------- 2 files changed, 10 insertions(+), 12 deletions(-) (limited to 'js') diff --git a/js/src/modal.js b/js/src/modal.js index ca77359ca..d5f1c8c9a 100644 --- a/js/src/modal.js +++ b/js/src/modal.js @@ -60,7 +60,6 @@ const EVENT_MOUSEUP_DISMISS = `mouseup.dismiss${EVENT_KEY}` const EVENT_MOUSEDOWN_DISMISS = `mousedown.dismiss${EVENT_KEY}` const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` -const CLASS_NAME_SCROLLABLE = 'modal-dialog-scrollable' const CLASS_NAME_SCROLLBAR_MEASURER = 'modal-scrollbar-measure' const CLASS_NAME_BACKDROP = 'modal-backdrop' const CLASS_NAME_OPEN = 'modal-open' @@ -249,11 +248,10 @@ class Modal { this._element.style.display = 'block' this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) + this._element.scrollTop = 0 - if (this._dialog.classList.contains(CLASS_NAME_SCROLLABLE) && modalBody) { + if (modalBody) { modalBody.scrollTop = 0 - } else { - this._element.scrollTop = 0 } if (transition) { diff --git a/js/tests/unit/modal.spec.js b/js/tests/unit/modal.spec.js index c5fbc3a27..52676844f 100644 --- a/js/tests/unit/modal.spec.js +++ b/js/tests/unit/modal.spec.js @@ -382,40 +382,40 @@ describe('Modal', () => { modal.show() }) - it('should set modal body scroll top to 0 if .modal-dialog-scrollable', done => { + it('should set .modal\'s scroll top to 0', done => { fixtureEl.innerHTML = [ '
    ', - '
    ', - '
    ', + '
    ', '
    ', '
    ' ].join('') const modalEl = fixtureEl.querySelector('.modal') - const modalBody = modalEl.querySelector('.modal-body') const modal = new Modal(modalEl) modalEl.addEventListener('shown.bs.modal', () => { - expect(modalBody.scrollTop).toEqual(0) + expect(modalEl.scrollTop).toEqual(0) done() }) modal.show() }) - it('should set .modal\'s scroll top to 0 if .modal-dialog-scrollable and modal body do not exists', done => { + it('should set modal body scroll top to 0 if modal body do not exists', done => { fixtureEl.innerHTML = [ '
    ', - '
    ', + '
    ', + '
    ', '
    ', '
    ' ].join('') const modalEl = fixtureEl.querySelector('.modal') + const modalBody = modalEl.querySelector('.modal-body') const modal = new Modal(modalEl) modalEl.addEventListener('shown.bs.modal', () => { - expect(modalEl.scrollTop).toEqual(0) + expect(modalBody.scrollTop).toEqual(0) done() }) -- cgit v1.2.3 From 9a5033d41350f83d3b4814648934618ab4648e27 Mon Sep 17 00:00:00 2001 From: XhmikosR Date: Thu, 9 Apr 2020 20:56:43 +0300 Subject: Pass multiple classes to `classList.add` / `classList.remove` (#30537) This is supported by our currently supported browsers. --- js/src/carousel.js | 7 ++----- js/src/collapse.js | 6 ++---- js/src/popover.js | 3 +-- js/src/tooltip.js | 3 +-- 4 files changed, 6 insertions(+), 13 deletions(-) (limited to 'js') diff --git a/js/src/carousel.js b/js/src/carousel.js index 3020974d3..a5451538c 100644 --- a/js/src/carousel.js +++ b/js/src/carousel.js @@ -478,13 +478,10 @@ class Carousel { EventHandler .one(activeElement, TRANSITION_END, () => { - nextElement.classList.remove(directionalClassName) - nextElement.classList.remove(orderClassName) + nextElement.classList.remove(directionalClassName, orderClassName) nextElement.classList.add(CLASS_NAME_ACTIVE) - activeElement.classList.remove(CLASS_NAME_ACTIVE) - activeElement.classList.remove(orderClassName) - activeElement.classList.remove(directionalClassName) + activeElement.classList.remove(CLASS_NAME_ACTIVE, orderClassName, directionalClassName) this._isSliding = false diff --git a/js/src/collapse.js b/js/src/collapse.js index fde3e0a9e..4529a85ec 100644 --- a/js/src/collapse.js +++ b/js/src/collapse.js @@ -192,8 +192,7 @@ class Collapse { const complete = () => { this._element.classList.remove(CLASS_NAME_COLLAPSING) - this._element.classList.add(CLASS_NAME_COLLAPSE) - this._element.classList.add(CLASS_NAME_SHOW) + this._element.classList.add(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW) this._element.style[dimension] = '' @@ -230,8 +229,7 @@ class Collapse { reflow(this._element) this._element.classList.add(CLASS_NAME_COLLAPSING) - this._element.classList.remove(CLASS_NAME_COLLAPSE) - this._element.classList.remove(CLASS_NAME_SHOW) + this._element.classList.remove(CLASS_NAME_COLLAPSE, CLASS_NAME_SHOW) const triggerArrayLength = this._triggerArray.length if (triggerArrayLength > 0) { diff --git a/js/src/popover.js b/js/src/popover.js index 2d423f0dd..4aac7e8ab 100644 --- a/js/src/popover.js +++ b/js/src/popover.js @@ -113,8 +113,7 @@ class Popover extends Tooltip { this.setElementContent(SelectorEngine.findOne(SELECTOR_CONTENT, tip), content) - tip.classList.remove(CLASS_NAME_FADE) - tip.classList.remove(CLASS_NAME_SHOW) + tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW) } _addAttachmentClass(attachment) { diff --git a/js/src/tooltip.js b/js/src/tooltip.js index 9a1dff3d6..3f40b3da1 100644 --- a/js/src/tooltip.js +++ b/js/src/tooltip.js @@ -400,8 +400,7 @@ class Tooltip { setContent() { const tip = this.getTipElement() this.setElementContent(SelectorEngine.findOne(SELECTOR_TOOLTIP_INNER, tip), this.getTitle()) - tip.classList.remove(CLASS_NAME_FADE) - tip.classList.remove(CLASS_NAME_SHOW) + tip.classList.remove(CLASS_NAME_FADE, CLASS_NAME_SHOW) } setElementContent(element, content) { -- cgit v1.2.3