From 0094cbb7d1ba2deb7f3fea3f65e140dc5c8ff3ac Mon Sep 17 00:00:00 2001
From: Agate <me@agate.blue>
Date: Fri, 3 Jul 2020 16:07:44 +0200
Subject: [PATCH] Fix #1128: Lock focus in modals to improve accessibility

---
 changes/changelog.d/1121.enhancement            |  1 +
 front/package.json                              |  1 +
 front/src/components/Queue.vue                  |  5 ++++-
 front/src/components/SetInstanceModal.vue       |  2 +-
 front/src/components/ShortcutsModal.vue         |  2 +-
 front/src/components/auth/LoginForm.vue         |  3 +--
 front/src/components/common/DangerousButton.vue |  8 ++++----
 front/src/components/moderation/FilterModal.vue |  4 ++--
 front/src/components/moderation/ReportModal.vue |  2 +-
 front/src/components/semantic/Modal.vue         | 12 +++++++++++-
 front/yarn.lock                                 | 13 +++++++++++++
 11 files changed, 40 insertions(+), 13 deletions(-)
 create mode 100644 changes/changelog.d/1121.enhancement

diff --git a/changes/changelog.d/1121.enhancement b/changes/changelog.d/1121.enhancement
new file mode 100644
index 000000000..188865c94
--- /dev/null
+++ b/changes/changelog.d/1121.enhancement
@@ -0,0 +1 @@
+Use semantic headers for accessibility (#1121)
\ No newline at end of file
diff --git a/front/package.json b/front/package.json
index 4a85f6469..86540e149 100644
--- a/front/package.json
+++ b/front/package.json
@@ -20,6 +20,7 @@
     "core-js": "^3.6.4",
     "diff": "^4.0.1",
     "django-channels": "^1.1.6",
+    "focus-trap": "^5.1.0",
     "fomantic-ui-css": "^2.8.3",
     "howler": "^2.0.14",
     "js-logger": "^1.4.1",
diff --git a/front/src/components/Queue.vue b/front/src/components/Queue.vue
index 4becb11f3..0813291af 100644
--- a/front/src/components/Queue.vue
+++ b/front/src/components/Queue.vue
@@ -209,7 +209,7 @@ import $ from 'jquery'
 import moment from "moment"
 import lodash from '@/lodash'
 import time from "@/utils/time"
-
+import createFocusTrap from 'focus-trap'
 import store from "@/store"
 
 export default {
@@ -224,11 +224,14 @@ export default {
       showVolume: false,
       isShuffling: false,
       tracksChangeBuffer: null,
+      focusTrap: null,
       time
     }
   },
   mounted () {
     let self = this
+    this.focusTrap = createFocusTrap(this.$el, {allowOutsideClick: () => { return true }})
+    this.focusTrap.activate()
     this.$nextTick(() => {
       setTimeout(() => {
         this.scrollToCurrent()
diff --git a/front/src/components/SetInstanceModal.vue b/front/src/components/SetInstanceModal.vue
index 618a16a20..2e5c24bc2 100644
--- a/front/src/components/SetInstanceModal.vue
+++ b/front/src/components/SetInstanceModal.vue
@@ -35,7 +35,7 @@
       </form>
     </div>
     <div class="actions">
-      <div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div>
+      <button class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></button>
     </div>
   </modal>
 </template>
diff --git a/front/src/components/ShortcutsModal.vue b/front/src/components/ShortcutsModal.vue
index 017cdc977..c88bfb715 100644
--- a/front/src/components/ShortcutsModal.vue
+++ b/front/src/components/ShortcutsModal.vue
@@ -36,7 +36,7 @@
       </div>
     </section>
     <footer class="actions">
-      <div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Close</translate></div>
+      <button class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Close</translate></button>
     </footer>
   </modal>
 </template>
diff --git a/front/src/components/auth/LoginForm.vue b/front/src/components/auth/LoginForm.vue
index 3b18fbc29..f0591a538 100644
--- a/front/src/components/auth/LoginForm.vue
+++ b/front/src/components/auth/LoginForm.vue
@@ -25,7 +25,6 @@
         </label>
         <input
         ref="username"
-        tabindex="1"
         required
         name="username"
         type="text"
@@ -50,7 +49,7 @@
         <translate translate-context="Contant/Auth/Paragraph" :translate-params="{domain: $store.getters['instance/domain']}">You will be redirected to %{ domain } to authenticate.</translate>
       </p>
     </template>
-    <button tabindex="3" :class="['ui', {'loading': isLoading}, 'right', 'floated', buttonClasses, 'button']" type="submit">
+    <button :class="['ui', {'loading': isLoading}, 'right', 'floated', buttonClasses, 'button']" type="submit">
       <translate translate-context="*/Login/*/Verb">Login</translate>
     </button>
   </form>
diff --git a/front/src/components/common/DangerousButton.vue b/front/src/components/common/DangerousButton.vue
index 353c8ecf3..763f3fa98 100644
--- a/front/src/components/common/DangerousButton.vue
+++ b/front/src/components/common/DangerousButton.vue
@@ -14,14 +14,14 @@
         </div>
       </div>
       <div class="actions">
-        <div class="ui basic cancel button">
+        <button class="ui basic cancel button">
           <translate translate-context="*/*/Button.Label/Verb">Cancel</translate>
-        </div>
-        <div :class="['ui', 'confirm', confirmButtonColor, 'button']" @click="confirm">
+        </button>
+        <button :class="['ui', 'confirm', confirmButtonColor, 'button']" @click="confirm">
           <slot name="modal-confirm">
             <translate translate-context="Modal/*/Button.Label/Short, Verb">Confirm</translate>
           </slot>
-        </div>
+        </button>
       </div>
     </modal>
   </div>
diff --git a/front/src/components/moderation/FilterModal.vue b/front/src/components/moderation/FilterModal.vue
index 2c650014c..f83e69741 100644
--- a/front/src/components/moderation/FilterModal.vue
+++ b/front/src/components/moderation/FilterModal.vue
@@ -37,8 +37,8 @@
       </div>
     </div>
     <div class="actions">
-      <div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div>
-      <div :class="['ui', 'success', {loading: isLoading}, 'button']" @click="hide"><translate translate-context="Popup/*/Button.Label">Hide content</translate></div>
+      <button class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></button>
+      <button :class="['ui', 'success', {loading: isLoading}, 'button']" @click="hide"><translate translate-context="Popup/*/Button.Label">Hide content</translate></button>
     </div>
   </modal>
 </template>
diff --git a/front/src/components/moderation/ReportModal.vue b/front/src/components/moderation/ReportModal.vue
index db37960a2..f32f7b6f6 100644
--- a/front/src/components/moderation/ReportModal.vue
+++ b/front/src/components/moderation/ReportModal.vue
@@ -71,7 +71,7 @@
       </div>
     </div>
     <div class="actions">
-      <div class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></div>
+      <button class="ui basic cancel button"><translate translate-context="*/*/Button.Label/Verb">Cancel</translate></button>
       <button
         v-if="canSubmit"
         :class="['ui', 'success', {loading: isLoading}, 'button']"
diff --git a/front/src/components/semantic/Modal.vue b/front/src/components/semantic/Modal.vue
index 78f953421..0a93a053e 100644
--- a/front/src/components/semantic/Modal.vue
+++ b/front/src/components/semantic/Modal.vue
@@ -9,6 +9,7 @@
 
 <script>
 import $ from 'jquery'
+import createFocusTrap from 'focus-trap'
 
 export default {
   props: {
@@ -17,9 +18,13 @@ export default {
   },
   data () {
     return {
-      control: null
+      control: null,
+      focusTrap: null,
     }
   },
+  mounted () {
+    this.focusTrap = createFocusTrap(this.$el)
+  },
   beforeDestroy () {
     if (this.control) {
       $(this.$el).modal('hide')
@@ -38,6 +43,11 @@ export default {
         }.bind(this),
         onHidden: function () {
           this.$emit('update:show', false)
+          this.focusTrap.pause()
+        }.bind(this),
+        onVisible: function () {
+          this.focusTrap.activate()
+          this.focusTrap.unpause()
         }.bind(this)
       })
     }
diff --git a/front/yarn.lock b/front/yarn.lock
index 40aa5b9d0..4cab2dee1 100644
--- a/front/yarn.lock
+++ b/front/yarn.lock
@@ -4375,6 +4375,14 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+focus-trap@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-5.1.0.tgz#64a0bfabd95c382103397dbc96bfef3a3cf8e5ad"
+  integrity sha512-CkB/nrO55069QAUjWFBpX6oc+9V90Qhgpe6fBWApzruMq5gnlh90Oo7iSSDK7pKiV5ugG6OY2AXM5mxcmL3lwQ==
+  dependencies:
+    tabbable "^4.0.0"
+    xtend "^4.0.1"
+
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
@@ -9206,6 +9214,11 @@ symbol-tree@^3.2.2:
   resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.4.tgz#430637d248ba77e078883951fb9aa0eed7c63fa2"
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
+tabbable@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-4.0.0.tgz#5bff1d1135df1482cf0f0206434f15eadbeb9261"
+  integrity sha512-H1XoH1URcBOa/rZZWxLxHCtOdVUEev+9vo5YdYhC9tCY4wnybX+VQrCYuy9ubkg69fCBxCONJOSLGfw0DWMffQ==
+
 table@^5.2.3:
   version "5.4.6"
   resolved "https://registry.yarnpkg.com/table/-/table-5.4.6.tgz#1292d19500ce3f86053b05f0e8e7e4a3bb21079e"