feat(a11y): Content outside inert for assistive technology users

Author: ktquez

src/FocusLoop.vue

@@ -1,14 +1,20 @@
 <template>
- <divclass="vue-focus-loop">
+ <div
+v-if="isVisible"
+ref="VuefocusLoopContainer"
+class="vue-focus-loop"
+ >
  <div
 :tabindex="getTabindex"
+aria-hidden="true"
 @focus="handleFocusStart"
  />
  <divref="focusLoop">
  <slot />
  </div>
  <div
 :tabindex="getTabindex"
+aria-hidden="true"
 @focus="handleFocusEnd"
  />
  </div>
@@ -24,6 +30,8 @@ const focusableElementsSelector = [
 '[contenteditable]:not([contenteditable="false"])'
 ].join(',')
 
+let ariaHiddenElements = []
+
 exportdefault{
  name:'FocusLoop',
 
@@ -55,41 +63,70 @@ export default{
  },
 
  watch:{
-isVisible (val){
-this.managePrevFocusElement(val)
-this.focusFirst(val)
- }
+ isVisible:'init',
+ disabled:'init'
  },
 
 mounted (){
-this.managePrevFocusElement(this.isVisible)
-this.focusFirst(this.isVisible)
- },
-
-beforeDestroy (){
-this.managePrevFocusElement(false)
+this.init()
  },
 
  methods:{
-managePrevFocusElement (visible){
-if (!visible &&window.vflPrevFocusedElement){
+init (){
+this.$nextTick(() =>{
+constactive=this.isVisible&&!this.disabled
+!this.disabled&&this.focusFirst(active &&this.autoFocus)
+this.managePrevFocusElement(active)
+this.lockForSwipeScreenReader(active)
+if (!active){
+ ariaHiddenElements = []
+ }
+ })
+ },
+
+managePrevFocusElement (active){
+if (!active &&window.vflPrevFocusedElement){
 returnwindow.vflPrevFocusedElement.focus()
  }
 window.vflPrevFocusedElement=document.activeElement
  },
 
+getElementsToAriaHidden (focusLoopContainer){
+functiongetElements (element){
+constchildren=Array.from(element.children)
+children.forEach(el=>{
+if (el === focusLoopContainer) return
+if (!el.contains(focusLoopContainer)){
+ariaHiddenElements.push(el)
+return
+ }
+getElements(el)
+ })
+ }
+getElements(document.body)
+ },
+
+lockForSwipeScreenReader (active=true){
+if (active) this.getElementsToAriaHidden(this.$refs.VuefocusLoopContainer)
+ariaHiddenElements.forEach(el=>{
+if (['SCRIPT', 'STYLE'].includes(el.nodeName) ||el.hasAttribute('aria-live')) return
+el.setAttribute('aria-hidden', active.toString())
+ })
+ },
+
+focusFirst (isAutoFocus){
+if (isAutoFocus){
+constelements=this.getFocusableElements()
+if (elements.length) setTimeout(() => elements[0].focus(), 200)
+ }
+ },
+
 getFocusableElements (){
 constfocusableElements=this.$refs.focusLoop.querySelectorAll(focusableElementsSelector)
 if (focusableElements &&focusableElements.length) return focusableElements
 return []
  },
 
-focusFirst (visible){
-if (!visible &&!this.autoFocus) return
-constelements=this.getFocusableElements()
-if (elements.length) setTimeout(() => elements[0].focus(), 200)
- },
-
 handleFocusStart (){
 constelements=this.getFocusableElements()
 if (elements.length){