bootstrap-vue · tmorehouse · Mar 19, 2019 · Mar 18, 2019 · Mar 18, 2019 · Mar 18, 2019
diff --git a/src/components/table/README.md b/src/components/table/README.md
@@ -1188,6 +1188,16 @@ as read-only.**
 <!-- b-table-selectable.vue -->
 ```
 
+When table is selectable, it will have class `b-table-selectable`, and one of the following three
+classes (depending on which mode is in use), on the `<table>` element:
+
+- `b-table-select-single`
+- `b-table-select-multi`
+- `b-table-select-range`
+
+When at least one row is selected the class `b-table-selecting` will be active on the `<table>`
+element.
+
 **Notes:**
 
 - _Paging, filtering, or sorting will clear the selection. The `row-selected` event will be emitted

diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss
@@ -159,7 +159,15 @@
 }
 
 /* b-table: selectable rows */
-table.b-table.b-table-selectable > tbody > tr {
-  cursor: pointer;
-  // user-select: none;
+.b-table.table.b-table-selectable {
+  & > tbody > tr {
+    cursor: pointer;
+  }
+
+  &.b-table-selecting {
+    // Disabled text-selection when in mode range when at least one row selected
+    &.b-table-select-range > tbody > tr {
+      user-select: none;
+    }
+  }
 }
diff --git a/src/components/table/helpers/mixin-selectable.js b/src/components/table/helpers/mixin-selectable.js
@@ -1,5 +1,5 @@
 import looseEqual from '../../../utils/loose-equal'
-import { isArray } from '../../../utils/array'
+import { isArray, arrayIncludes } from '../../../utils/array'
 import sanitizeRow from './sanitize-row'
 
 export default {
@@ -23,6 +23,29 @@ export default {
       selectedLastRow: -1
     }
   },
+  computed: {
+    selectableTableClasses() {
+      const selectable = this.selectable
+      const isSelecting = selectable && this.selectedRows && this.selectedRows.some(Boolean)
+      return {
+        'b-table-selectable': selectable,
+        [`b-table-select-${this.selectMode}`]: selectable,
+        'b-table-selecting': isSelecting
+      }
+    },
+    selectableTableAttrs() {
+      return {
+        'aria-multiselectable': this.selectableIsMultiSelect
+      }
+    },
+    selectableIsMultiSelect() {
+      if (this.selectable) {
+        return arrayIncludes(['range', 'multi'], this.selectMode) ? 'true' : 'false'
+      } else {
+        return null
+      }
+    }
+  },
   watch: {
     computedItems(newVal, oldVal) {
       // Reset for selectable
@@ -72,17 +95,18 @@ export default {
     isRowSelected(idx) {
       return Boolean(this.selectedRows[idx])
     },
-    rowSelectedClasses(idx) {
-      if (this.selectable) {
-        const rowSelected = this.isRowSelected(idx)
-        const base = this.dark ? 'bg' : 'table'
-        const variant = this.selectedVariant
-        return {
-          'b-row-selected': rowSelected,
-          [`${base}-${variant}`]: rowSelected && variant
-        }
-      } else {
-        return {}
+    selectableRowClasses(idx) {
+      const rowSelected = this.isRowSelected(idx)
+      const base = this.dark ? 'bg' : 'table'
+      const variant = this.selectedVariant
+      return {
+        'b-table-row-selected': this.selectable && rowSelected,
+        [`${base}-${variant}`]: this.selectable && rowSelected && variant
+      }
+    },
+    selectableRowAttrs(idx) {
+      return {
+        'aria-selected': !this.selectable ? null : this.isRowSelected(idx) ? 'true' : 'false'
       }
     },
     clearSelected() {
@@ -125,7 +149,6 @@ export default {
             idx <= Math.max(this.selectedLastRow, index);
             idx++
           ) {
-            // this.$set(this.selectedRows, idx, true)
             selectedRows[idx] = true
           }
           selected = true
@@ -138,7 +161,6 @@ export default {
           this.selectedLastRow = selected ? index : -1
         }
       }
-      // this.$set(this.selectedRows, index, selected)
       selectedRows[index] = selected
       this.selectedRows = selectedRows
     }

diff --git a/src/components/table/helpers/mixin-tbody-row.js b/src/components/table/helpers/mixin-tbody-row.js
@@ -195,7 +195,6 @@ export default {
       const hasRowClickHandler = this.$listeners['row-clicked'] || this.selectable
       const $detailsSlot = $scoped['row-details']
       const rowShowDetails = Boolean(item._showDetails && $detailsSlot)
-      const rowSelected = this.isRowSelected(rowIndex) /* from selctable mixin */
 
       // We can return more than one TR if rowDetails enabled
       const $rows = []
@@ -244,7 +243,7 @@ export default {
             key: `__b-table-row-${rowKey}__`,
             class: [
               this.rowClasses(item),
-              this.rowSelectedClasses(rowIndex),
+              this.selectableRowClasses(rowIndex),
               {
                 'b-table-has-details': rowShowDetails
               }
@@ -256,8 +255,8 @@ export default {
               'aria-describedby': detailsId,
               'aria-owns': detailsId,
               'aria-rowindex': ariaRowIndex,
-              'aria-selected': this.selectable ? (rowSelected ? 'true' : 'false') : null,
-              role: 'row'
+              role: 'row',
+              ...this.selectableRowAttrs(rowIndex)
             },
             on: {
               // TODO: only instatiate handlers if we have registered listeners (except row-clicked)