fix: labels in table checkboxes (#906)

* fix: labels in table checkboxes * chore: update table doc Co-authored-by: Lee Chase <[email protected]>
carbon-design-system · May 22, 2020 · 4acf0c7 · 4acf0c7
1 parent 33a2893
commit 4acf0c7
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
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
@@ -16,7 +16,8 @@
         v-model="dataChecked"
         @change="onChange"
         ref="rowChecked"
-        :aria-label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
+        :label="ariaLabelForBatchCheckbox || `Select row ${value} for batch action`"
+        hideLabel
       />
     </td>
     <slot />

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
@@ -80,7 +80,6 @@ Like sorting and filtering it is the users responsibility to deal with edited da
 - data: Two dimensional array of strings.
 - rows-selected: An array containing the selected row values. Supports v-model via the row-select-changes event.
 
-- action-bar-label: (optional) alternative aria label for the toolbar
 - auto-width: (optional) table will size use auto sizing
 - borderless: (optional) table will have no border
 - overflow-menu(optional) : An array of overflow menu labels. On click CvDataTable will raise an 'overflow-menu-click' event passing an object containing menuIndex, menuLabel and rowValue
@@ -93,6 +92,10 @@ Like sorting and filtering it is the users responsibility to deal with edited da
 - searchPlaceholder: (optional) { type: String, default: 'Search' },
 - searchClearLabel: (optional) { type: String, default: 'Clear search' },
 - batchCancelLabel: (optional) { type: String, default: 'Cancel' },
+- actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
+- collapseAllAriaLabel: { type: String, default: 'Collapse all rows' },
+- expandAllAriaLabel: { type: String, default: 'Expand all rows' },
+- selectAllAriaLabel: { type: String, default: 'Select all rows' },
 
 ## Scoped slots
 

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
@@ -109,6 +109,8 @@
                 value="headingCheck"
                 v-model="headingChecked"
                 @change="onHeadingCheckChange"
+                :label="selectAllAriaLabel"
+                hideLabel
               />
             </th>
             <slot name="headings">
@@ -197,6 +199,7 @@ export default {
     actionBarAriaLabel: { type: String, default: 'Table Action Bar' },
     collapseAllAriaLabel: { type: String, default: 'Collapse all rows' },
     expandAllAriaLabel: { type: String, default: 'Expand all rows' },
+    selectAllAriaLabel: { type: String, default: 'Select all rows' },
     autoWidth: Boolean,
     batchCancelLabel: { type: String, default: 'cancel' },
     borderless: Boolean,