feat(b-sidebar): add noEnforceFocus prop (closes #5707) (#5734)

Hiws · web-flow · commit c11c23714323 · 2020-09-04T10:42:33.000+02:00
* Update readme.md

* update sidebar.js

* update package.json
diff --git a/src/components/sidebar/README.md b/src/components/sidebar/README.md
@@ -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.
diff --git a/src/components/sidebar/package.json b/src/components/sidebar/package.json
@@ -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": [
diff --git a/src/components/sidebar/sidebar.js b/src/components/sidebar/sidebar.js
@@ -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) {

Original file line number	Diff line number	Diff line change
`@@ -104,6 +104,11 @@`
`104`	`104`	`{`
`105`	`105`	`"prop": "noCloseOnRouteChange",`
`106`	`106`	"description": "When set to `true`, disables closing of the sidebar on route change"
	`107`	`+ },`
	`108`	`+ {`
	`109`	`+ "prop": "noEnforceFocus",`
	`110`	`+ "version": "2.17.0",`
	`111`	`+ "description": "Disables the enforce focus routine which maintains focus inside the sidebar"`
`107`	`112`	`}`
`108`	`113`	`],`
`109`	`114`	`"events": [`