* 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.
This commit is contained in:
parent
25900adc51
commit
7ed4365c2c
|
@ -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 () {
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
|
|
29
ui_framework/dist/ui_framework.css
vendored
29
ui_framework/dist/ui_framework.css
vendored
|
@ -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; }
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue