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/src | |
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/src')
-rw-r--r-- | js/src/offcanvas.js | 14 |
1 files changed, 7 insertions, 7 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() |