mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-06 13:46:42 +02:00
Code Issues Releases Wiki Activity

Remove explicit use of aria-hidden for offcanvas when closed (#35589)

Browse Source 
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>
This commit is contained in:
Patrick H. Lauke
2022-01-05 17:20:15 +00:00
committed by GitHub
parent f7a1b18320
commit 0d054bb0f1
3 changed files with 73 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
js/src/offcanvas.js
View File

@@ -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()