continue to run accessibilities

Enterprise-CMCS · Nov 2, 2023 · d0cc80f · d0cc80f
1 parent eacf710
commit d0cc80f
Showing 1 changed file with 7 additions and 1 deletion.
diff --git a/src/services/ui/src/components/Pagination/index.tsx b/src/services/ui/src/components/Pagination/index.tsx
@@ -23,9 +23,10 @@ export const Pagination: FC<Props> = (props) => {
       </div>
       <div className="hidden sm:flex sm:flex-1 sm:items-center sm:justify-between">
         <div className="flex gap-6">
-          <p className="flex gap-2 text-sm text-gray-700">
+          <p className="flex gap-2 text-sm text-gray-700" id="recordsLabel">
             Records per page:
             <select
+              aria-labelledby="recordsLabel"
               className="font-bold cursor-pointer border-[1px] mt-[-1px]"
               value={props.pageSize}
               onChange={(e) => props.onSizeChange?.(Number(e.target.value))}
@@ -74,13 +75,18 @@ export const Pagination: FC<Props> = (props) => {
                   <button
                     key={`PAGE-${PAGE}`}
                     className="relative inline-flex items-center px-4 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 focus:outline-offset-0 cursor-pointer"
+                    id="morePagesButton"
+                    aria-haspopup="listbox"
+                    aria-controls="pagesDropdown"
                   >
                     ...
                     <select
                       onChange={(v) =>
                         props.onPageChange(Number(v.currentTarget.value) - 1)
                       }
                       className="absolute w-auto h-auto opacity-0 cursor-pointer"
+                      aria-labelledby="morePagesButton"
+                      id="pagesDropdown"
                     >
                       {PAGE.map((P) => (
                         <option key={`child-page-${P}`} value={P}>