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 <[email protected]>
Co-authored-by: Gaël Poupard <[email protected]>

1 files changed, 7 insertions, 7 deletions

diff --git a/js/src/offcanvas.js b/js/src/offcanvas.js
index acc0971fa..db6534039 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()