Accessibility enhancements

src/components/Table.vue

@@ -66,9 +66,13 @@
       </div>
       <div class="vgt-fixed-header">
         <table
+          id="vgt-table"
           v-if="fixedHeader"
           :class="tableStyleClasses"
         >
+        <colgroup>
+          <col v-for="(column, index) in columns" :key="index" :id="`col-${index}`">
+        </colgroup>
           <!-- Table header -->
           <thead
             is="vgt-table-header"
@@ -108,9 +112,13 @@
         :style="wrapperStyles"
       >
         <table
+          id="vgt-table"
           ref="table"
           :class="tableStyles"
         >
+        <colgroup>
+          <col v-for="(column, index) in columns" :key="index" :id="`col-${index}`">
+        </colgroup>
           <!-- Table header -->
           <thead
             is="vgt-table-header"
@@ -234,10 +242,7 @@
                   <span v-if="!column.html">
                     {{ collectFormatted(row, column) }}
                   </span>
-                  <span
-                    v-if="column.html"
-                    v-html="collect(row, column.field)"
-                  >
+                  <span v-else v-html="collect(row, column.field)">
                   </span>
                 </slot>
               </td>
@@ -426,7 +431,7 @@ export default {
 
     // text options
     nextText: 'Next',
-    prevText: 'Prev',
+    prevText: 'Previous',
     rowsPerPageText: 'Rows per page',
     ofText: 'of',
     allText: 'All',

src/components/VgtGlobalSearch.vue

@@ -1,18 +1,25 @@
 <template>
 <div v-if="showControlBar" class="vgt-global-search vgt-clearfix">
   <div class="vgt-global-search__input vgt-pull-left">
-    <span v-if="searchEnabled" class="input__icon">
-      <div class="magnifying-glass"></div>
-    </span>
+    <form v-if="searchEnabled" role="search">
+
+      <label for="vgt-search">
+        <span aria-hidden="true" class="input__icon">
+        <div class="magnifying-glass"></div>
+        </span>
+        <span class="sr-only">Search</span>
+      </label>
     <input
-      v-if="searchEnabled"
+      id="vgt-search"
       type="text"
       class="vgt-input vgt-pull-left"
-      :placeholder="globalSearchPlaceholder"
+      :placeholder="null"
       :value="value"
       @input="updateValue($event.target.value)"
       @keyup.enter="entered($event.target.value)" />
+    </form>
   </div>
+
   <div class="vgt-global-search__actions vgt-pull-right">
     <slot name="internal-table-actions">
     </slot>

src/components/VgtPagination.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="vgt-wrap__footer vgt-clearfix">
     <div class="footer__row-count vgt-pull-left">
-      <span class="footer__row-count__label">{{rowsPerPageText}}</span>
+      <form>
+      <label for="select-rows-per-page" class="footer__row-count__label">{{rowsPerPageText}}:</label>
       <select
+        id="select-rows-per-page"
         autocomplete="off"
         name="perPageSelect"
         class="footer__row-count__select"
         v-model="currentPerPage"
-        @change="perPageChanged">
+        @change="perPageChanged"
+        aria-controls="vgt-table">
         <option
           v-for="(option, idx) in rowsPerPageOptions"
           :key="'rows-dropdown-option-' + idx"
@@ -16,17 +19,9 @@
         </option>
         <option v-if="paginateDropdownAllowAll" :value="total">{{allText}}</option>
       </select>
+      </form>
     </div>
     <div class="footer__navigation vgt-pull-right">
-      <a
-        href="javascript:undefined"
-        class="footer__navigation__page-btn"
-        :class="{ disabled: !prevIsPossible }"
-        @click.prevent.stop="previousPage"
-        tabindex="0">
-        <span class="chevron" v-bind:class="{ 'left': !rtl, 'right': rtl }"></span>
-        <span>{{prevText}}</span>
-      </a>
       <pagination-page-info
         @page-changed="changePage"
         :totalRecords="total"
@@ -37,11 +32,27 @@
         v-if="mode === 'pages'">
       </pagination-page-info>
       <div v-else class="footer__navigation__info">{{paginatedInfo}}</div>
-      <a href="javascript:undefined" class="footer__navigation__page-btn"
-         :class="{ disabled: !nextIsPossible }" @click.prevent.stop="nextPage" tabindex="0">
+      <button
+        v-show="prevIsPossible"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !prevIsPossible }"
+        @click.prevent.stop="previousPage">
+        <span aria-hidden="true" class="chevron" v-bind:class="{ 'left': !rtl, 'right': rtl }"></span>
+        <span>{{prevText}}</span>
+      </button>
+
+      <button
+        v-show="nextIsPossible"
+        type="button"
+        aria-controls="vgt-table"
+        class="footer__navigation__page-btn"
+        :class="{ disabled: !nextIsPossible }"
+        @click.prevent.stop="nextPage">
         <span>{{nextText}}</span>
-        <span class="chevron" v-bind:class="{ 'right': !rtl, 'left': rtl }"></span>
-      </a>
+        <span aria-hidden="true" class="chevron" v-bind:class="{ 'right': !rtl, 'left': rtl }"></span>
+      </button>
     </div>
   </div>
 </template>
@@ -119,7 +130,7 @@ export default {
         first = 0;
       }
 
-      return `${first} - ${last} ${this.ofText} ${this.total}`;
+      return `Showing ${first} to ${last} ${this.ofText} ${this.total} entries`;
     },
 
     // Can go to next page

