@carbon/vue 2.13.0 → 2.14.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/vue",
   "description": "A collection of components for the Carbon Design System built using Vue.js",
-  "version": "2.13.0",
+  "version": "2.14.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -72,5 +72,5 @@
     "babel-preset-env": "1.7.0",
     "vue-template-compiler": "^2.6.10"
   },
-  "gitHead": "f6fb5832437ca84c95e1a0d08c2633c243bbde96"
+  "gitHead": "d1585de603e956cb32d56c2a201d9be3e13b5bd2"
 }

package/src/components/cv-breadcrumb/cv-breadcrumb-skeleton.vue

@@ -1,5 +1,5 @@
 <template>
-  <nav class="bx--breadcrumb bx--skeleton" aria-label="breadcrumb">
+  <nav class="bx--breadcrumb bx--skeleton" :aria-label="ariaLabel">
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
     <cv-breadcrumb-item-skeleton></cv-breadcrumb-item-skeleton>
@@ -14,5 +14,8 @@ export default {
   components: {
     CvBreadcrumbItemSkeleton,
   },
+  props: {
+    ariaLabel: { type: String, default: 'breadcrumb' },
+  },
 };
 </script>

package/src/components/cv-breadcrumb/cv-breadcrumb.vue

@@ -2,7 +2,7 @@
   <nav
     class="cv-breadcrumb bx--breadcrumb"
     :class="{ 'bx--breadcrumb--no-trailing-slash': noTrailingSlash }"
-    aria-label="breadcrumb"
+    :aria-label="ariaLabel"
   >
     <slot></slot>
   </nav>
@@ -12,6 +12,7 @@
 export default {
   name: 'CvBreadcrumb',
   props: {
+    ariaLabel: { type: String, default: 'breadcrumb' },
     noTrailingSlash: Boolean,
   },
 };

package/src/components/cv-data-table/cv-data-table.vue

@@ -15,7 +15,7 @@
           v-if="hasBatchActions"
           class="bx--batch-actions"
           :class="{ 'bx--batch-actions--active': batchActive }"
-          aria-label="Table Action Bar"
+          :aria-label="actionBarAriaLabel"
         >
           <div class="bx--action-list">
             <slot name="batch-actions" />
@@ -179,6 +179,7 @@ export default {
   },
   mixins: [uidMixin],
   props: {
+    actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
     autoWidth: Boolean,
     batchCancelLabel: { type: String, default: 'cancel' },
     borderless: Boolean,

package/src/components/cv-date-picker/cv-date-picker.vue

@@ -50,7 +50,7 @@
             :data-date-picker-input-to="kind === 'range'"
             ref="todate"
           />
-          <Calendar16 class="bx--date-picker__icon" data-date-picker-icon @click="cal.open()" />
+          <Calendar16 class="bx--date-picker__icon" data-date-picker-icon @click="openTodateCal()" />
         </div>
       </div>
     </div>
@@ -160,7 +160,7 @@ export default {
       // _options.onValueUpdate = this.onChange;
 
       if (this.kind === 'range') {
-        _options.plugins = [new RangePlugin({ input: this.$refs.todate })];
+        _options.plugins = [new RangePlugin({ input: this.$refs.todate, position: 'left' })];
       }
 
       return _options;
@@ -223,6 +223,9 @@ export default {
         }
       }
     },
