bootstrap-vue · jacobmllr95 · Jul 5, 2019 · Jul 5, 2019 · Jul 5, 2019 · Jul 5, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -24,8 +24,8 @@ Released 2019-06-30
 ### Features v2.0.0-rc.25
 
 - **b-table:** sort fields by formatted value for fields that have a formatter function + support
-  for optional `localCompare` options and locale
-  (closes [#3178](https://github.com/bootstrap-vue/bootstrap-vue/issues/3178),
+  for optional `localCompare` options and locale (closes
+  [#3178](https://github.com/bootstrap-vue/bootstrap-vue/issues/3178),
   [#1173](https://github.com/bootstrap-vue/bootstrap-vue/issues/1173))
   ([#3585](https://github.com/bootstrap-vue/bootstrap-vue/issues/3585)
   [c0ca1fd](https://github.com/bootstrap-vue/bootstrap-vue/commit/c0ca1fd))

diff --git a/docs/assets/scss/styles.scss b/docs/assets/scss/styles.scss
@@ -1,4 +1,4 @@
-/*! BootstrapVue Docs Additional Styles */
+/*! BootstrapVue Docs Additional Styles and overrides */
 
 .nuxt-progress {
   position: fixed;
@@ -63,9 +63,17 @@
 }
 
 .bd-toc {
+  @media (min-width: 768px) {
+    border-left: 1px solid rgba(0, 0, 0, 0.1);
+  }
+
   .section-nav {
+    border-left: none;
+
     .toc-entry {
       > .nav-link {
+        padding-left: 0;
+        padding-right: 0;
         + .nav {
           display: none;
         }

diff --git a/docs/components/footer.vue b/docs/components/footer.vue
@@ -1,22 +1,44 @@
 <template>
-  <footer class="bd-footer text-muted">
-    <b-container fluid>
-      <ul class="bd-footer-links">
-        <li><b-link to="/">Home</b-link></li>
-        <li><b-link to="/docs/">Documentation</b-link></li>
-        <li>
-          <a href="https://github.com/bootstrap-vue/bootstrap-vue" target="_blank">
-            GitHub
-          </a>
-        </li>
-        <li>
-          <a href="https://discord.gg/j2Mtcny" target="_blank">
-            Discord Chat Forum
-          </a>
-        </li>
-      </ul>
+  <footer :class="['bd-footer', 'text-muted', { 'docs-border': isDocs }]">
+    <b-container>
+      <b-row class="justify-content-center">
+        <b-col cols="12" sm order-sm="3" class="text-center text-sm-right">
+          <b-img
+            src="~static/logo.svg"
+            class="mb-4 mt-0 mt-sm-4"
+            alt="BootstrapVue logo"
+            width="100"
+            fluid
+          ></b-img>
+        </b-col>
 
-      <p>
+        <b-col cols="auto" md="4" class="text-left">
+          <h5 class="bd-text-purple-bright mb-1">Documentation</h5>
+          <ul class="list-unstyled ml-3">
+            <li><b-link to="/" exact>Home</b-link></li>
+            <li><b-link to="/docs" exact>Getting started</b-link></li>
+            <li><b-link to="/docs/components" exact>Components</b-link></li>
+            <li><b-link to="/docs/directives" exact>Directives</b-link></li>
+            <li><b-link to="/docs/reference" exact>Reference</b-link></li>
+            <li><b-link to="/docs/misc" exact>Miscellaneous</b-link></li>
+            <li><b-link to="/play" exact>Playground</b-link></li>
+          </ul>
+        </b-col>
+
+        <b-col cols="auto" class="text-left">
+          <h5 class="bd-text-purple-bright mb-1">Community</h5>
+          <ul class="list-unstyled ml-3">
+            <li><a href="https://github.com/bootstrap-vue/bootstrap-vue" target="_blank">GitHub</a></li>
+            <li><a href="https://discord.gg/j2Mtcny" target="_blank">Discord chat</a></li>
+            <li><a href="https://twitter.com/BootstrapVue" target="_blank">Twitter</a></li>
+            <li><a href="https://opencollective.com/bootstrap-vue/" target="_blank">Open Collective</a></li>
+          </ul>
+        </b-col>
+      </b-row>
+
+      <hr>
+
+      <p class="mb-2">
         Designed and built with all the love in the world. Maintained by the
         <a href="https://github.com/orgs/bootstrap-vue/people" target="_blank">core team</a>
         with the help of
@@ -32,11 +54,29 @@
   </footer>
 </template>
 
+<style scoped>
+.docs-border {
+  border-top: 3px solid #dee2e6;
+}
+
+@media (min-width: 1200px) {
+  .bd-footer > .container {
+    max-width: 960px;
+  }
+}
+</style>
+
 <script>
 import { version } from '~/content'
 
 export default {
   name: 'BVDFooter',
+  props: {
+    isDocs: {
+      type: Boolean,
+      default: false
+    }
+  },
   data() {
     return { version }
   }

diff --git a/docs/layouts/docs.js b/docs/layouts/docs.js
@@ -1,5 +1,6 @@
 import Feedback from '~/components/feedback'
 import Header from '~/components/header'
+import Footer from '~/components/footer'
 import Search from '~/components/search'
 import Sidebar from '~/components/sidebar.vue'
 import Toc from '~/components/toc.vue'
@@ -11,7 +12,7 @@ export default {
     const $sidebarCol = h(
       'b-col',
       {
-        staticClass: 'bd-sidebar',
+        staticClass: 'bd-sidebar border-bottom-0',
         props: { cols: 12, md: 3, xl: 2 }
       },
       [h(Search), h(Sidebar)]
@@ -40,6 +41,6 @@ export default {
     )
     const $row = h('b-row', { class: ['flex-xl-nowrap2'] }, [$sidebarCol, $contentCol, $tocCol])
     const $container = h('b-container', { props: { fluid: true } }, [$row])
-    return [h(Header), $container]
+    return [h(Header), $container, h(Footer, { props: { isDocs: true } })]
   }
 }
diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -4,13 +4,13 @@
       <b-container tag="article">
         <b-row align-v="center" class="mb-4">
           <!-- eslint-disable-next-line vue/max-attributes-per-line -->
-          <b-col tag="aside" cols="8" offset="2" md="5" offset-md="0" order-md="2" lg="4">
+          <b-col tag="aside" cols="8" offset="2" sm="6" offset-sm="3" md="4" offset-md="0" order-md="2">
             <!-- vue-loader will inline the svg as a data uri -->
             <!-- eslint-disable-next-line vue/max-attributes-per-line -->
             <b-img src="~static/logo.svg" alt="BootstrapVue logo" class="bv-logo mb-4 mb-md-0" center fluid></b-img>
           </b-col>
 
-          <b-col tag="section" md="7" order-md="1" lg="8">
+          <b-col tag="section" md="8" order-md="1">
             <h1 class="mb-3 text-center text-md-left bd-text-purple-bright">Bootstrap + Vue</h1>
 
             <p class="lead">

diff --git a/docs/pages/play.vue b/docs/pages/play.vue
@@ -159,7 +159,7 @@
           <!-- Result column -->
           <b-col cols="12" class="mt-3">
             <!-- Result -->
-            <b-card>
+            <b-card class="play-result">
               <div
                 slot="header"
                 class="d-flex justify-content-between align-items-center"
@@ -187,7 +187,7 @@
               <div slot="header" class="d-flex justify-content-between align-items-center">
                 <span>Console</span>
                 <b-btn
-                  v-if="messages.length"
+                  :disabled="messages.length === 0"
                   size="sm"
                   variant="outline-danger"
                   @click="clear"
@@ -227,6 +227,11 @@
 </template>
 
 <style scoped>
+.play-result /deep/ .card-body,
+.play-log {
+  min-height: 300px;
+}
+
 .flip-move {
   transition: all 0.3s;
 }
@@ -286,7 +291,7 @@ const DEFAULT_JS = `{
       this.show = !this.show
     },
     dismissed() {
-      console.log('Dismiss button clicked')
+      console.log('Alert dismissed')
     }
   }
 }`

diff --git a/src/components/list-group/README.md b/src/components/list-group/README.md
@@ -51,8 +51,8 @@ actionalable items. see below).
 
 ## Actionable list group items
 
-Turn a `<b-list-group-item>` into an actionable _link_ (`<a href="...">`) by specifying
-either an `href` prop or [router-link](/docs/reference/router-links) `to` prop.
+Turn a `<b-list-group-item>` into an actionable _link_ (`<a href="...">`) by specifying either an
+`href` prop or [router-link](/docs/reference/router-links) `to` prop.
 
 ```html
 <b-list-group>

diff --git a/src/components/popover/README.md b/src/components/popover/README.md
@@ -569,7 +569,7 @@ when the trigger element is clicked a second time), then you can either:
 - Disable your trigger element (if possible) as soon as the popover begins to open (via the `show`
   event), and re-enable it when appropriate (i.e. via the `hide` or `hidden` event).
 
-For practical purposes, interactive content popovers should be minimal. The maximum width of the
+For practical purposes, **interactive content popovers should be minimal**. The maximum width of the
 popover is hard coded by Bootstrap v4 CSS to `276px`. Tall popovers on small screens can be harder
 to deal with on mobile devices (such as smart-phones).
 
@@ -840,4 +840,30 @@ possible. When the popover is closed, you should return focus back to your trigg
 You may also want to implement focus containment in the popover content while the user is
 interacting with it (keeping focus inside the popover until it is closed by the user).
 
+### Making popovers work for keyboard and assistive technology users
+
+To allow keyboard users to activate your popovers, you should only add them to HTML elements that
+are traditionally keyboard-focusable and interactive (such as links or form controls). Although
+arbitrary HTML elements (such as `<span>`s) can be made focusable by adding the `tabindex="0"`
+attribute, this will add potentially annoying and confusing tab stops on non-interactive elements
+for keyboard users, and most assistive technologies currently do not announce the popover's content
+in this situation. Additionally, do not rely solely on `hover` as the trigger for your popovers, as
+this will make them impossible to trigger for keyboard users.
+
+While you can insert rich, structured HTML and/or components in popovers via slots, we strongly
+recommend that you avoid adding an excessive amount of content. The way popovers currently work is
+that, once displayed, their content is tied to the trigger element with the `aria-describedby`
+attribute. As a result, the entirety of the popover's content will be announced (read) to assistive
+technology users as one long, uninterrupted stream.
+
+Additionally, while it is possible to also include interactive controls (such as form elements or
+links) in your popover, be aware that currently the popover does not manage keyboard focus order.
+When a keyboard user opens a popover, focus remains on the triggering element, and as the popover
+usually does not immediately follow the trigger in the document's structure, there is no guarantee
+that moving forward/pressing <kbd>TAB</kbd> will move a keyboard user into the popover itself. In
+short, simply adding interactive controls to a popover is likely to make these controls
+unreachable/unusable for keyboard users and users of assistive technologies, or at the very least
+make for an illogical overall focus order. **In these cases, consider using a `<b-modal>` dialog
+instead**.
+
 <!-- Component reference added automatically from component package.json -->
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -413,4 +413,14 @@ export default {
 Refer to the [Events](/docs/components/tooltip#component-reference) section of documentation for the
 full list of events.
 
+## Making tooltips work for keyboard and assistive technology users
+
+You should only add tooltips to HTML elements that are traditionally keyboard-focusable and
+interactive (such as links, buttons, or form controls). Although arbitrary HTML elements (such as
+`<span>`s) can be made focusable by adding the `tabindex="0"` attribute, this will add potentially
+annoying and confusing tab stops on non-interactive elements for keyboard users, and most assistive
+technologies currently do not announce the tooltip in this situation. Additionally, do not rely
+solely on `hover` as the trigger for your tooltip, as this will make your tooltips impossible to
+trigger for keyboard users.
+
 <!-- Component reference added automatically from component package.json -->