Skip to content
Permalink
Browse files
feat(b-sidebar): add noEnforceFocus prop (closes #5707) (#5734)
* Update readme.md

* update sidebar.js

* update package.json
  • Loading branch information
Hiws committed Sep 4, 2020
1 parent 2c48020 commit c11c237143230f533404af75933d86a2de7bfb56
Show file tree
Hide file tree
Showing 3 changed files with 22 additions and 4 deletions.
@@ -371,6 +371,10 @@ When the sidebar is opened, the entire sidebar will receive focus, which is desi
reader and keyboard-only users. When the sidebar is closed, the element that previously had focus
before the sidebar was opened will be re-focused.

In some circumstances, you may need to disable the enforce focus feature completely. You can do this
by setting the prop `no-enforce-focus`, although this is generally discouraged for accessibility
reasons.

When the sidebar is open, users can press <kbd>Esc</kbd> to close the sidebar. To disable this
feature, set the `no-close-on-esc` prop to `true`. with the backdrop enabled, you can use the prop
`no-close-on-backdrop` to disable the close on backdrop click feature.
@@ -104,6 +104,11 @@
{
"prop": "noCloseOnRouteChange",
"description": "When set to `true`, disables closing of the sidebar on route change"
},
{
"prop": "noEnforceFocus",
"version": "2.17.0",
"description": "Disables the enforce focus routine which maintains focus inside the sidebar"
}
],
"events": [
@@ -234,6 +234,10 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
type: Boolean,
default: false
},
noEnforceFocus: {
type: Boolean,
default: false
},
lazy: {
type: Boolean,
default: false
@@ -369,12 +373,12 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
/* istanbul ignore next */
onTopTrapFocus() /* istanbul ignore next */ {
const tabables = getTabables(this.$refs.content)
attemptFocus(tabables.reverse()[0])
this.enforceFocus(tabables.reverse()[0])
},
/* istanbul ignore next */
onBottomTrapFocus() /* istanbul ignore next */ {
const tabables = getTabables(this.$refs.content)
attemptFocus(tabables[0])
this.enforceFocus(tabables[0])
},
onBeforeEnter() {
// Returning focus to `document.body` may cause unwanted scrolls,
@@ -385,16 +389,21 @@ export const BSidebar = /*#__PURE__*/ Vue.extend({
},
onAfterEnter(el) {
if (!contains(el, getActiveElement())) {
attemptFocus(el)
this.enforceFocus(el)
}
this.$emit('shown')
},
onAfterLeave() {
attemptFocus(this.$_returnFocusEl)
this.enforceFocus(this.$_returnFocusEl)
this.$_returnFocusEl = null
// Trigger lazy render
this.isOpen = false
this.$emit('hidden')
},
enforceFocus(el) {
if (!this.noEnforceFocus) {
attemptFocus(el)
}
}
},
render(h) {

0 comments on commit c11c237

Please sign in to comment.