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

Jump to bottom

Keyboard Accessibility Pagination Component #963

Merged
merged 18 commits into from
Feb 3, 2022
Merged

Keyboard Accessibility Pagination Component #963

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
a7a2bfe
Allow ARIA prop to be passed to component
mr-gabe49 Jan 13, 2022
95aa0ba
Change span elements to button
mr-gabe49 Jan 14, 2022
56cf3ac
Merge branch 'master' of https://github.com/centerofci/mathesar into …
mr-gabe49 Jan 18, 2022
a66c1b5
Implement CSS changes and other styles
mr-gabe49 Jan 19, 2022
63b2897
Fix lint errors
mr-gabe49 Jan 19, 2022
481e345
Fix merge conflicts
mr-gabe49 Jan 19, 2022
9f55a1e
Delete Tab
mr-gabe49 Jan 19, 2022
930225e
Preventdefault on mousedown
mr-gabe49 Jan 20, 2022
ae94c17
Prettier changes
mr-gabe49 Jan 20, 2022
3684f61
Merge branch 'master' into keyboard_pagination292
mr-gabe49 Jan 20, 2022
ec2e0d6
Merge branch 'master' into keyboard_pagination292
pavish Feb 2, 2022
08b78d2
Merge branch 'master' into keyboard_pagination292
mr-gabe49 Feb 2, 2022
40ed5eb
Remove unnecessary active class
mr-gabe49 Feb 2, 2022
9876ee8
Merge branch 'keyboard_pagination292' of https://github.com/centerofc…
mr-gabe49 Feb 2, 2022
abc5cce
Eliminate tabindex and on events on icon component
mr-gabe49 Feb 2, 2022
84794a4
Add outline instead of changing border color
mr-gabe49 Feb 2, 2022
9cb4ece
Remove prevent default behavior
mr-gabe49 Feb 2, 2022
2bf712a
Merge branch 'master' into keyboard_pagination292
pavish Feb 3, 2022
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
22 changes: 20 additions & 2 deletions mathesar_ui/src/component-library/pagination/Pagination.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,27 @@ ul.pagination {
margin: 0 2px;

a,
span {
button {
padding: 5px 3px;
min-width: 26px;
display: inline-block;
text-align: center;
cursor: pointer;

&:hover {
background-color: #aeb9be21;
}

&:disabled {
color: #ccc;
background-color: inherit;
cursor: not-allowed;
}
}

button:focus {
border: 1.4px solid #39a0f5;
color: #39a0f5;
}

.page {
Expand All @@ -25,7 +40,10 @@ ul.pagination {
background: #fff;
}

span {
button {
border: none;
background: inherit;

.ellipsis {
color: #afafaf;
}
Expand Down
44 changes: 26 additions & 18 deletions mathesar_ui/src/component-library/pagination/Pagination.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@
// Total number of pages.
export let pageCount = 0;

// ARIA Label for component
export let ariaLabel = 'Pagination';

$: pageCount = Math.ceil(total / pageSize);
$: pageInfo = calculatePages(currentPage, pageCount);

Expand All @@ -45,18 +48,19 @@
}
</script>

<nav role="navigation" aria-label="Pagination Navigation">
<nav role="navigation" aria-label={ariaLabel}>
<ul class="pagination">
{#if pageCount > 1}
<li>
<span
<button
tabindex="0"
role="link"
aria-label="Previous"
on:click={(e) => setPage(e, currentPage - 1)}
disabled={currentPage === 1}
>
<Icon data={faAngleLeft} />
</span>
<Icon data={faAngleLeft} tabindex="-1" />
</button>
</li>
{/if}

Expand All @@ -74,28 +78,28 @@
1
</a>
{:else}
<span
<button
tabindex="0"
role="link"
aria-label="Goto Page 1"
class="page"
on:click={(e) => setPage(e, 1)}
>
1
</span>
</button>
{/if}
</li>
{#if pageInfo.start > 2}
<li>
<span
<button
tabindex="0"
role="link"
aria-label="Goto Page {pageInfo.prevPageWindow}"
on:click={(e) => setPage(e, pageInfo.prevPageWindow)}
>
<Icon class="ellipsis" data={faEllipsisH} />
<Icon class="ellipsis" tabindex="-1" data={faEllipsisH} />
pavish marked this conversation as resolved.
Show resolved Hide resolved
<Icon class="arrow" data={faAngleDoubleLeft} />
</span>
</button>
</li>
{/if}
{/if}
Expand All @@ -112,39 +116,41 @@
: `Goto Page ${_page}`}
aria-selected={currentPage === _page}
on:click={(e) => setPage(e, _page)}
on:mousedown={(e) => e.preventDefault()}
pavish marked this conversation as resolved.
Show resolved Hide resolved
data-tinro-ignore
>
{_page}
</a>
{:else}
<span
<button
tabindex="0"
role="link"
aria-label={currentPage === _page
? `Current Page, Page ${currentPage}`
: `Goto Page ${_page}`}
class="page"
on:click={(e) => setPage(e, _page)}
on:mousedown={(e) => e.preventDefault()}
aria-selected={currentPage === _page}
>
{_page}
</span>
</button>
{/if}
</li>
{/each}

{#if pageInfo.end < pageCount}
{#if pageInfo.end < pageCount - 1}
<li>
<span
<button
tabindex="0"
role="link"
aria-label="Goto Page {pageInfo.nextPageWindow}"
on:click={(e) => setPage(e, pageInfo.nextPageWindow)}
>
<Icon class="ellipsis" data={faEllipsisH} />
<Icon class="ellipsis" tabindex="-1" data={faEllipsisH} />
<Icon class="arrow" data={faAngleDoubleRight} />
</span>
</button>
</li>
{/if}
<li class:active={currentPage === pageInfo.end}>
pavish marked this conversation as resolved.
Show resolved Hide resolved
Expand All @@ -160,28 +166,30 @@
{pageCount}
</a>
{:else}
<span
<button
tabindex="0"
class="page"
role="link"
aria-label="Goto Page {pageCount}"
on:click={(e) => setPage(e, pageCount)}
>
{pageCount}
</span>
</button>
{/if}
</li>
{/if}

{#if pageCount > 1}
<li>
<span
<button
tabindex="0"
role="link"
aria-label="Next"
on:click={(e) => setPage(e, currentPage + 1)}
disabled={currentPage === pageCount}
>
<Icon data={faAngleRight} />
</span>
</button>
</li>
{/if}
</ul>
Expand Down