Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Refactor/pagination a11y #516

Merged
merged 37 commits into from
Aug 27, 2021
Merged

Refactor/pagination a11y #516

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
37 commits
Select commit Hold shift + click to select a range
5fe96e5
fix: index.html
Jul 27, 2021
8755949
refactor: add media query for high contrast; adaptions for accessibi…
Jul 28, 2021
02b6e1b
feat: auto overflow for mobile devices
Jul 29, 2021
f9a1fa5
fix: adapt index.html
Jul 29, 2021
9474235
fix: adapt index.html
Jul 29, 2021
11b91d9
style: use css token for padding
Jul 29, 2021
bb35d47
feat: introduce media-query
ChrisPaj Aug 6, 2021
3333966
style: css for breakpoint small
ChrisPaj Aug 6, 2021
b0dfa62
feat: add prop 'small'
ChrisPaj Aug 9, 2021
57d749d
style: adapt line-heights for small and normal size
ChrisPaj Aug 9, 2021
c90d22b
fix: css issues due to specifity
ChrisPaj Aug 9, 2021
1c23542
style: avoid double border between prev and next buttons
ChrisPaj Aug 9, 2021
dcbe72f
style: outline at :focus fully visible
ChrisPaj Aug 9, 2021
c7b94db
refactor: adapt font size
ChrisPaj Aug 10, 2021
dfa5b8e
style: stretch host to 100% im media query;
ChrisPaj Aug 10, 2021
ef4c292
style: nested host has width of 100% in media query
ChrisPaj Aug 10, 2021
75f1988
refactor: stories, button:active; build
ChrisPaj Aug 10, 2021
92dd054
test: adapt snapshot; format; lint;
ChrisPaj Aug 10, 2021
4e843f5
Merge branch 'main' into refactor/pagination-a11y
ChrisPaj Aug 10, 2021
74aaa21
feat: adapt icon size, height, border
ChrisPaj Aug 11, 2021
4d3ef7d
fix: line height of .info-responsive
ChrisPaj Aug 11, 2021
24194ea
fix: refix line-height
ChrisPaj Aug 11, 2021
a9dda64
refactor: css; use more variables
ChrisPaj Aug 11, 2021
50bced5
feat: provide translation for aria-label
ChrisPaj Aug 11, 2021
b932c6f
fix: clear index.html
ChrisPaj Aug 11, 2021
7f09011
refactor: snapshots, lint, format
ChrisPaj Aug 11, 2021
422f7d1
fix: adapt snapshots
ChrisPaj Aug 11, 2021
dee4a30
refactor: rename aria label props
ChrisPaj Aug 11, 2021
9345172
fix: build
ChrisPaj Aug 11, 2021
559534c
fix: make pagination on _mobile_ always _small_
acstll Aug 13, 2021
6509942
fix(pagination): adjust icon size
acstll Aug 13, 2021
f729249
test: update snapshots
acstll Aug 13, 2021
30f8063
Merge branch 'main' into refactor/pagination-a11y
Aug 13, 2021
d693d5c
Merge branch 'main' into refactor/pagination-a11y
Aug 27, 2021
1110529
fix: update visual snapshots
ChrisPaj Aug 27, 2021
2902ee2
fix: adapt visual tests
ChrisPaj Aug 27, 2021
6f5a5bd
Merge branch 'main' into refactor/pagination-a11y
Aug 27, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 29 additions & 21 deletions packages/components/src/components/pagination/__snapshots__/pagination.spec.ts.snap
View file
Open in desktop
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
Open in desktop
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