Merge branch 'dev' into feat/time-picker

tmorehouse · web-flow · commit a082aceef243 · 2020-02-15T03:36:43.000-04:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,27 @@
 > [standard-version](https://github.com/conventional-changelog/standard-version) for commit
 > guidelines.
 
+<a name="2.4.2"></a>
+
+## [v2.4.2](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.4.1...v2.4.2)
+
+Released: 2020-02-15
+
+### Bug Fixes v2.4.2
+
+- **b-button:** when `href` is "#" add `role=button` and appropriate keydown handlers for A11Y
+  ([#4768](https://github.com/bootstrap-vue/bootstrap-vue/issues/4768))
+  ([087a128](https://github.com/bootstrap-vue/bootstrap-vue/commit/087a1283977061c44d5b059c203f13d2326dabae))
+- **b-modal:** fix transition show enter timing (closes
+  [#4761](https://github.com/bootstrap-vue/bootstrap-vue/issues/4761))
+  ([#4766](https://github.com/bootstrap-vue/bootstrap-vue/issues/4766))
+  ([968c957](https://github.com/bootstrap-vue/bootstrap-vue/commit/968c95758e45610a8c002507790c79d87d8fe956))
+
+### Other v2.4.2
+
+- documentation updates
+- dev dependency updates
+
 <a name="2.4.1"></a>
 
 ## [v2.4.1](https://github.com/bootstrap-vue/bootstrap-vue/compare/v2.4.0...v2.4.1)
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-vue",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "description": "BootstrapVue, with over 40 plugins and more than 80 custom components, custom directives, and over 300 icons, provides one of the most comprehensive implementations of Bootstrap v4 components and grid system for Vue.js. With extensive and automated WAI-ARIA accessibility markup.",
   "main": "dist/bootstrap-vue.common.js",
   "web": "dist/bootstrap-vue.js",
@@ -145,7 +145,7 @@
     "postcss-cli": "^7.1.0",
     "prettier": "1.14.3",
     "require-context": "^1.1.0",
-    "rollup": "^1.31.0",
+    "rollup": "^1.31.1",
     "rollup-plugin-babel": "^4.3.3",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
diff --git a/src/components/button/README.md b/src/components/button/README.md
@@ -257,6 +257,16 @@ supported `<router-link>` related props.
 
 Note the `<router-link>` prop `tag` is referred to as `router-tag` in `bootstrap-vue`.
 
+## Accessibility
+
+When the `href` prop is set to `'#'`, `<b-button>` will render a link (`<a>`) element with attribute
+`role="button"` set and apropriate keydown listeners (<kbd>Enter</kbd> and <kbd>Space</kbd>) so that
+the link acts like a native HTML `<button>` for screen reader and keyboard-only users. When disabled,
+the `aria-disabled="true"` attribute will be set on the `<a>` element.
+
+When the `href` is set to any other value (or the `to` prop is used), `role="button"` will not be
+added, nor will the keyboad event listeners be enabled.
+
 ## See also
 
 - [`<b-button-group>`](/docs/components/button-group)
diff --git a/src/components/button/button.js b/src/components/button/button.js
@@ -1,5 +1,6 @@
 import Vue from '../../utils/vue'
 import { mergeData } from 'vue-functional-data-merge'
+import KeyCodes from '../../utils/key-codes'
 import pluckProps from '../../utils/pluck-props'
 import { concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
@@ -47,8 +48,8 @@ const btnProps = {
     default: false
   },
   pressed: {
-    // tri-state prop: true, false or null
-    // => on, off, not a toggle
+    // Tri-state: `true`, `false` or `null`
+    // => On, off, not a toggle
     type: Boolean,
     default: null
   }
@@ -63,10 +64,11 @@ export const props = { ...linkProps, ...btnProps }
 
 // --- Helper methods ---
 
-// Returns true if a tag's name is name
+// Returns `true` if a tag's name equals `name`
 const tagIs = (tag, name) => toString(tag).toLowerCase() === toString(name).toLowerCase()
 
-// Focus handler for toggle buttons.  Needs class of 'focus' when focused.
+// Focus handler for toggle buttons
+// Needs class of 'focus' when focused
 const handleFocus = evt => {
   if (evt.type === 'focusin') {
     addClass(evt.target, 'focus')
@@ -76,7 +78,7 @@ const handleFocus = evt => {
 }
 
 // Is the requested button a link?
-// If tag prop is set to `a`, we use a b-link to get proper disabled handling
+// If tag prop is set to `a`, we use a <b-link> to get proper disabled handling
 const isLink = props => props.href || props.to || tagIs(props.tag, 'a')
 
 // Is the button to be a toggle button?
@@ -109,31 +111,33 @@ const computeAttrs = (props, data) => {
   const button = isButton(props)
   const link = isLink(props)
   const toggle = isToggle(props)
-  const nonStdTag = isNonStandardTag(props)
+  const nonStandardTag = isNonStandardTag(props)
+  const hashLink = link && props.href === '#'
   const role = data.attrs && data.attrs.role ? data.attrs.role : null
   let tabindex = data.attrs ? data.attrs.tabindex : null
-  if (nonStdTag) {
+  if (nonStandardTag || hashLink) {
     tabindex = '0'
   }
   return {
     // Type only used for "real" buttons
     type: button && !link ? props.type : null,
     // Disabled only set on "real" buttons
     disabled: button ? props.disabled : null,
-    // We add a role of button when the tag is not a link or button for ARIA.
-    // Don't bork any role provided in data.attrs when isLink or isButton
-    role: nonStdTag ? 'button' : role,
-    // We set the aria-disabled state for non-standard tags
-    'aria-disabled': nonStdTag ? String(props.disabled) : null,
+    // We add a role of button when the tag is not a link or button for ARIA
+    // Don't bork any role provided in `data.attrs` when `isLink` or `isButton`
+    // Except when link has `href` of `#`
+    role: nonStandardTag || hashLink ? 'button' : role,
+    // We set the `aria-disabled` state for non-standard tags
+    'aria-disabled': nonStandardTag ? String(props.disabled) : null,
     // For toggles, we need to set the pressed state for ARIA
     'aria-pressed': toggle ? String(props.pressed) : null,
-    // autocomplete off is needed in toggle mode to prevent some browsers from
-    // remembering the previous setting when using the back button.
+    // `autocomplete="off"` is needed in toggle mode to prevent some browsers
+    // from remembering the previous setting when using the back button
     autocomplete: toggle ? 'off' : null,
-    // Tab index is used when the component is not a button.
+    // `tabindex` is used when the component is not a button
     // Links are tabbable, but don't allow disabled, while non buttons or links
     // are not tabbable, so we mimic that functionality by disabling tabbing
-    // when disabled, and adding a tabindex of '0' to non buttons or non links.
+    // when disabled, and adding a `tabindex="0"` to non buttons or non links
     tabindex: props.disabled && !button ? '-1' : tabindex
   }
 }
@@ -146,16 +150,33 @@ export const BButton = /*#__PURE__*/ Vue.extend({
   render(h, { props, data, listeners, children }) {
     const toggle = isToggle(props)
     const link = isLink(props)
+    const nonStandardTag = isNonStandardTag(props)
+    const hashLink = link && props.href === '#'
     const on = {
+      keydown(evt) {
+        // When the link is a `href="#"` or a non-standard tag (has `role="button"`),
+        // we add a keydown handlers for SPACE/ENTER
+        /* istanbul ignore next */
+        if (props.disabled || !(nonStandardTag || hashLink)) {
+          return
+        }
+        const { keyCode } = evt
+        // Add SPACE handler for `href="#"` and ENTER handler for non-standard tags
+        if (keyCode === KeyCodes.SPACE || (keyCode === KeyCodes.ENTER && nonStandardTag)) {
+          const target = evt.currentTarget || evt.target
+          evt.preventDefault()
+          target.click()
+        }
+      },
       click(evt) {
         /* istanbul ignore if: blink/button disabled should handle this */
         if (props.disabled && isEvent(evt)) {
           evt.stopPropagation()
           evt.preventDefault()
         } else if (toggle && listeners && listeners['update:pressed']) {
-          // Send .sync updates to any "pressed" prop (if .sync listeners)
-          // Concat will normalize the value to an array
-          // without double wrapping an array value in an array.
+          // Send `.sync` updates to any "pressed" prop (if `.sync` listeners)
+          // `concat()` will normalize the value to an array without
+          // double wrapping an array value in an array
           concat(listeners['update:pressed']).forEach(fn => {
             if (isFunction(fn)) {
               fn(!props.pressed)
diff --git a/src/components/button/button.spec.js b/src/components/button/button.spec.js
@@ -179,6 +179,22 @@ describe('button', () => {
     // Actually returns 4, as disabled is there twice
     expect(wrapper.attributes('aria-disabled')).toBeDefined()
     expect(wrapper.attributes('aria-disabled')).toBe('true')
+    // Shouldnt have a role with href not `#`
+    expect(wrapper.attributes('role')).not.toEqual('button')
+  })
+
+  it('link with href="#" should have role="button"', async () => {
+    const wrapper = mount(BButton, {
+      propsData: {
+        href: '#'
+      }
+    })
+
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.classes()).toContain('btn')
+    expect(wrapper.classes()).toContain('btn-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('role')).toEqual('button')
   })
 
   it('should emit click event when clicked', async () => {
@@ -201,6 +217,38 @@ describe('button', () => {
     expect(evt).toBeInstanceOf(MouseEvent)
   })
 
+  it('link with href="#" should treat keydown.space as click', async () => {
+    let called = 0
+    let evt = null
+    const wrapper = mount(BButton, {
+      propsData: {
+        href: '#'
+      },
+      listeners: {
+        click: e => {
+          evt = e
+          called++
+        }
+      }
+    })
+
+    expect(wrapper.is('a')).toBe(true)
+    expect(wrapper.classes()).toContain('btn')
+    expect(wrapper.classes()).toContain('btn-secondary')
+    expect(wrapper.classes()).not.toContain('disabled')
+    expect(wrapper.attributes('role')).toEqual('button')
+
+    expect(called).toBe(0)
+    expect(evt).toEqual(null)
+
+    // We add keydown.space to make links act like buttons
+    wrapper.find('.btn').trigger('keydown.space')
+    expect(called).toBe(1)
+    expect(evt).toBeInstanceOf(Event)
+
+    // Links treat keydown.enter natively as a click
+  })
+
   it('should not emit click event when clicked and disabled', async () => {
     let called = 0
     const wrapper = mount(BButton, {
diff --git a/src/components/link/link.js b/src/components/link/link.js
@@ -168,7 +168,7 @@ export const BLink = /*#__PURE__*/ Vue.extend({
       },
       props: this.computedProps
     }
-    // Add the event handlers. We must use `navtiveOn` for
+    // Add the event handlers. We must use `nativeOn` for
     // `<router-link>`/`<nuxt-link>` instead of `on`
     componentData[isRouterLink ? 'nativeOn' : 'on'] = {
       // Transfer all listeners (native) to the root element
diff --git a/src/components/modal/modal.js b/src/components/modal/modal.js
@@ -604,10 +604,13 @@ export const BModal = /*#__PURE__*/ Vue.extend({
     },
     onEnter() {
       this.isBlock = true
+      // We add show class 1 frame after
+      requestAF(() => {
+        this.isShow = true
+      })
     },
     onAfterEnter() {
       this.checkModalOverflow()
-      this.isShow = true
       this.isTransitioning = false
       // We use `requestAF()` to allow transition hooks to complete
       // before passing control over to the other handlers
diff --git a/src/components/popover/README.md b/src/components/popover/README.md
@@ -160,11 +160,37 @@ If a popover has more than one trigger, then all triggers must be cleared before
 close. I.e. if a popover has the trigger `focus click`, and it was opened by `focus`, and the user
 then clicks the trigger element, they must click it again **and** move focus to close the popover.
 
+### Caveats with `focus` trigger on `<button>` elements
+
+For proper cross-browser and cross-platform behavior when using only the `focus` trigger, you must
+use an element that renders the `<a>` tag, not the `<button>` tag, and you also must include a
+`tabindex="0"` attribute.
+
+The following will generate an `<a>` that looks like a button:
+
+```html
+<b-button
+  href="#"
+  tabindex="0"
+  v-b-popover.focus="'Popover content'"
+  title="Popover title"
+>
+  Link button with popover directive
+</b-button>
+
+<b-button id="link-button" href="#" tabindex="0">
+  Link button with popover component
+</b-button>
+<b-popover target="link-button" title="Popover title" triggers="focus">
+  Popover content
+</b-popover>
+```
+
 ### Dismiss on next click (self-dismissing)
 
 Use the `focus` trigger by itself to dismiss popovers on the next click that the user makes. `focus`
 also makes the popover activate on both `focus` and `click` (as a click makes the element receive
-focus, assuming it is in the tab sequence of the page).
+focus on most browsers, assuming it is in the tab sequence of the page).
 
 You can, however, specify your trigger as `click blur`, which will make only a click activate the
 popover, and either a click on the element, _or_ losing focus to another element or part of the
@@ -274,7 +300,7 @@ prop:
 
 ```html
 <div class="text-center">
-  <b-button id="popover-button-variant">Button</b-button>
+  <b-button id="popover-button-variant" href="#" tabindex="0">Button</b-button>
   <b-popover target="popover-button-variant" variant="danger" triggers="focus">
     <template v-slot:title>Danger!</template>
     Danger variant popover
diff --git a/src/components/tooltip/README.md b/src/components/tooltip/README.md
@@ -106,6 +106,32 @@ If a tooltip has more than one trigger, then all triggers must be cleared before
 close. I.e. if a tooltip has the trigger `focus click`, and it was opened by `focus`, and the user
 then clicks the trigger element, they must click it again **and** move focus to close the tooltip.
 
+### Caveats with `focus` trigger on `<button>` elements
+
+For proper cross-browser and cross-platform behavior when using only the `focus` trigger, you must
+use an element that renders the `<a>` tag, not the `<button>` tag, and you also must include a
+`tabindex="0"` attribute.
+
+The following will generate an `<a>` that looks like a button:
+
+```html
+<b-button
+  href="#"
+  tabindex="0"
+  v-b-tooltip.focus
+  title="Tooltip title"
+>
+  Link button with tooltip directive
+</b-button>
+
+<b-button id="link-button" href="#" tabindex="0">
+  Link button with tooltip component
+</b-button>
+<b-tooltip target="link-button" title="Tooltip title" triggers="focus">
+  Tooltip title
+</b-tooltip>
+```
+
 ### Making tooltips work for keyboard and assistive technology users
 
 You should only add tooltips to HTML elements that are traditionally keyboard-focusable and
diff --git a/src/directives/popover/README.md b/src/directives/popover/README.md
@@ -215,6 +215,25 @@ assistive technologies currently do not announce the popover in this situation.
 Additionally, do not rely solely on `hover` as the trigger for your popover, as this will make your
 popovers _impossible to trigger for keyboard-only users_.
 
+### Caveats with `focus` trigger on `<button>` elements
+
+For proper cross-browser and cross-platform behavior when using only the `focus` trigger, you must
+use an element that renders the `<a>` tag, not the `<button>` tag, and you also must include a
+`tabindex="0"` attribute.
+
+The following will generate an `<a>` that looks like a button:
+
+```html
+<b-button
+  href="#"
+  tabindex="0"
+  v-b-popover.focus="'Popover content'"
+  title="Popover title"
+>
+  Link button with popover directive
+</b-button>
+```
+
 ### Dismiss on next click (self dismissing)
 
 Use the `focus` trigger by itself to dismiss popovers on the next click that the user makes. `focus`
diff --git a/src/directives/tooltip/README.md b/src/directives/tooltip/README.md
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -168,7 +168,7 @@ export const BLink = /#__PURE__/ Vue.extend({`
`168`	`168`	`},`
`169`	`169`	`props: this.computedProps`
`170`	`170`	`}`
`171`		- // Add the event handlers. We must use `navtiveOn` for
	`171`	+ // Add the event handlers. We must use `nativeOn` for
`172`	`172`	// `<router-link>`/`<nuxt-link>` instead of `on`
`173`	`173`	`componentData[isRouterLink ? 'nativeOn' : 'on'] = {`
`174`	`174`	`// Transfer all listeners (native) to the root element`