fix: missing aria label on batch action checkbox (#834)

carbon-design-system · Feb 25, 2020 · c2864fd · c2864fd
1 parent b27c2f6
commit c2864fd
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 6 deletions.
diff --git a/packages/core/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue b/packages/core/src/components/cv-code-snippet/_cv-code-snippet-multiline.vue
@@ -13,7 +13,7 @@
       <Copy16 class="bx--snippet__icon" />
     </cv-feedback-button>
 
-    <cv-button type="button" kind="ghost" small class="bx--snippet-btn--expand" @click="toggleExpand">
+    <cv-button type="button" kind="ghost" size="small" class="bx--snippet-btn--expand" @click="toggleExpand">
       <span class="bx--snippet-btn--text">{{ expandButtonText }}</span>
       <ChevronDown16 class="bx--icon-chevron--down" />
     </cv-button>

diff --git a/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue b/packages/core/src/components/cv-data-table/_cv-data-table-row-inner.vue
@@ -10,7 +10,14 @@
       </button>
     </td>
     <td v-if="hasBatchActions" class="bx--table-column-checkbox">
-      <cv-checkbox :form-item="false" :value="value" v-model="dataChecked" @change="onChange" ref="rowChecked" />
+      <cv-checkbox
+        :form-item="false"
+        :value="value"
+        v-model="dataChecked"
+        @change="onChange"
+        ref="rowChecked"
+        :aria-label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
+      />
     </td>
     <slot />
     <td v-if="hasOverflowMenu" class="bx--table-column-menu">
@@ -42,6 +49,7 @@ export default {
   name: 'CvDataTableRowInner',
   components: { CvCheckbox, CvOverflowMenu, CvOverflowMenuItem, ChevronRight16 },
   props: {
+    ariaLabelForBatchCheckbox: String,
     checked: Boolean,
     expanded: Boolean,
     expandingRow: Boolean,

diff --git a/packages/core/src/components/cv-data-table/cv-data-table-notes.md b/packages/core/src/components/cv-data-table/cv-data-table-notes.md
@@ -111,6 +111,8 @@ Like sorting and filtering it is the users responsibility to deal with edited da
 
 As per note sort and filter behviours are delegated to the component user.
 
-### Additional
+## Rows
 
 Rows are not automatically deselected after when a batch action is executed. The selected row checks can be cleared either by calling the method deselect which will deselect all or by use of v-model with the rows-selected property.
+
+When batch actions are supplied rows require a value and aria-label for the checkboxes added. Where a simple data array is provided they are created automatically. If using slotted content then the user must supply a value. They can also supply the property "aria-label-for-batch-checkbox" which defaults to `Select row ${value} for batch action`.
diff --git a/packages/core/src/components/cv-data-table/cv-data-table.vue b/packages/core/src/components/cv-data-table/cv-data-table.vue
@@ -19,7 +19,9 @@
         >
           <div class="bx--action-list">
             <slot name="batch-actions" />
-            <cv-button class="bx--batch-summary__cancel" small @click="deselect">{{ batchCancelLabel }}</cv-button>
+            <cv-button class="bx--batch-summary__cancel" size="small" @click="deselect">{{
+              batchCancelLabel
+            }}</cv-button>
           </div>
           <div class="bx--batch-summary">
             <p class="bx--batch-summary__para">

diff --git a/storybook/stories/cv-data-table-story.js b/storybook/stories/cv-data-table-story.js
@@ -232,7 +232,7 @@ let preKnobs = {
     group: 'slots',
     slot: 'data',
     value:
-      '\n    <cv-data-table-row v-for="(row, rowIndex) in internalData" :key="`${rowIndex}`" :value="`${rowIndex}`">' +
+      '\n    <cv-data-table-row v-for="(row, rowIndex) in internalData" :key="`${rowIndex}`" :value="`${rowIndex}`" :aria-label-for-batch-checkbox="`Custom aria label for row ${rowIndex} batch`">' +
       '\n       <cv-data-table-cell v-for="(cell, cellIndex) in row" :key="`${cellIndex}`" :value="`${cellIndex}`" v-html="cell"></cv-data-table-cell>' +
       '\n       <template v-if="hasExpandingRows && rowIndex % 2 === 0" slot="expandedContent">A variety of content types can live here. Be sure to follow Carbon design guidelines for spacing and alignment.</template>' +
       '\n    </cv-data-table-row>\n',
@@ -347,7 +347,10 @@ let variants = [
   },
   { name: 'slottedHelper', includes: ['columns', 'data', 'title', 'helperTextSlot'] },
   { name: 'minimal', includes: ['columns', 'data'] },
-  { name: 'slotted data', includes: ['columns', 'slottedData', 'data', 'basicPagination', 'hasExpandingRows'] },
+  {
+    name: 'slotted data',
+    includes: ['columns', 'slottedData', 'data', `batchActions`, 'basicPagination', 'hasExpandingRows'],
+  },
   {
     name: 'slotted expanding data',
     includes: ['columns', 'expandingSlottedData', 'data', 'basicPagination', 'hasExpandAll'],