Skip to content

Commit 7df21b7

Browse files
jnptkjnptk
committed
add a11y complient pagination component
1 parent e0e1dca commit 7df21b7

9 files changed

Lines changed: 437 additions & 19 deletions

File tree

‎frontend/packages/volto-keywordmanager/locales/de/LC_MESSAGES/volto.po‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,31 @@ msgstr ""
8383
msgid "confirm-modal-title"
8484
msgstr "Stichwort(e) löschen"
8585

86+
#. Default: "Go to first page"
87+
#: components/Pagination
88+
msgid "goToFirstPage"
89+
msgstr "Zur ersten Seite gehen"
90+
91+
#. Default: "Go to last page"
92+
#: components/Pagination
93+
msgid "goToLastPage"
94+
msgstr "Zur letzten Seite gehen"
95+
96+
#. Default: "Go to next page"
97+
#: components/Pagination
98+
msgid "goToNext"
99+
msgstr "Zur nächsten Seite gehen"
100+
101+
#. Default: "Go to page {num}"
102+
#: components/Pagination
103+
msgid "goToPageNum"
104+
msgstr "Weiter zu Seite {num}"
105+
106+
#. Default: "Go to previous page"
107+
#: components/Pagination
108+
msgid "goToPrev"
109+
msgstr "Zur vorherigen Seite gehen"
110+
86111
#. Default: "Keyword field:"
87112
#: components/KeywordManager
88113
msgid "keyword-field"
@@ -106,6 +131,11 @@ msgstr ""
106131
msgid "loading"
107132
msgstr ""
108133

134+
#. Default: "Next page"
135+
#: components/Pagination
136+
msgid "nextPage"
137+
msgstr "Nächste Seite"
138+
109139
#. Default: "No content selected"
110140
#: components/KeywordView
111141
msgid "no-content-selected"
@@ -126,6 +156,16 @@ msgstr "{num} Inhalt(e) ausgewählt"
126156
msgid "number-keywords-selected"
127157
msgstr "{num} Stichwort(e) ausgewählt"
128158

159+
#. Default: "Page {num}"
160+
#: components/Pagination
161+
msgid "pageNum"
162+
msgstr "Seite {num}"
163+
164+
#. Default: "Previous page"
165+
#: components/Pagination
166+
msgid "prevPage"
167+
msgstr "Vorherige Seite"
168+
129169
#. Default: "You are about to rename {num} selected keyword(s). This action cannot be undone. Either select one of the existing keywords to keep or enter a new name to replace all selected keywords."
130170
#: components/RenameModal
131171
msgid "rename-modal-description"

‎frontend/packages/volto-keywordmanager/locales/en/LC_MESSAGES/volto.po‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,31 @@ msgstr ""
8383
msgid "confirm-modal-title"
8484
msgstr ""
8585

86+
#. Default: "Go to first page"
87+
#: components/Pagination
88+
msgid "goToFirstPage"
89+
msgstr ""
90+
91+
#. Default: "Go to last page"
92+
#: components/Pagination
93+
msgid "goToLastPage"
94+
msgstr ""
95+
96+
#. Default: "Go to next page"
97+
#: components/Pagination
98+
msgid "goToNext"
99+
msgstr ""
100+
101+
#. Default: "Go to page {num}"
102+
#: components/Pagination
103+
msgid "goToPageNum"
104+
msgstr ""
105+
106+
#. Default: "Go to previous page"
107+
#: components/Pagination
108+
msgid "goToPrev"
109+
msgstr ""
110+
86111
#. Default: "Keyword field:"
87112
#: components/KeywordManager
88113
msgid "keyword-field"
@@ -106,6 +131,11 @@ msgstr ""
106131
msgid "loading"
107132
msgstr ""
108133

134+
#. Default: "Next page"
135+
#: components/Pagination
136+
msgid "nextPage"
137+
msgstr ""
138+
109139
#. Default: "No content selected"
110140
#: components/KeywordView
111141
msgid "no-content-selected"
@@ -126,6 +156,16 @@ msgstr ""
126156
msgid "number-keywords-selected"
127157
msgstr ""
128158

159+
#. Default: "Page {num}"
160+
#: components/Pagination
161+
msgid "pageNum"
162+
msgstr ""
163+
164+
#. Default: "Previous page"
165+
#: components/Pagination
166+
msgid "prevPage"
167+
msgstr ""
168+
129169
#. Default: "You are about to rename {num} selected keyword(s). This action cannot be undone. Either select one of the existing keywords to keep or enter a new name to replace all selected keywords."
130170
#: components/RenameModal
131171
msgid "rename-modal-description"

‎frontend/packages/volto-keywordmanager/locales/es/LC_MESSAGES/volto.po‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,31 @@ msgstr ""
9090
msgid "confirm-modal-title"
9191
msgstr ""
9292

