MirrorMirror
/
funkwhale
mirror of https://dev.funkwhale.audio/funkwhale/funkwhale.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch '1128-accessibility-focus' into 'develop' 

Fix #1128: Lock focus in modals to improve accessibility

Closes #1128

See merge request funkwhale/funkwhale!1157
This commit is contained in:
Agate 2020-07-03 16:13:16 +02:00
parent c5755e21a5 0094cbb7d1
commit f8465e1a61
11 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changes/changelog.d/1121.enhancement Normal file
View File

@ -0,0 +1 @@
Use semantic headers for accessibility (#1121)

1
front/package.json
View File

@ -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",

5
front/src/components/Queue.vue
View File

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

2
front/src/components/SetInstanceModal.vue
View File

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

2
front/src/components/ShortcutsModal.vue
View File

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

3
front/src/components/auth/LoginForm.vue
View File

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

8
front/src/components/common/DangerousButton.vue
View File

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

4
front/src/components/moderation/FilterModal.vue
View File

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

2
front/src/components/moderation/ReportModal.vue
View File

@ -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']"

12
front/src/components/semantic/Modal.vue
View File

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

13
front/yarn.lock
View File

@ -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"