Merge branch 'dev' into fix-form-group-feedback-aria-role

jacobmllr95 · web-flow · commit c7dfd5696bab · 2021-02-02T11:06:39.000+01:00
diff --git a/package.json b/package.json
@@ -97,14 +97,14 @@
     "@babel/plugin-transform-runtime": "^7.12.10",
     "@babel/preset-env": "^7.12.11",
     "@babel/standalone": "^7.12.12",
-    "@nuxt/content": "^1.11.1",
+    "@nuxt/content": "^1.12.0",
     "@nuxtjs/google-analytics": "^2.4.0",
     "@nuxtjs/pwa": "^3.3.5",
     "@nuxtjs/robots": "^2.4.2",
     "@nuxtjs/sitemap": "^2.4.0",
     "@testing-library/jest-dom": "^5.11.9",
     "@vue/test-utils": "^1.1.2",
-    "autoprefixer": "^10.2.3",
+    "autoprefixer": "^10.2.4",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^26.6.3",
@@ -116,7 +116,7 @@
     "codesandbox": "^2.2.1",
     "core-js": "^3.8.3",
     "cross-env": "^7.0.3",
-    "eslint": "^7.18.0",
+    "eslint": "^7.19.0",
     "eslint-config-prettier": "^7.2.0",
     "eslint-config-standard": "^16.0.2",
     "eslint-config-vue": "^2.0.2",
@@ -143,7 +143,7 @@
     "postcss-cli": "^8.3.1",
     "prettier": "1.14.3",
     "require-context": "^1.1.0",
-    "rollup": "^2.38.1",
+    "rollup": "^2.38.3",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
diff --git a/src/components/form-tags/_form-tags.scss b/src/components/form-tags/_form-tags.scss
@@ -1,13 +1,4 @@
 .b-form-tags {
-  .b-form-tags-list {
-    margin-top: -0.25rem;
-
-    .b-from-tags-field,
-    .b-form-tag {
-      margin-top: 0.25rem;
-    }
-  }
-
   &.focus {
     color: $input-focus-color;
     background-color: $input-focus-bg;
@@ -35,6 +26,19 @@
   }
 }
 
