[Accessibility] Make table pagination controls keyboard-accessible. (#13541) (#13601)

* Make table pagination controls keyboard-accessible. Update KuiLink so it can be used on a button element.
* Add additional properties to link mixin to make kuiLink look the same for both buttons and anchor tags.
* Fix tests.

src/ui/public/paginated_table/__tests__/index.js

@@ -111,7 +111,7 @@ describe('paginated table', function () {
       const tableRows = $el.find('tbody tr');
       expect(tableRows.size()).to.be(perPageCount);
       // add 2 for the first and last page links
-      expect($el.find('paginate-controls a').size()).to.be(pageCount + 2);
+      expect($el.find('paginate-controls button').size()).to.be(pageCount + 2);
     });
 
     it('should not show blank rows on last page when so specified', function () {

src/ui/public/partials/paginate_controls.html

@@ -1,40 +1,49 @@
-<a
+<button
   class="kuiLink"
   ng-if="linkToTop"
   ng-click="paginate.goToTop()"
   data-test-subj="paginateControlsLinkToTop"
 >
   Scroll to top
-</a>
+</button>
 
-<div class="pagination-other-pages">
+<div
+  class="pagination-other-pages"
+  data-test-subj="paginationControls"
+>
   <ul class="pagination-other-pages-list pagination-sm" ng-if="page.count > 1">
     <li ng-style="{'visibility':'hidden'}" ng-if="page.first">
-      <a ng-click="paginate.goToPage(page.prev)">«</a>
+      <button class="kuiLink" ng-click="paginate.goToPage(page.prev)">«</button>
     </li>
     <li ng-style="{'visibility':'visible'}" ng-if="!page.first">
-      <a ng-click="paginate.goToPage(page.prev)">«</a>
+      <button class="kuiLink" ng-click="paginate.goToPage(page.prev)">«</button>
     </li>
 
     <li ng-if="!otherPages.containsFirst">
-      <a ng-click="paginate.goToPage(1)">1...</a>
+      <button class="kuiLink" ng-click="paginate.goToPage(1)">1...</button>
     </li>
 
     <li
       ng-repeat="other in otherPages"
-      ng-class="{ active: other.number === page.number }">
-      <a ng-click="paginate.goToPage(other)">{{other.number}}</a>
+      ng-class="{ active: other.number === page.number }"
+    >
+      <button
+        class="kuiLink"
+        ng-click="paginate.goToPage(other)"
+      >
+        {{other.number}}
+      </button>
     </li>
 
     <li ng-if="!otherPages.containsLast">
-      <a ng-click="paginate.goToPage(page.count)">...{{page.count}}</a>
+      <button class="kuiLink" ng-click="paginate.goToPage(page.count)">...{{page.count}}</button>
     </li>
 
     <li ng-style="{'visibility':'hidden'}" ng-if="page.last">
-      <a ng-click="paginate.goToPage(page.next)">»</a>
+      <button class="kuiLink" ng-click="paginate.goToPage(page.next)">»</button>
     </li>
     <li ng-style="{'visibility':'visible'}" ng-if="!page.last">
-      <a ng-click="paginate.goToPage(page.next)">»</a>
+      <button class="kuiLink" ng-click="paginate.goToPage(page.next)">»</button>
     </li>
   </ul>
 </div>
@@ -46,7 +55,6 @@
       ng-model="paginate.perPage"
       ng-options="opt.value as opt.title for opt in paginate.sizeOptions"
       data-test-subj="paginateControlsPageSizeSelect"
-    >
-    </select>
+    ></select>
   </div>
 </form>

test/functional/page_objects/settings_page.js

@@ -232,8 +232,7 @@ export function SettingsPageProvider({ getService, getPageObjects }) {
 
     async goToPage(pageNum) {
       await remote.setFindTimeout(defaultFindTimeout)
-        .findByCssSelector('ul.pagination-other-pages-list.pagination-sm.ng-scope li.ng-scope:nth-child(' +
-          (pageNum + 1) + ') a.ng-binding')
+        .findByCssSelector(`[data-test-subj="paginationControls"] li:nth-child(${pageNum + 1}) button`)
         .click();
       await PageObjects.header.waitUntilLoadingHasFinished();
     }

ui_framework/dist/ui_framework.css

@@ -1,5 +1,6 @@
 /**
  * 1. Enforce pointer when there's no href.
+ * 2. Allow these styles to be applied to a button element.
  */
 /**
  * 1. Override Bootstrap styles.
@@ -1580,9 +1581,21 @@ main {
 
 .kuiLink {
   color: #0079a5;
+  text-decoration: none;
   cursor: pointer;
   /* 1 */
-  font-weight: 500; }
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: none;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */ }
   .kuiLink:visited, .kuiLink:active {
     color: #0079a5; }
   .kuiLink:hover {
@@ -1631,9 +1644,21 @@ main {
  */
 .kuiLocalBreadcrumb__link {
   color: #0079a5;
+  text-decoration: none;
   cursor: pointer;
   /* 1 */
-  font-weight: 500;
+  -webkit-appearance: none;
+     -moz-appearance: none;
+          appearance: none;
+  /* 2 */
+  background-color: transparent;
+  /* 2 */
+  border: none;
+  /* 2 */
+  font-size: inherit;
+  /* 2 */
+  line-height: inherit;
+  /* 2 */
   color: #0079a5;
   /* 1 */
   font-size: 14px; }

ui_framework/doc_site/src/views/link/link.html

@@ -1 +1,4 @@
-<a class="kuiLink" href="#">More info</a>
+<a class="kuiLink" href="#">On an anchor element</a>
+<br />
+<br />
+<button class="kuiLink" href="#">On a button element</button>

ui_framework/src/global_styling/mixins/_global_mixins.scss

@@ -6,11 +6,17 @@
 
 /**
  * 1. Enforce pointer when there's no href.
+ * 2. Allow these styles to be applied to a button element.
  */
 @mixin link {
   color: $globalLinkColor;
+  text-decoration: none;
   cursor: pointer; /* 1 */
-  font-weight: 500;
+  appearance: none; /* 2 */
+  background-color: transparent; /* 2 */
+  border: none; /* 2 */
+  font-size: inherit; /* 2 */
+  line-height: inherit; /* 2 */
 
   &:visited,
   &:active {