93+
#. Default: "Go to first page"
94+
#: components/Pagination
95+
msgid "goToFirstPage"
96+
msgstr ""
97+
98+
#. Default: "Go to last page"
99+
#: components/Pagination
100+
msgid "goToLastPage"
101+
msgstr ""
102+
103+
#. Default: "Go to next page"
104+
#: components/Pagination
105+
msgid "goToNext"
106+
msgstr ""
107+
108+
#. Default: "Go to page {num}"
109+
#: components/Pagination
110+
msgid "goToPageNum"
111+
msgstr ""
112+
113+
#. Default: "Go to previous page"
114+
#: components/Pagination
115+
msgid "goToPrev"
116+
msgstr ""
117+
93118
#. Default: "Keyword field:"
94119
#: components/KeywordManager
95120
msgid "keyword-field"
@@ -113,6 +138,11 @@ msgstr ""
113138
msgid "loading"
114139
msgstr ""
115140

141+
#. Default: "Next page"
142+
#: components/Pagination
143+
msgid "nextPage"
144+
msgstr ""
145+
116146
#. Default: "No content selected"
117147
#: components/KeywordView
118148
msgid "no-content-selected"
@@ -133,6 +163,16 @@ msgstr ""
133163
msgid "number-keywords-selected"
134164
msgstr ""
135165

166+
#. Default: "Page {num}"
167+
#: components/Pagination
168+
msgid "pageNum"
169+
msgstr ""
170+
171+
#. Default: "Previous page"
172+
#: components/Pagination
173+
msgid "prevPage"
174+
msgstr ""
175+
136176
#. Default: "You are about to rename {num} selected keyword(s). This action cannot be undone. Either select one of the existing keywords to keep or enter a new name to replace all selected keywords."
137177
#: components/RenameModal
138178
msgid "rename-modal-description"

‎frontend/packages/volto-keywordmanager/locales/pt_BR/LC_MESSAGES/volto.po‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,31 @@ msgstr ""
8888
msgid "confirm-modal-title"
8989
msgstr ""
9090

91+
#. Default: "Go to first page"
92+
#: components/Pagination
93+
msgid "goToFirstPage"
94+
msgstr ""
95+
96+
#. Default: "Go to last page"
97+
#: components/Pagination
98+
msgid "goToLastPage"
99+
msgstr ""
100+
101+
#. Default: "Go to next page"
102+
#: components/Pagination
103+
msgid "goToNext"
104+
msgstr ""
105+
106+
#. Default: "Go to page {num}"
107+
#: components/Pagination
108+
msgid "goToPageNum"
109+
msgstr ""
110+
111+
#. Default: "Go to previous page"
112+
#: components/Pagination
113+
msgid "goToPrev"
114+
msgstr ""
115+
91116
#. Default: "Keyword field:"
92117
#: components/KeywordManager
93118
msgid "keyword-field"
@@ -111,6 +136,11 @@ msgstr ""
111136
msgid "loading"
112137
msgstr ""
113138

139+
#. Default: "Next page"
140+
#: components/Pagination
141+
msgid "nextPage"
142+
msgstr ""
143+
114144
#. Default: "No content selected"
115145
#: components/KeywordView
116146
msgid "no-content-selected"
@@ -131,6 +161,16 @@ msgstr ""
131161
msgid "number-keywords-selected"
132162
msgstr ""
133163

164+
#. Default: "Page {num}"
165+
#: components/Pagination
166+
msgid "pageNum"
167+
msgstr ""
168+
169+
#. Default: "Previous page"
170+
#: components/Pagination
171+
msgid "prevPage"
172+
msgstr ""
173+
134174
#. Default: "You are about to rename {num} selected keyword(s). This action cannot be undone. Either select one of the existing keywords to keep or enter a new name to replace all selected keywords."
135175
#: components/RenameModal
136176
msgid "rename-modal-description"

‎frontend/packages/volto-keywordmanager/locales/volto.pot‎

Lines changed: 41 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
msgid ""
22
msgstr ""
33
"Project-Id-Version: Plone\n"
4-
"POT-Creation-Date: 2026-06-01T14:06:59.107Z\n"
4+
"POT-Creation-Date: 2026-06-11T12:33:39.911Z\n"
55
"Last-Translator: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
66
"Language-Team: Plone i18n <plone-i18n@lists.sourceforge.net>\n"
77
"Content-Type: text/plain; charset=utf-8\n"
@@ -85,6 +85,31 @@ msgstr ""
8585
msgid "confirm-modal-title"
8686
msgstr ""
8787

88+
#. Default: "Go to first page"
89+
#: components/Pagination
90+
msgid "goToFirstPage"
91+
msgstr ""
92+
93+
#. Default: "Go to last page"
94+
#: components/Pagination
95+
msgid "goToLastPage"
96+
msgstr ""
97+
98+
#. Default: "Go to next page"
99+
#: components/Pagination
100+
msgid "goToNext"
101+
msgstr ""
102+
103+
#. Default: "Go to page {num}"
104+
#: components/Pagination
105+
msgid "goToPageNum"
106+
msgstr ""
107+
108+
#. Default: "Go to previous page"
109+
#: components/Pagination
110+
msgid "goToPrev"
111+
msgstr ""
112+
88113
#. Default: "Keyword field:"
89114
#: components/KeywordManager
90115
msgid "keyword-field"
@@ -108,6 +133,11 @@ msgstr ""
108133
msgid "loading"
109134
msgstr ""
110135

136+
#. Default: "Next page"
137+
#: components/Pagination
138+
msgid "nextPage"
139+
msgstr ""
140+
111141
#. Default: "No content selected"
112142
#: components/KeywordView
113143
msgid "no-content-selected"
@@ -128,6 +158,16 @@ msgstr ""
128158
msgid "number-keywords-selected"
129159
msgstr ""
130160

161+
#. Default: "Page {num}"
162+
#: components/Pagination
163+
msgid "pageNum"
164+
msgstr ""
165+
166+
#. Default: "Previous page"
167+
#: components/Pagination
168+
msgid "prevPage"
169+
msgstr ""
170+
131171
#. Default: "You are about to rename {num} selected keyword(s). This action cannot be undone. Either select one of the existing keywords to keep or enter a new name to replace all selected keywords."
132172
#: components/RenameModal
133173
msgid "rename-modal-description"

‎frontend/packages/volto-keywordmanager/src/components/KeywordView.tsx‎

Lines changed: 10 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { Button, SearchField, Select, Spinner, Table } from '@plone/components';
22
import { searchContent } from '@plone/volto/actions/search/search';
33
import Toolbar from '@plone/volto/components/manage/Toolbar/Toolbar';
44
import Icon from '@plone/volto/components/theme/Icon/Icon';
5-
import Pagination from '@plone/volto/components/theme/Pagination/Pagination';
5+
import { Pagination } from './Pagination';
66
import { flattenToAppURL } from '@plone/volto/helpers/Url/Url';
77
import { useClient } from '@plone/volto/hooks';
88
import { useEffect, useMemo, useState } from 'react';
@@ -82,8 +82,9 @@ const KeywordView = (props) => {
8282
const selectionCount =
8383
selectedKeys === 'all' ? keywords.items?.length : selectedKeys?.size;
8484
// Pagination
85-
const [currentPage, setCurrentPage] = useState<number>(0);
86-
const [pageSize, setPageSize] = useState<number>(5);
85+
const [currentPage, setCurrentPage] = useState<number>(1);
86+
const pageSize = 5;
87+
const totalPages = Math.ceil(keywords?.total / pageSize);
8788
const [selectedTypes, setSelectedTypes] = useState<[]>([]);
8889
const [selectedStates, setSelectedStates] = useState<[]>([]);
8990
const [search, setSearch] = useState<string>('');
@@ -94,7 +95,7 @@ const KeywordView = (props) => {
9495
[keywordIndex]: [id],
9596
metadata_fields: keywordIndex,
9697
b_size: pageSize,
97-
b_start: currentPage * pageSize,
98+
b_start: (currentPage - 1) * pageSize,
9899
...(selectedTypes.length > 0 && { portal_type: selectedTypes }),
99100
...(selectedStates.length > 0 && { review_state: selectedStates }),
100101
...(search && { SearchableText: search }),
@@ -240,6 +241,7 @@ const KeywordView = (props) => {
240241
</div>
241242
{keywords?.loaded && keywords?.items.length > 0 ? (
242243
<Table
244+
id="keywords"
243245
className="react-aria-Table cmsui-table"
244246
columns={[
245247
{
@@ -291,17 +293,13 @@ const KeywordView = (props) => {
291293
)}
292294
{keywords?.total > pageSize && (
293295
<Pagination
294-
current={currentPage}
295-
total={Math.ceil(keywords?.total / pageSize)}
296-
pageSize={pageSize}
297-
onChangePage={(e, { value }) => {
296+
activePage={currentPage}
297+
totalPages={totalPages}
298+
onPageChange={(value) => {
298299
setCurrentPage(value);
299300
dispatch(searchContent('/', options, 'keywords'));
300301
}}
301-
onChangePageSize={(e, { value }) => {
302-
setPageSize(value);
303-
dispatch(searchContent('/', options, 'keywords'));
304-
}}
302+
ariaControls="keywords"
305303
/>
306304
)}
307305
{isClient &&

0 commit comments

Comments
 (0)