src/components/VgtPaginationPageInfo.vue

@@ -1,10 +1,19 @@
 <template>
 <div class="footer__navigation__page-info">
-  {{pageText}} <input
+  <form>
+  <label for="change-page-input">{{pageText}} <input
+    id="change-page-input"
+    aria-describedby="change-page-hint"
+    aria-controls="vgb-table"
     class="footer__navigation__page-info__current-entry"
     type="text"
     @keyup.enter.stop="changePage"
     :value="currentPage"> {{pageInfo}}
+    </label>
+    <span id="change-page-hint">
+      Type a page number and press Enter to change the page.
+    </span>
+    </form>
 </div>
 </template>
 

src/components/VgtTableHeader.vue

@@ -1,23 +1,32 @@
 <template>
 <thead>
   <tr>
-    <th v-if="lineNumbers" class="line-numbers"></th>
-    <th v-if="selectable" class="vgt-checkbox-col">
+    <th scope="col" v-if="lineNumbers" class="line-numbers"></th>
+    <th scope="col" v-if="selectable" class="vgt-checkbox-col">
       <input
         type="checkbox"
         :checked="allSelected"
         :indeterminate.prop="allSelectedIndeterminate"
         @change="toggleSelectAll" />
     </th>
     <th v-for="(column, index) in columns"
+      scope="col"
       :key="index"
-      @click="sort($event, column)"
       :class="getHeaderClasses(column, index)"
       :style="columnStyles[index]"
+      :aria-sort="getColumnSortLong(column)"
+      :aria-controls="`col-${index}`"
       v-if="!column.hidden">
       <slot name="table-column" :column="column">
-        <span>{{column.label}}</span>
+        {{column.label}}
       </slot>
+        <button
+        v-if="isSortableColumn(column)"
+        @click="sort($event, column)">
+        <span class="sr-only">
+          Sort table by {{ column.label }} in {{ getColumnSortLong(column) }} order
+          </span>
+        </button>
     </th>
   </tr>
   <tr
@@ -136,6 +145,7 @@ export default {
     };
   },
   computed: {
+
   },
   methods: {
     reset() {
@@ -175,6 +185,12 @@ export default {
       return null;
     },
 
+    getColumnSortLong(column) {
+      return this.getColumnSort(column) === 'asc'
+        ? 'ascending'
+        : 'descending'
+    },
+
     getHeaderClasses(column, index) {
       const classes = assign({}, this.getClasses(index, 'th'), {
         sortable: this.isSortableColumn(column),

src/styles/_control-bar.scss

@@ -6,6 +6,12 @@
   border:  1px solid $border-color;
   border-bottom: 0px;
   background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
+  form {
+    display: flex;
+    label {
+      margin-top: 3px;
+    }
+  }
 }
 .vgt-global-search__input{
   position:  relative;
@@ -21,7 +27,7 @@
       display: block;
       width: 16px;
       height: 16px;
-      border: 2px solid darken($border-color, 2%);
+      border: 2px solid #494949;
       position: relative;
       border-radius: 50%;
       &:before{
@@ -30,7 +36,7 @@
         position: absolute;
         right: -7px;
         bottom: -5px;
-        background: darken($border-color, 2%);
+        background: #494949;
         width: 8px;
         height: 4px;
         border-radius: 2px;

src/styles/_table-footer.scss

@@ -3,6 +3,7 @@
 }
 .vgt-wrap__footer{
   color: $text-color;
+  font-size:  1.2rem;
   padding:  1em;
   border: 1px solid $border-color;
   background: linear-gradient($thead-bg-color-1, $thead-bg-color-2);
@@ -12,28 +13,22 @@
       vertical-align: middle;
     }
     &__label{
-      font-size: 14px;
-      color: $secondary-text-color;
+      font-size: 1.2rem;
     }
     &__select{
-      background-color: transparent;
       width: auto;
-      padding: 0;
-      border: 0;
-      border-radius: 0;
-      height: auto;
-      font-size: 14px;
+      font-size: 1.2rem;
       margin-left: 8px;
-      color:  $text-color;
-      font-weight: bold;
-      &:focus{
-        outline: none;
-        border-color: $link-color;
-      }
+      padding: 3px;
+      -webkit-appearance: listbox;
+      -moz-appearance: listbox;
     }
   }
   .footer__navigation{
-    font-size: 14px;
+    > button:first-of-type {
+      margin-right: 16px;
+    } 
+    font-size: 1.2rem
     &__page-btn, &__info, &__page-info{
       display: inline-block;
       vertical-align: middle;
@@ -43,10 +38,6 @@
       color: $text-color;
       font-weight: bold;
       white-space:nowrap;
-      &:focus{
-        outline: none;
-        border: 0;
-      }
       &.disabled,
       &.disabled:hover {
         opacity: 0.5;
@@ -63,7 +54,7 @@
         height:  24px;
         border-radius: 15%;
         position:  relative;
-        margin:  0px 8px;
+        margin:  0;
         &:after{
           content:  '';
           position:  absolute;
@@ -87,7 +78,6 @@
     }
     &__info, &__page-info{
       display: inline-block;
-      color: $secondary-text-color;
       margin:  0px 16px;
     }
     &__page-info{
@@ -99,6 +89,8 @@
         font-weight: bold;
       }
     }
+
+
   }
 }