Improve pagination labels

public-ui · Feb 2, 2024 · 9ba518f · 9ba518f
1 parent 4368d80
commit 9ba518f
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 3 deletions.
diff --git a/packages/components/src/components/pagination/component.tsx b/packages/components/src/components/pagination/component.tsx
@@ -298,21 +298,29 @@ export class KolPagination implements PaginationAPI {
 					exportparts="icon"
 					key={`${this.nonce}-${page}`}
 					_customClass={this.state._customClass}
-					_label={`${page}`}
+					_label=""
 					_on={{
 						onClick: (event: Event) => {
 							this.onClick(event, page);
 						},
 					}}
-				></kol-button-wc>
+				>
+					<span slot="expert">
+						<span class="visually-hidden">{translate('kol-page')}</span> {page}
+					</span>
+				</kol-button-wc>
 			</li>
 		);
 	}
 
 	private getSelectedPageButton(page: number): JSX.Element {
 		return (
 			<li>
-				<kol-button-wc class="selected" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label={`${page}`} />
+				<kol-button-wc class="selected" key={`${this.nonce}-selected`} _customClass={this.state._customClass} _disabled={true} _label="">
+					<span slot="expert">
+						<span class="visually-hidden">{translate('kol-page')}</span> {page}
+					</span>
+				</kol-button-wc>
 			</li>
 		);
 	}

diff --git a/packages/components/src/locales/de.ts b/packages/components/src/locales/de.ts
@@ -19,6 +19,7 @@ export default {
 	'page-next': 'Eine Seite weiter',
 	'page-last': 'Direkt zur letzten Seite',
 	'entries-per-site': 'Einträge pro Seite',
+	page: 'Seite',
 	'page-current': 'Seite {{page}}',
 	'page-selected': 'Seite {{page}} ist ausgewählt',
 	'page-per-site': '{{entries}} Einträge pro Seite',

diff --git a/packages/components/src/locales/en.ts b/packages/components/src/locales/en.ts
@@ -19,6 +19,7 @@ export default {
 	'page-next': 'One page further',
 	'page-last': 'Directly to the last page',
 	'entries-per-site': 'Entries per page',
+	page: 'Page',
 	'page-current': 'Page {{page}}',
 	'page-selected': 'Page {{page}} is selected',
 	'page-per-site': '{{entries}} entries per page',