From eac4312030271c943f7a15ce0cbd71ff8f28444c Mon Sep 17 00:00:00 2001
From: Oleksii Kadurin <ovkadurin@gmail.com>
Date: Thu, 28 Nov 2024 09:40:43 +0100
Subject: [PATCH] fix: announce current page for pagination (#2419)

fix: announce current page for pagination
---
 .changeset/purple-paws-scream.md                 |  5 +++++
 .../components/pagination/src/LionPagination.js  |  1 +
 .../pagination/test/lion-pagination.test.js      | 16 ++++++++++++++++
 3 files changed, 22 insertions(+)
 create mode 100644 .changeset/purple-paws-scream.md

diff --git a/.changeset/purple-paws-scream.md b/.changeset/purple-paws-scream.md
new file mode 100644
index 000000000..d7311e1b9
--- /dev/null
+++ b/.changeset/purple-paws-scream.md
@@ -0,0 +1,5 @@
+---
+'@lion/ui': patch
+---
+
+[lion-pagination] announce current page
diff --git a/packages/ui/components/pagination/src/LionPagination.js b/packages/ui/components/pagination/src/LionPagination.js
index b20f9d989..31e8cc8fa 100644
--- a/packages/ui/components/pagination/src/LionPagination.js
+++ b/packages/ui/components/pagination/src/LionPagination.js
@@ -287,6 +287,7 @@ export class LionPagination extends LocalizeMixin(LitElement) {
               <button
                 aria-label="${this.msgLit('lion-pagination:page', { page })}"
                 aria-current=${page === this.current}
+                aria-live="${page === this.current ? 'polite' : 'off'}"
                 @click=${() => this.__fire(page)}
               >
                 ${page}
diff --git a/packages/ui/components/pagination/test/lion-pagination.test.js b/packages/ui/components/pagination/test/lion-pagination.test.js
index 92dfa8ec8..2b80860c2 100644
--- a/packages/ui/components/pagination/test/lion-pagination.test.js
+++ b/packages/ui/components/pagination/test/lion-pagination.test.js
@@ -105,6 +105,22 @@ describe('Pagination', () => {
       expect(el.current).to.equal(2);
     });
 
+    it('should announce next and previous page using `next()` and `previous()`', async () => {
+      const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
+      const buttons = Array.from(
+        /** @type {ShadowRoot} */ (el.shadowRoot).querySelectorAll('button'),
+      );
+      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
+      el.next();
+      await el.updateComplete;
+      expect(buttons[3].getAttribute('aria-live')).to.equal('polite');
+      expect(buttons[2].getAttribute('aria-live')).to.equal('off');
+      el.previous();
+      await el.updateComplete;
+      expect(buttons[3].getAttribute('aria-live')).to.equal('off');
+      expect(buttons[2].getAttribute('aria-live')).to.equal('polite');
+    });
+
     it('should goto next and previous page using `next()` and `previous()`', async () => {
       const el = await fixture(html` <lion-pagination count="6" current="2"></lion-pagination> `);
       el.next();