chore: minor tweaks for bootstrap v4.4 (#4440)

tmorehouse · web-flow · commit c48eb765a693 · 2019-12-06T02:15:56.000-04:00
diff --git a/docs/components/anchored-heading.js b/docs/components/anchored-heading.js
@@ -26,6 +26,7 @@ export default {
     return h(
       `h${props.level}`,
       mergeData(data, {
+        staticClass: 'bv-no-focus-ring',
         attrs: {
           id: props.id,
           tabindex: '-1'
diff --git a/docs/components/section-toc.vue b/docs/components/section-toc.vue
@@ -1,7 +1,7 @@
 <template>
   <Main>
     <Section>
-      <h1 :id="id" tabindex="-1">
+      <h1 :id="id" class="bv-no-focus-ring" tabindex="-1">
         <span class="bd-content-title">
           {{ groupTitle }} <span class="small text-muted">- table of contents</span>
         </span>
diff --git a/docs/markdown/intro/README.md b/docs/markdown/intro/README.md
@@ -5,7 +5,7 @@
 
 - [Vue.js](https://vuejs.org/) `v{{ vueVersionMinor }}` is required, `v{{ vueVersion }}` is
   recommended
-- [Bootstrap](https://getbootstrap.com/) `v{{ bootstrapVersionMinor }}` is required,
+- [Bootstrap](https://getbootstrap.com/) `4.3.1` is required,
   `v{{ bootstrapVersion }}` is recommended
 - [PortalVue](https://portal-vue.linusb.org/) `v{{ portalVueVersionMinor }}` is required by
   [Toasts](/docs/components/toast), `v{{ portalVueVersion }}` is recommended
diff --git a/docs/nuxt.config.js b/docs/nuxt.config.js
@@ -88,8 +88,8 @@ renderer.heading = function(text, level, raw, slugger) {
     ANCHOR_LINK_HEADING_LEVELS.indexOf(level) !== -1
       ? `<a class="anchorjs-link" href="#${link}" aria-label="Anchor"></a>`
       : ''
-
-  return `<h${level} id="${link}">${getTextMarkup(text + anchor)}</h${level}>\n`
+  const attrs = `id="${link}" class="bv-no-focus-ring"`
+  return `<h${level} ${attrs}>${getTextMarkup(text + anchor)}</h${level}>\n`
 }
 
 // Convert lead-in blockquote paragraphs to true bootstrap docs leads
diff --git a/docs/utils/index.js b/docs/utils/index.js
@@ -85,19 +85,19 @@ export const makeTOC = (readme, meta = null) => {
   let parentIdx = 0
 
   // Get the first <h1> tag with ID
-  const h1 = readme.match(/<h1 id=([^> ]+)>(.+?)<\/h1>/) || []
+  const h1 = readme.match(/<h1 id=([^> ]+)[^>]*>(.+?)<\/h1>/) || []
   if (h1) {
     top = `#${stripQuotes(h1[1])}`
     title = stripHTML(h1[2])
   }
 
   // Get all the <h2> and <h3> headings with ID's
-  const headings = readme.match(/<h([23]) id=[^> ]+>.+?<\/h\1>/g) || []
+  const headings = readme.match(/<h([23]) id=[^> ]+[^>]*>.+?<\/h\1>/g) || []
 
   // Process the <h2> and <h3> headings into a TOC structure
   headings
     // Create a match `[value, tag, id, content]`
-    .map(heading => heading.match(/^<(h[23]) id=([^> ]+)>(.+?)<\/\1>$/))
+    .map(heading => heading.match(/^<(h[23]) id=([^> ]+)[^>]*>(.+?)<\/\1>$/))
     // Filter out un-matched values
     .filter(v => Array.isArray(v))
     // Create TOC structure
diff --git a/src/_utilities.scss b/src/_utilities.scss
@@ -6,6 +6,11 @@ $bv-utility-classes-defined: false !default;
 @if $bv-utility-classes-defined == false {
   $bv-utility-classes-defined: true;
 
+  // No focus outline helper (use sparingly)
+  .bv-no-focus-ring:focus {
+    outline: none;
+  }
+
   // Create `.bv-d-<bp>-down-none` helper classes
   @each $breakpoint in map-keys($grid-breakpoints) {
     @include media-breakpoint-down($breakpoint) {
diff --git a/src/components/dropdown/_dropdown.scss b/src/components/dropdown/_dropdown.scss
@@ -25,6 +25,13 @@ $bv-dropdown-defined: false !default;
       }
     }
 
+    // Hide the focus ring introduced by Bootstratp v4.4 reboot
+    // on items with tabindex="-1", as we know how users feel
+    // about blue rings where they don't expect them.
+    .dropdown-menu:focus {
+      outline: none
+    }
+
     // Prevent dropdown background overflow if there's no padding
     // See https://github.com/twbs/bootstrap/pull/27703
     // Added here to address <li> wrapping of items
diff --git a/src/components/tabs/tab.js b/src/components/tabs/tab.js
@@ -9,12 +9,7 @@ export const BTab = /*#__PURE__*/ Vue.extend({
   mixins: [idMixin, normalizeSlotMixin],
   inject: {
     bvTabs: {
-      default() {
-        return {
-          // Don't set a tab index if not rendered inside <b-tabs>
-          noKeyNav: true
-        }
-      }
+      default: () => ({})
     }
   },
   props: {
@@ -181,7 +176,6 @@ export const BTab = /*#__PURE__*/ Vue.extend({
         attrs: {
           role: 'tabpanel',
           id: this.safeId(),
-          tabindex: this.localActive && !this.bvTabs.noKeyNav ? '-1' : null,
           'aria-hidden': this.localActive ? 'false' : 'true',
           'aria-labelledby': this.controlledBy || null
         }
diff --git a/src/components/tabs/tab.spec.js b/src/components/tabs/tab.spec.js
@@ -178,27 +178,6 @@ describe('tab', () => {
     wrapper.destroy()
   })
 
-  it('has attribute tabindex="-1" when parent has keynav enabled and active', async () => {
-    const wrapper = mount(BTab, {
-      provide() {
-        return {
-          bvTabs: {
-            fade: false,
-            lazy: false,
-            card: false,
-            noKeyNav: false
-          }
-        }
-      },
-      propsData: { active: true }
-    })
-
-    expect(wrapper.attributes('tabindex')).toBeDefined()
-    expect(wrapper.attributes('tabindex')).toBe('-1')
-
-    wrapper.destroy()
-  })
-
   it("calls parent's updateButton() when title slot provided", async () => {
     let called = false
     let vm = null

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,13 @@ $bv-dropdown-defined: false !default;`
`25`	`25`	`}`
`26`	`26`	`}`
`27`	`27`
	`28`	`+ // Hide the focus ring introduced by Bootstratp v4.4 reboot`
	`29`	`+ // on items with tabindex="-1", as we know how users feel`
	`30`	`+ // about blue rings where they don't expect them.`
	`31`	`+ .dropdown-menu:focus {`
	`32`	`+ outline: none`
	`33`	`+ }`
	`34`	`+`
`28`	`35`	`// Prevent dropdown background overflow if there's no padding`
`29`	`36`	`// See https://github.com/twbs/bootstrap/pull/27703`
`30`	`37`	`// Added here to address <li> wrapping of items`