+    openTodateCal() {
+      this.$refs.todate.click();
+    },
   },
   mounted() {
     if (['single', 'range'].includes(this.kind)) {

package/src/components/cv-file-uploader/cv-file-uploader.vue

@@ -46,8 +46,8 @@
                 class="bx--file-close"
                 :tabindex="'1'"
                 role="button"
-                alt="Remove file"
-                arial-label="Remove file"
+                :alt="removeAriaLabel"
+                :arial-label="removeAriaLabel"
                 @click="remove(index)"
                 @keydown.enter.prevent="remove(index)"
                 @keydown.space.prevent
@@ -92,6 +92,7 @@ export default {
     initialStateUploading: Boolean,
     removable: Boolean,
     buttonLabel: { type: String, default: 'Select file' },
+    removeAriaLabel: { type: String, default: 'Remove file' },
   },
   model: {
     prop: 'files',

package/src/components/cv-inline-notification/cv-inline-notification.vue

@@ -14,7 +14,13 @@
         <p class="bx--inline-notification__subtitle">{{ subTitle }}.</p>
       </div>
     </div>
-    <button type="button" data-notification-btn class="bx--inline-notification__close-button" @click="$emit('close')">
+    <button
+      type="button"
+      :aria-label="closeAriaLabel"
+      data-notification-btn
+      class="bx--inline-notification__close-button"
+      @click="$emit('close')"
+    >
       <Close16 class="bx--inline-notification__close-icon" />
     </button>
   </div>
@@ -32,6 +38,7 @@ export default {
   components: { Close16 },
   mixins: [notificationMixin],
   props: {
+    closeAriaLabel: { type: String, default: 'Clear filter' },
     kind: {
       type: String,
       default: 'info',

package/src/components/cv-modal/cv-modal.vue

@@ -51,6 +51,7 @@
           <slot name="secondary-button">Secondary button</slot>
         </cv-button>
         <cv-button
+          :disabled="primaryButtonDisabled"
           type="button"
           :kind="primaryKind"
           @click="onPrimaryClick"
@@ -91,6 +92,7 @@ export default {
     },
     autoHideOff: Boolean,
     visible: Boolean,
+    primaryButtonDisabled: Boolean,
   },
   data() {
     return {

package/src/components/cv-overflow-menu/cv-overflow-menu.vue

@@ -215,10 +215,14 @@ export default {
     this.$el.addEventListener('focusout', this.checkFocusOut);
 
     // move popup out to body to ensure it appears above other elements
-    document.body.appendChild(this.$refs.popup);
+    this.popupEl = document.body.appendChild(this.$refs.popup);
   },
   beforeDestroy() {
     this.positionListen(false);
+    if (this.popupEl) {
+      // move back to where it came from
+      this.$el.appendChild(this.popupEl);
+    }
   },
 };
 </script>

package/src/components/cv-search/cv-search.vue

@@ -21,7 +21,7 @@
         type="button"
         v-if="isToolbarKind"
         class="bx--toolbar-search__btn"
-        aria-label="Toolbar search"
+        :aria-label="toolbarAriaLabel"
         @click="toggleActive(true)"
         @blur="checkFocus"
       >
@@ -32,8 +32,8 @@
         type="button"
         class="bx--search-close"
         :class="{ 'bx--search-close--hidden': !clearVisible }"
-        title="Clear search input"
-        aria-label="Clear search input"
+        :title="clearAriaLabel"
+        :aria-label="clearAriaLabel"
         @click="onClearClick"
       >
         <Close16 />
@@ -55,6 +55,7 @@ export default {
   components: { Close16, Search16, CvWrapper },
   inheritAttrs: false,
   props: {
+    clearAriaLabel: { type: String, default: 'Clear search input' },
     formItem: { type: Boolean, default: true },
     kind: { type: String, default: null },
     label: String,
@@ -73,6 +74,7 @@ export default {
     },
     value: String,
     placeholder: { type: String, default: 'Search' },
+    toolbarAriaLabel: { type: String, default: 'Toolbar search' },
   },
   data() {
     return {

package/src/components/cv-tag/cv-tag.vue

@@ -8,18 +8,14 @@
         'bx--tag--disabled': disabled,
       },
     ]"
+    tabindex="0"
     :title="title"
+    @keydown.enter.stop.prevent="$emit('remove')"
+    @keydown.space.prevent
+    @keyup.space.prevent="$emit('remove')"
   >
     {{ label }}
-    <Close16
-      v-if="isFilter"
-      aria-label="Clear filter"
-      @click.stop.prevent="$emit('remove')"
-      tabindex="0"
-      @keydown.enter.stop.prevent="$emit('remove')"
-      @keydown.space.prevent
-      @keyup.space.prevent="$emit('remove')"
-    />
+    <Close16 v-if="isFilter" :aria-label="clearAriaLabel" role="button" @click.stop.prevent="$emit('remove')" />
   </span>
 </template>
 
@@ -44,6 +40,7 @@ export default {
   name: 'CvTag',
   components: { Close16 },
   props: {
+    clearAriaLabel: { type: String, default: 'Clear filter' },
     disabled: Boolean,
     label: { type: String, required: true },
     kind: {
@@ -59,7 +56,7 @@ export default {
       return this.kind === 'filter';
     },
     title() {
-      return this.isFilter ? 'Close filter' : null;
+      return this.isFilter ? this.clearAriaLabel : null;
     },
   },
 };

package/src/components/cv-tile/_cv-tile-selectable.vue

@@ -2,7 +2,7 @@
   <label
     :data-wibble="`${isChecked}`"
     :for="uid"
-    aria-label="tile"
+    :aria-label="ariaLabel"
     class="cv-tile-selectable bx--tile--selectable"
     :class="{ 'bx--tile--is-selected': isChecked }"
     data-tile="selectable"
@@ -40,5 +40,8 @@ export default {
   mixins: [uidMixin, checkMixin],
   components: { CheckmarkFilled16 },
   inheritAttrs: false,
+  props: {
+    ariaLabel: { type: String, default: 'tile' },
+  },
 };
 </script>

package/src/components/cv-toast-notification/cv-toast-notification.vue

@@ -14,7 +14,7 @@
       <p class="bx--toast-notification__caption">{{ caption }}</p>
     </div>
     <button
-      aria-label="Close"
+      :aria-label="closeAriaLabel"
       type="button"
       data-notification-btn
       class="bx--toast-notification__close-button"
@@ -38,6 +38,7 @@ export default {
   mixins: [notificationMixin],
   props: {
     caption: String,
+    closeAriaLabel: { type: String, default: 'Close' },
     kind: {
       type: String,
       default: 'info',

package/src/components/cv-tooltip/cv-interactive-tooltip.vue

@@ -201,7 +201,7 @@ export default {
   },
   mounted() {
     // move popup out to body to ensure it appears above other elements
-    document.body.appendChild(this.$refs.popup);
+    this.popupEl = document.body.appendChild(this.$refs.popup);
 
     if (this.visible) {
       this.show();
@@ -211,6 +211,10 @@ export default {
   },
   beforeDestroy() {
     this.positionListen(false);
+    if (this.popupEl) {
+      // move back to where it came from
+      this.$el.appendChild(this.popupEl);
+    }
   },
 };
 </script>

package/src/mixins/link-mixin.js

@@ -1,5 +1,6 @@
 export default {
   props: {
+    disabled: Boolean,
     to: String,
     href: String,
   },
@@ -9,7 +10,11 @@ export default {
       return this.to && !this.href ? 'router-link' : 'a';
     },
     linkProps() {
-      if (this.to && !this.href) {
+      if (this.disabled) {
+        return {
+          'aria-disabled': true,
+        };
+      } else if (this.to && !this.href) {
         return { to: this.to };
       }
       return { href: this.href };