chore: Add aria-label to buttons for improved accessibility

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"

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"

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"

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"

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"

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"

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}