From fe663dbb31566b3e3c3b318c08487f6c1e6f8203 Mon Sep 17 00:00:00 2001
From: "Anna Yeddi (Kanterova)" <40773610+anna-yeddi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:43:19 -0400
Subject: [PATCH 1/2] Update PaginatedThemeSelector index.js to be more
 accessible

Updating a pagination markup
---
 src/web/lib/components/PaginatedThemeSelector/index.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/web/lib/components/PaginatedThemeSelector/index.js b/src/web/lib/components/PaginatedThemeSelector/index.js
index e26e9e90..8da8fc5a 100644
--- a/src/web/lib/components/PaginatedThemeSelector/index.js
+++ b/src/web/lib/components/PaginatedThemeSelector/index.js
@@ -76,7 +76,7 @@ export const PaginatedThemeSelector = ({
   });
 
   const footerPager = pageCount > 1 && (
-    <div className="page-selector">
+    <div className="page-selector" role="navigation" aria-label="pagination">
       <button
         className={classNames("previous", { disabled: prevDisabled })}
         disabled={prevDisabled}
@@ -92,7 +92,10 @@ export const PaginatedThemeSelector = ({
             "current-page": idx === currentPage
           })}
           onClick={() => setCurrentPage(idx)}
-          title={`Page ${idx + 1}`}
+          title={`Page ${idx + 1} of ${pageCount}`}
+          aria-current={
+            currentPage ? "page" : "false"
+          }
         />
       ))}
       <button

From 81def26ba979b4fce05ba9621b6954b2c44321fe Mon Sep 17 00:00:00 2001
From: "Anna Yeddi (Kanterova)" <40773610+anna-yeddi@users.noreply.github.com>
Date: Fri, 25 Oct 2024 13:47:09 -0400
Subject: [PATCH 2/2] Update PaginatedThemeSelector index.scss for better
 visibility of controls

Improve color contrast of the pagination
---
 src/web/lib/components/PaginatedThemeSelector/index.scss | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/web/lib/components/PaginatedThemeSelector/index.scss b/src/web/lib/components/PaginatedThemeSelector/index.scss
index 226b73f7..0b290600 100644
--- a/src/web/lib/components/PaginatedThemeSelector/index.scss
+++ b/src/web/lib/components/PaginatedThemeSelector/index.scss
@@ -35,7 +35,7 @@
     button.page {
       &::before {
         border-radius: 8px;
-        border: 2px solid var(--grey-40);
+        border: 2px solid var(--grey-50);
         box-sizing: border-box;
         content: "";
         height: 10px;
@@ -59,7 +59,6 @@
       background-position: center center;
       background-repeat: no-repeat;
       background-size: 10px 18px;
-      opacity: .7;
       transition: opacity 125ms;
 
       &:hover {