diff options
author | Patrick H. Lauke <redux@splintered.co.uk> | 2022-01-05 20:20:15 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2022-01-05 20:20:15 +0300 |
commit | 0d054bb0f1484dbc0c778d3643e96e37ff46d708 (patch) | |
tree | de1cbfd7831b1a8487e1fefe8312c9ed6b6cc215 /js | |
parent | f7a1b183209affbec48af744006f330bac5ddd98 (diff) |
Remove explicit use of aria-hidden for offcanvas when closed (#35589)
Remove explicit use of aria-hidden & visibility for offcanvas when closed, handling it with css
Co-authored-by: GeoSot <geo.sotis@gmail.com>
Co-authored-by: Gaƫl Poupard <ffoodd@users.noreply.github.com>
Diffstat (limited to 'js')
-rw-r--r-- | js/src/offcanvas.js | 14 | ||||
-rw-r--r-- | js/tests/unit/offcanvas.spec.js | 59 |
2 files changed, 60 insertions, 13 deletions
diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js index acc0971fa2..db65340391 100644 --- a/js/src/offcanvas.js +++ b/js/src/offcanvas.js @@ -31,6 +31,8 @@ const EVENT_LOAD_DATA_API = `load${EVENT_KEY}${DATA_API_KEY}` const ESCAPE_KEY = 'Escape' const CLASS_NAME_SHOW = 'show' +const CLASS_NAME_SHOWING = 'showing' +const CLASS_NAME_HIDING = 'hiding' const CLASS_NAME_BACKDROP = 'offcanvas-backdrop' const OPEN_SELECTOR = '.offcanvas.show' @@ -99,24 +101,23 @@ class Offcanvas extends BaseComponent { } this._isShown = true - this._element.style.visibility = 'visible' - this._backdrop.show() if (!this._config.scroll) { new ScrollBarHelper().hide() } - this._element.removeAttribute('aria-hidden') this._element.setAttribute('aria-modal', true) this._element.setAttribute('role', 'dialog') - this._element.classList.add(CLASS_NAME_SHOW) + this._element.classList.add(CLASS_NAME_SHOWING) const completeCallBack = () => { if (!this._config.scroll) { this._focustrap.activate() } + this._element.classList.add(CLASS_NAME_SHOW) + this._element.classList.remove(CLASS_NAME_SHOWING) EventHandler.trigger(this._element, EVENT_SHOWN, { relatedTarget }) } @@ -137,14 +138,13 @@ class Offcanvas extends BaseComponent { this._focustrap.deactivate() this._element.blur() this._isShown = false - this._element.classList.remove(CLASS_NAME_SHOW) + this._element.classList.add(CLASS_NAME_HIDING) this._backdrop.hide() const completeCallback = () => { - this._element.setAttribute('aria-hidden', true) + this._element.classList.remove(CLASS_NAME_SHOW, CLASS_NAME_HIDING) this._element.removeAttribute('aria-modal') this._element.removeAttribute('role') - this._element.style.visibility = 'hidden' if (!this._config.scroll) { new ScrollBarHelper().reset() diff --git a/js/tests/unit/offcanvas.spec.js b/js/tests/unit/offcanvas.spec.js index f4b0b64828..f87527fb2f 100644 --- a/js/tests/unit/offcanvas.spec.js +++ b/js/tests/unit/offcanvas.spec.js @@ -242,23 +242,46 @@ describe('Offcanvas', () => { expect(offCanvas.show).toHaveBeenCalled() }) - it('should call hide method if show class is present', () => { + it('should call hide method if show class is present', done => { fixtureEl.innerHTML = '<div class="offcanvas"></div>' const offCanvasEl = fixtureEl.querySelector('.offcanvas') const offCanvas = new Offcanvas(offCanvasEl) - offCanvas.show() - expect(offCanvasEl).toHaveClass('show') - spyOn(offCanvas, 'hide') + offCanvasEl.addEventListener('shown.bs.offcanvas', () => { + expect(offCanvasEl).toHaveClass('show') + spyOn(offCanvas, 'hide') - offCanvas.toggle() + offCanvas.toggle() - expect(offCanvas.hide).toHaveBeenCalled() + expect(offCanvas.hide).toHaveBeenCalled() + done() + }) + + offCanvas.show() }) }) describe('show', () => { + it('should add `showing` class during opening and `show` class on end', done => { + fixtureEl.innerHTML = '<div class="offcanvas"></div>' + const offCanvasEl = fixtureEl.querySelector('.offcanvas') + const offCanvas = new Offcanvas(offCanvasEl) + + offCanvasEl.addEventListener('show.bs.offcanvas', () => { + expect(offCanvasEl).not.toHaveClass('show') + }) + + offCanvasEl.addEventListener('shown.bs.offcanvas', () => { + expect(offCanvasEl).not.toHaveClass('showing') + expect(offCanvasEl).toHaveClass('show') + done() + }) + + offCanvas.show() + expect(offCanvasEl).toHaveClass('showing') + }) + it('should do nothing if already shown', () => { fixtureEl.innerHTML = '<div class="offcanvas show"></div>' @@ -353,6 +376,30 @@ describe('Offcanvas', () => { }) describe('hide', () => { + it('should add `hiding` class during closing and remover `show` & `hiding` classes on end', done => { + fixtureEl.innerHTML = '<div class="offcanvas"></div>' + const offCanvasEl = fixtureEl.querySelector('.offcanvas') + const offCanvas = new Offcanvas(offCanvasEl) + + offCanvasEl.addEventListener('hide.bs.offcanvas', () => { + expect(offCanvasEl).not.toHaveClass('showing') + expect(offCanvasEl).toHaveClass('show') + }) + + offCanvasEl.addEventListener('hidden.bs.offcanvas', () => { + expect(offCanvasEl).not.toHaveClass('hiding') + expect(offCanvasEl).not.toHaveClass('show') + done() + }) + + offCanvas.show() + offCanvasEl.addEventListener('shown.bs.offcanvas', () => { + offCanvas.hide() + expect(offCanvasEl).not.toHaveClass('showing') + expect(offCanvasEl).toHaveClass('hiding') + }) + }) + it('should do nothing if already shown', () => { fixtureEl.innerHTML = '<div class="offcanvas"></div>' |