Skip to content

Commit

Permalink
Refactor/pagination a11y (#516)
Browse files Browse the repository at this point in the history 
* fix: index.html

* refactor: add media query for high contrast;  adaptions for accessibility

* feat: auto overflow for mobile devices

* fix: adapt index.html

* fix: adapt index.html

* style: use css token for padding

* feat: introduce media-query

* style:  css for breakpoint small

* feat: add prop 'small'

* style: adapt line-heights for small and normal size

* fix: css issues due to specifity

* style: avoid double border between prev and next buttons

* style: outline at :focus fully visible

* refactor: adapt font size

* style: stretch host to 100% im media query;

* style: nested host has width of 100% in media query

* refactor: stories, button:active; build

* test: adapt snapshot; format; lint;

* feat: adapt icon size, height, border

* fix: line height of .info-responsive

* fix: refix line-height

* refactor: css; use more variables

* feat: provide translation for aria-label

* fix: clear index.html

* refactor: snapshots, lint, format

* fix: adapt snapshots

* refactor: rename aria label props

* fix: build

* fix: make pagination on _mobile_ always _small_

* fix(pagination): adjust icon size

* test: update snapshots

* fix: update visual snapshots

* fix: adapt visual tests

Co-authored-by: Christian Pajung <christian.pajung@telekom.de>
Co-authored-by: Arturo Castillo Delgado <ac@iconstorm.com>
  • Loading branch information
@ChrisPaj
3 people authored Aug 27, 2021
1 parent 082477f commit 586e0a3
Show file tree
Hide file tree
Showing 14 changed files with 494 additions and 234 deletions.
50 changes: 29 additions & 21 deletions packages/components/src/components/pagination/__snapshots__/pagination.spec.ts.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,32 +4,40 @@ exports[`pagination should match snapshot 1`] = `
<scale-pagination>
<mock:shadow-root>
<div class="pagination" part="pagination">
<button aria-label="Go to first page" class="pagination__first-prompt" disabled="" part="first-prompt">
<svg fill="none" height="17" stroke="#cacaca" viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg">
<path d="M44.5 48.5L21.5 26L44.5 3.5M27.5 48.5L4.5 26L27.5 3.5" stroke-linecap="round" stroke-width="6"></path>
</svg>
</button>
<button aria-label="Go to previous page" class="pagination__prev-prompt" disabled="" part="prev-prompt">
<svg fill="none" height="17" stroke="#cacaca" viewBox="0 0 37 52" xmlns="http://www.w3.org/2000/svg">
<path d="M33 48L6 26L33 4" stroke-linecap="round" stroke-width="7"></path>
</svg>
</button>
<div class="pagination__info" part="info" style="width: 54px;">
<div class="pagination__info-responsive" part="info-responsive">
<span>
1-1
</span>
/ 1
</div>
<button aria-label="Go to next page" class="pagination__next-prompt" disabled="" part="next-prompt">
<svg fill="none" height="17" stroke="#cacaca" viewBox="0 0 37 52" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4L31 26L4 48" stroke-linecap="round" stroke-width="7"></path>
</svg>
</button>
<button aria-label="Go to last page" class="pagination__last-prompt" disabled="" part="last-prompt">
<svg fill="none" height="17" stroke="#cacaca" viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 3.5L26.5 26L3.5 48.5M20.5 3.5L43.5 26L20.5 48.5" stroke-linecap="round" stroke-width="6"></path>
</svg>
</button>
<div class="pagination__button-wrapper">
<div class="pagination__info" part="info" style="width: 54px;">
<span>
1-1
</span>
/ 1
</div>
<button aria-label="Go to first page" class="pagination__first-prompt" disabled="" part="first-prompt">
<svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg">
<path d="M44.5 48.5L21.5 26L44.5 3.5M27.5 48.5L4.5 26L27.5 3.5" stroke-linecap="round" stroke-width="6"></path>
</svg>
</button>
<button aria-label="Go to previous page" class="pagination__prev-prompt" disabled="" part="prev-prompt">
<svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 37 52" xmlns="http://www.w3.org/2000/svg">
<path d="M33 48L6 26L33 4" stroke-linecap="round" stroke-width="7"></path>
</svg>
</button>
<button aria-label="Go to next page" class="pagination__next-prompt" disabled="" part="next-prompt">
<svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 37 52" xmlns="http://www.w3.org/2000/svg">
<path d="M4 4L31 26L4 48" stroke-linecap="round" stroke-width="7"></path>
</svg>
</button>
<button aria-label="Go to last page" class="pagination__last-prompt" disabled="" part="last-prompt">
<svg fill="none" height="12" stroke="#cacaca" viewBox="0 0 48 52" xmlns="http://www.w3.org/2000/svg">
<path d="M3.5 3.5L26.5 26L3.5 48.5M20.5 3.5L43.5 26L20.5 48.5" stroke-linecap="round" stroke-width="6"></path>
</svg>
</button>
</div>
</div>
</mock:shadow-root>
</scale-pagination>
Expand Down
122 changes: 108 additions & 14 deletions packages/components/src/components/pagination/pagination.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,31 +11,55 @@

:host {
--color: var(--scl-color-black);
--font-size: var(--scl-font-size-16);
--radius: var(--scl-radius-8);
--font-size: var(--scl-font-size-12);
--border: 1px solid var(--scl-color-grey-10);
--color-hover: var(--scl-color-primary-hover);
--color-active: var(--scl-color-primary-active);
--color-button: var(--scl-color-grey-10);
--border-button: var(--border);
--box-shadow-focus: 0px 0px 0px 2px var(--scl-color-focus);
--radius-first-prompt: 12px 0 0 12px;
--radius-last-prompt: 0 12px 12px 0;
--box-shadow-focus: inset 0 0 0 2px var(--scl-color-focus);
--radius-first-prompt: var(--radius) 0 0 var(--radius);
--radius-last-prompt: 0 var(--radius) var(--radius) 0;
--radius-first-prompt-stack: 0 0 0 var(--radius);
--radius-last-prompt-stack: 0 0 var(--radius) 0;
--stroke-svg: var(--scl-color-black);
--stroke-svg-high-contrast: var(--scl-color-white);
--width-button: 42px;
--padding-info: var(--scl-spacing-8);
--height-button: 56px;
--height-button-small: 40px;
--line-height-info: calc(var(--height-button) - 2px);
--line-height-info-small: calc(var(--height-button-small) - 2px);
}
.pagination {
display: inline-flex;
display: flex;
overflow: auto;
flex-wrap: wrap;
}
.pagination__info {
.pagination__info,
.pagination__info-responsive {
color: var(--color);
text-align: center;
font-size: var(--font-size);
line-height: 52px;
padding: 0 15px;
line-height: var(--line-height-info);
padding: 0 var(--padding-info);
border: var(--border);
flex-shrink: 0;
border-left: 0;
border-right: 0;
white-space: nowrap;
order: 1;
}
.pagination__info-responsive {
display: none;
}
.pagination--small .pagination__info,
.pagination--small .pagination__info-responsive {
line-height: var(--line-height-info-small);
}
.pagination__info span {
.pagination__info span,
.pagination__info-responsive span {
font-weight: bold;
}
button {
Expand All @@ -45,12 +69,15 @@ button {
align-items: center;
padding: 0;
margin: 0;
height: 54px;
width: 42px;
height: var(--height-button);
width: var(--width-button);
color: var(--color-button);
background: none;
border: var(--border-button);
}
.pagination--small button {
height: var(--height-button-small);
}
button:focus {
outline: none;
box-shadow: var(--box-shadow-focus);
Expand All @@ -62,6 +89,10 @@ button:focus {
.pagination__last-prompt {
border-radius: var(--radius-last-prompt);
margin-left: -1px;
order: 2;
}
.pagination__next-prompt {
order: 2;
}
button svg {
display: block;
Expand All @@ -79,11 +110,22 @@ button:not(:disabled):hover {
button:not(:disabled):hover svg {
stroke: var(--color-hover);
}
button:not(:disabled):active {
border-color: var(--color-active);
z-index: 1;
}
button:not(:disabled):active svg {
stroke: var(--color-active);
}

/* Hide Borders option */
.pagination--hide-borders .pagination__info {
.pagination--hide-borders .pagination__info,
.pagination--hide-borders .pagination__info-responsive {
border: 0;
}
.pagination--hide-borders .pagination__info-responsive {
border-bottom: var(--border);
}

.pagination--hide-borders button {
border-radius: 0;
Expand All @@ -93,6 +135,58 @@ button:not(:disabled):hover svg {

.pagination--hide-borders button:not(:disabled):hover {
/* Important to override external changes to hide side borders - i.e. in scale-data-grid */
border-width: 1px !important;
border-color: var(--color-hover) !important;
border-width: 1px;
border-color: var(--color-hover);
}

.pagination__button-wrapper {
display: flex;
}

@media screen and (forced-colors: active), (-ms-high-contrast: active) {
button:not(:disabled) svg {
stroke: var(--stroke-svg-high-contrast);
}
}

@media screen and (max-width: 639px) {
:host {
width: 100%;
}
.pagination {
flex-direction: column;
}
.pagination__info-responsive {
display: initial;
order: 0;
overflow: auto;
border-left: var(--border);
border-right: var(--border);
border-bottom: 0;
border-radius: var(--radius) var(--radius) 0 0;
line-height: var(--line-height-info-small);
}
.pagination__info {
display: none;
line-height: var(--line-height-info-small);
}
.pagination__first-prompt {
border-radius: var(--radius-first-prompt-stack);
}
.pagination__last-prompt {
border-radius: var(--radius-last-prompt-stack);
}
.pagination__next-prompt {
margin-left: -1px;
}
button {
flex: 1;
height: var(--height-button-small);
}
.pagination--hide-borders .pagination__first-prompt {
border-left-width: 0;
}
.pagination--hide-borders .pagination__last-prompt {
border-right-width: 0;
}
}
Loading

0 comments on commit 586e0a3

Please sign in to comment.