From f8c5f4f1cca524749437bc08a9c16165d05f8d95 Mon Sep 17 00:00:00 2001
From: Pablo Lara <larabjj@gmail.com>
Date: Mon, 30 Sep 2024 16:54:33 +0200
Subject: [PATCH] chore: Add aria-label to buttons for improved accessibility

---
 components/filters/filter-controls.tsx                  | 1 +
 components/providers/add-provider.tsx                   | 1 +
 components/providers/forms/AddForm.tsx                  | 2 ++
 components/providers/forms/DeleteForm.tsx               | 2 ++
 components/providers/forms/EditForm.tsx                 | 2 ++
 components/providers/table/data-table-filter-custom.tsx | 1 +
 components/ui/custom/CustomButton.tsx                   | 3 +++
 7 files changed, 12 insertions(+)

diff --git a/components/filters/filter-controls.tsx b/components/filters/filter-controls.tsx
index 12e2cca17c..5f185a6629 100644
--- a/components/filters/filter-controls.tsx
+++ b/components/filters/filter-controls.tsx
@@ -57,6 +57,7 @@ export const FilterControls: React.FC<FilterControlsProps> = ({
 
         {showClearButton && (
           <CustomButton
+            ariaLabel="Reset"
             className="w-fit"
             onPress={clearAllFilters}
             variant="dashed"
diff --git a/components/providers/add-provider.tsx b/components/providers/add-provider.tsx
index b884fa5292..2461fd86f7 100644
--- a/components/providers/add-provider.tsx
+++ b/components/providers/add-provider.tsx
@@ -24,6 +24,7 @@ export const AddProvider = () => {
 
       <div className="w-full flex items-center justify-end">
         <CustomButton
+          ariaLabel="Add Account"
           variant="solid"
           color="action"
           size="md"
diff --git a/components/providers/forms/AddForm.tsx b/components/providers/forms/AddForm.tsx
index be508dca0b..c9af93d286 100644
--- a/components/providers/forms/AddForm.tsx
+++ b/components/providers/forms/AddForm.tsx
@@ -94,6 +94,7 @@ export const AddForm = ({
         <div className="w-full flex justify-center sm:space-x-6">
           <CustomButton
             type="button"
+            ariaLabel="Cancel"
             className="w-full bg-transparent"
             variant="faded"
             size="lg"
@@ -106,6 +107,7 @@ export const AddForm = ({
 
           <CustomButton
             type="submit"
+            ariaLabel="Confirm"
             className="w-full"
             variant="solid"
             color="action"
diff --git a/components/providers/forms/DeleteForm.tsx b/components/providers/forms/DeleteForm.tsx
index ec478fe690..0e614f7a91 100644
--- a/components/providers/forms/DeleteForm.tsx
+++ b/components/providers/forms/DeleteForm.tsx
@@ -57,6 +57,7 @@ export const DeleteForm = ({
         <div className="w-full flex justify-center sm:space-x-6">
           <CustomButton
             type="button"
+            ariaLabel="Cancel"
             className="w-full bg-transparent"
             variant="faded"
             size="lg"
@@ -69,6 +70,7 @@ export const DeleteForm = ({
 
           <CustomButton
             type="submit"
+            ariaLabel="Delete"
             className="w-full"
             variant="solid"
             color="danger"
diff --git a/components/providers/forms/EditForm.tsx b/components/providers/forms/EditForm.tsx
index c8581caccc..75282abb01 100644
--- a/components/providers/forms/EditForm.tsx
+++ b/components/providers/forms/EditForm.tsx
@@ -89,6 +89,7 @@ export const EditForm = ({
         <div className="w-full flex justify-center sm:space-x-6">
           <CustomButton
             type="button"
+            ariaLabel="Cancel"
             className="w-full bg-transparent"
             variant="faded"
             size="lg"
@@ -101,6 +102,7 @@ export const EditForm = ({
 
           <CustomButton
             type="submit"
+            ariaLabel="Save"
             className="w-full"
             variant="solid"
             color="action"
diff --git a/components/providers/table/data-table-filter-custom.tsx b/components/providers/table/data-table-filter-custom.tsx
index cd3d568571..afb0b3f4ef 100644
--- a/components/providers/table/data-table-filter-custom.tsx
+++ b/components/providers/table/data-table-filter-custom.tsx
@@ -39,6 +39,7 @@ export const DataTableFilterCustom = ({
   return (
     <div className="flex flex-row items-center gap-4">
       <CustomButton
+        ariaLabel={showFilters ? "Hide Filters" : "Show Filters"}
         variant="flat"
         color={showFilters ? "action" : "primary"}
         size="sm"
diff --git a/components/ui/custom/CustomButton.tsx b/components/ui/custom/CustomButton.tsx
index 9aa3b4a888..b4a1fec5fd 100644
--- a/components/ui/custom/CustomButton.tsx
+++ b/components/ui/custom/CustomButton.tsx
@@ -18,6 +18,7 @@ export const buttonClasses = {
 
 interface ButtonProps {
   type?: "button" | "submit" | "reset";
+  ariaLabel: string;
   className?: string;
   variant?:
     | "solid"
@@ -50,6 +51,7 @@ interface ButtonProps {
 
 export const CustomButton = ({
   type = "button",
+  ariaLabel,
   className,
   variant = "solid",
   color = "primary",
@@ -66,6 +68,7 @@ export const CustomButton = ({
 }: ButtonProps) => (
   <Button
     type={type}
+    aria-label={ariaLabel}
     onPress={onPress}
     variant={variant as NextUIVariants}
     color={color as NextUIColors}