@carbon/vue 2.43.0 → 2.44.1

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

@@ -1,7 +1,7 @@
 <template>
   <cv-wrapper :tag-type="formItem ? 'div' : ''" :class="`cv-search ${carbonPrefix}--form-item`">
     <div
-      :aria-labelledby="uid"
+      v-bind="wrapperAttrs"
       :class="[
         `${carbonPrefix}--search`,
         {
@@ -30,7 +30,7 @@
         <Search20 :class="`${carbonPrefix}--search-magnifier-icon`" />
       </div>
 
-      <label :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
+      <label v-show="label" :for="uid" :class="`${carbonPrefix}--label`">{{ label }}</label>
 
       <input
         :id="uid"
@@ -39,7 +39,6 @@
         v-model="internalValue"
         v-on="inputListeners"
         type="text"
-        role="search"
         ref="input"
         :placeholder="placeholder"
         :aria-labelledby="uid"
@@ -72,6 +71,7 @@ export default {
   components: { Close16, CvWrapper, Search20 },
   inheritAttrs: false,
   props: {
+    ariaLabel: String,
     clearAriaLabel: { type: String, default: 'Clear search input' },
     formItem: { type: Boolean, default: true },
     kind: { type: String, default: undefined },
@@ -115,6 +115,17 @@ export default {
     },
   },
   computed: {
+    wrapperAttrs() {
+      const attrs = {};
+      if (this.ariaLabel) {
+        attrs['aria-label'] = this.ariaLabel;
+      } else if (this.label) {
+        attrs['aria-labelledby'] = this.uid;
+      } else {
+        attrs['aria-label'] = 'Search box';
+      }
+      return attrs;
+    },
     // Bind listeners at the component level to the embedded input element and
     // add our own input listener to service the v-model. See:
     // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model

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

@@ -1,6 +1,7 @@
 <template>
   <div :class="`cv-slider ${carbonPrefix}--form-item`">
     <label
+      v-show="label"
       :for="uid"
       :class="[`${carbonPrefix}--label`, { [`${carbonPrefix}--label--disabled`]: disabled }]"
       :id="labelId"

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

@@ -44,8 +44,6 @@
             },
           ]"
           role="presentation"
-          :aria-selected="selectedId == tab.uid ? 'true' : 'false'"
-          :aria-disabled="disabledTabs.indexOf(tab.uid) !== -1"
         >
           <button
             :class="`${carbonPrefix}--tabs--scrollable__nav-link`"

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

@@ -7,7 +7,6 @@
       type="checkbox"
       :id="uid"
       :checked="isChecked === true"
-      :aria-checked="`${isChecked}`"
       :value="value"
       ref="input"
     />

package/src/thumbnails/inline-notification.svg

@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>inline-notification</title>
+    <defs>
+        <circle id="path-1" cx="5" cy="5" r="4.375"></circle>
+        <polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
+    </defs>
+    <g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
+        <g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
+            <mask id="mask-2" fill="white">
+                <use xlink:href="#path-1"></use>
+            </mask>
+            <use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
+            <mask id="mask-4" fill="white">
+                <use xlink:href="#path-3"></use>
+            </mask>
+            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
+        </g>
+        <rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
+    </g>
+</svg>

package/src/thumbnails/skeleton-text.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>skeleton-text</title>
+    <defs>
+        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
+            <stop stop-color="#C6C6C6" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
+        <rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
+        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
+    </g>
+</svg>

package/src/thumbnails/toast-notification.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>toast-notification</title>
+    <defs>
+        <circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
+        <polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
+    </defs>
+    <g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
+        <rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
+        <g id="Group" transform="translate(73.000000, 68.000000)">
+            <g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
+                <g id="error--filled" transform="translate(0.875000, 0.875000)">
+                    <g id="icon-2">
+                        <mask id="mask-2" fill="white">
+                            <use xlink:href="#path-1"></use>
+                        </mask>
+                        <use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
+                    </g>
+                    <g id="icon-1" transform="translate(2.625000, 2.625000)">
+                        <mask id="mask-4" fill="white">
+                            <use xlink:href="#path-3"></use>
+                        </mask>
+                        <use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
+                    </g>
+                </g>
+                <rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
+            </g>
+        </g>
+        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
+        <rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
+        <rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
+    </g>
+</svg>