+.b-form-tags-list {
+  margin-top: -0.25rem;
+
+  .b-from-tags-field,
+  .b-form-tag {
+    margin-top: 0.25rem;
+  }
+}
+
+.b-form-tags-input {
+  color: $input-color;
+}
+
 .b-form-tag {
   // Override default badge settings
   // Due to using text-truncate on the inner content
diff --git a/src/components/form-tags/form-tags.js b/src/components/form-tags/form-tags.js
@@ -18,15 +18,7 @@ import { RX_SPACES } from '../../constants/regex'
 import { SLOT_NAME_DEFAULT, SLOT_NAME_ADD_BUTTON_TEXT } from '../../constants/slots'
 import { arrayIncludes, concat } from '../../utils/array'
 import { cssEscape } from '../../utils/css-escape'
-import {
-  attemptBlur,
-  attemptFocus,
-  closest,
-  isActiveElement,
-  matches,
-  requestAF,
-  select
-} from '../../utils/dom'
+import { attemptBlur, attemptFocus, closest, matches, requestAF, select } from '../../utils/dom'
 import { eventOn, eventOff, stopEvent } from '../../utils/events'
 import { identity } from '../../utils/identity'
 import { isEvent, isNumber, isString } from '../../utils/inspect'
@@ -39,6 +31,7 @@ import { formControlMixin, props as formControlProps } from '../../mixins/form-c
 import { formSizeMixin, props as formSizeProps } from '../../mixins/form-size'
 import { formStateMixin, props as formStateProps } from '../../mixins/form-state'
 import { idMixin, props as idProps } from '../../mixins/id'
+import { listenersMixin } from '../../mixins/listeners'
 import { normalizeSlotMixin } from '../../mixins/normalize-slot'
 import { BButton } from '../button/button'
 import { BFormInvalidFeedback } from '../form/form-invalid-feedback'
@@ -144,6 +137,7 @@ const props = makePropsConfigurable(
 export const BFormTags = /*#__PURE__*/ Vue.extend({
   name: NAME_FORM_TAGS,
   mixins: [
+    listenersMixin,
     idMixin,
     modelMixin,
     formControlMixin,
@@ -186,6 +180,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     },
     computedInputHandlers() {
       return {
+        ...this.bvListeners,
         input: this.onInputInput,
         change: this.onInputChange,
         keydown: this.onInputKeydown,
@@ -338,10 +333,6 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
       //   will prevent the tag from being removed (i.e. confirmation)
       //   Or emit cancelable `BvEvent`
       this.tags = this.tags.filter(t => t !== tag)
-      // Return focus to the input (if possible)
-      this.$nextTick(() => {
-        this.focus()
-      })
     },
     reset() {
       this.newTag = ''
@@ -413,13 +404,8 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     },
     // --- Wrapper event handlers ---
     onClick(event) {
-      const ignoreFocusSelector = this.computeIgnoreInputFocusSelector
-      const { target } = event
-      if (
-        !this.disabled &&
-        !isActiveElement(target) &&
-        (!ignoreFocusSelector || !closest(ignoreFocusSelector, target, true))
-      ) {
+      const { computeIgnoreInputFocusSelector: ignoreFocusSelector } = this
+      if (!ignoreFocusSelector || !closest(ignoreFocusSelector, event.target, true)) {
         this.$nextTick(() => {
           this.focus()
         })
@@ -434,7 +420,7 @@ export const BFormTags = /*#__PURE__*/ Vue.extend({
     handleAutofocus() {
       this.$nextTick(() => {
         requestAF(() => {
-          if (this.autofocus && !this.disabled) {
+          if (this.autofocus) {
             this.focus()
           }
         })
diff --git a/src/components/form-tags/form-tags.spec.js b/src/components/form-tags/form-tags.spec.js
@@ -842,4 +842,41 @@ describe('form-tags', () => {
 
     wrapper.destroy()
   })
+
+  it('emits focus and blur events', async () => {
+    const onFocus = jest.fn()
+    const onBlur = jest.fn()
+    const wrapper = mount(BFormTags, {
+      propsData: {
+        value: ['apple', 'orange']
+      },
+      listeners: {
+        focus: onFocus,
+        blur: onBlur
+      }
+    })
+
+    expect(onFocus).not.toHaveBeenCalled()
+    expect(onBlur).not.toHaveBeenCalled()
+
+    const $input = wrapper.find('input')
+    expect(typeof wrapper.vm.$listeners.focus).toBe('function')
+
+    $input.trigger('focus')
+    $input.trigger('focusin')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(onFocus).toHaveBeenCalled()
+    expect(onBlur).not.toHaveBeenCalled()
+
+    $input.trigger('blur')
+    $input.trigger('focusout')
+    await waitNT(wrapper.vm)
+    await waitRAF()
+
+    expect(onBlur).toHaveBeenCalled()
+
+    wrapper.destroy()
+  })
 })
diff --git a/src/components/table/helpers/mixin-selectable.js b/src/components/table/helpers/mixin-selectable.js
@@ -12,12 +12,15 @@ import { isArray, isNumber } from '../../../utils/inspect'
 import { looseEqual } from '../../../utils/loose-equal'
 import { mathMax, mathMin } from '../../../utils/math'
 import { makeProp } from '../../../utils/props'
+import { toString } from '../../../utils/string'
 import { sanitizeRow } from './sanitize-row'
 
 // --- Constants ---
 
 const SELECT_MODES = ['range', 'multi', 'single']
 
+const ROLE_GRID = 'grid'
+
 // --- Props ---
 
 export const props = {
@@ -70,17 +73,19 @@ export const selectableMixin = Vue.extend({
       }
     },
     selectableTableAttrs() {
-      const role = this.bvAttrs.role || 'grid'
+      if (!this.isSelectable) {
+        return {}
+      }
 
-      return this.isSelectable
-        ? {
-            role,
-            // TODO:
-            //   Should this attribute not be included when `no-select-on-click` is set
-            //   since this attribute implies keyboard navigation?
-            'aria-multiselectable': role === 'grid' ? String(this.selectableIsMultiSelect) : null
-          }
-        : {}
+      const role = this.bvAttrs.role || ROLE_GRID
+
+      return {
+        role,
+        // TODO:
+        //   Should this attribute not be included when `no-select-on-click` is set
+        //   since this attribute implies keyboard navigation?
+        'aria-multiselectable': role === ROLE_GRID ? toString(this.selectableIsMultiSelect) : null
+      }
     }
   },
   watch: {
diff --git a/src/components/table/helpers/mixin-table-renderer.js b/src/components/table/helpers/mixin-table-renderer.js
@@ -115,7 +115,7 @@ export const tableRendererMixin = Vue.extend({
       const ariaAttrs = this.isTableSimple
         ? {}
         : {
-            'aria-busy': this.computedBusy ? 'true' : 'false',
+            'aria-busy': toString(this.computedBusy),
             'aria-colcount': toString(fields.length),
             // Preserve user supplied `aria-describedby`, if provided
             'aria-describedby':
@@ -135,7 +135,7 @@ export const tableRendererMixin = Vue.extend({
         ...this.bvAttrs,
         // Now we can override any `$attrs` here
         id: this.safeId(),
-        role: 'table',
+        role: this.bvAttrs.role || 'table',
         ...ariaAttrs,
         ...selectableTableAttrs
       }
diff --git a/src/components/table/table-selectable.spec.js b/src/components/table/table-selectable.spec.js
@@ -52,6 +52,47 @@ describe('table > row select', () => {
     wrapper.destroy()
   })
 
+  it('should apply user role if provided, grid role if multiselectable or table role otherwise', async () => {
+    let wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems
+      }
+    })
+
+    expect(wrapper).toBeDefined()
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.attributes('role')).toBe('table')
+    wrapper.destroy()
+
+    wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        role: 'foobar'
+      }
+    })
+
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.attributes('role')).toBe('foobar')
+    wrapper.destroy()
+
+    wrapper = mount(BTable, {
+      propsData: {
+        fields: testFields,
+        items: testItems,
+        selectable: true
+      }
+    })
+
+    await waitNT(wrapper.vm)
+
+    expect(wrapper.attributes('role')).toBe('grid')
+    wrapper.destroy()
+  })
+
   it('should have tabindex but not aria-selected when not selectable and has row-clicked listener', async () => {
     const wrapper = mount(BTable, {
       propsData: {
diff --git a/yarn.lock b/yarn.lock
