Merge pull request #1521 from rockingrohit9639/feat/improve-accessibi…

…lity Feat/improve accessibility
Shelf-nu · Dec 17, 2024 · b13eaab · b13eaab
2 parents a0763bc + 9da9f13
commit b13eaab
Show file tree

Hide file tree

Showing 19 changed files with 62 additions and 33 deletions.
diff --git a/app/components/booking/asset-row-actions-dropdown.tsx b/app/components/booking/asset-row-actions-dropdown.tsx
@@ -18,6 +18,7 @@ export const AssetRowActionsDropdown = ({ asset, fullWidth }: Props) => (
   <DropdownMenu modal={false}>
     <DropdownMenuTrigger
       className={tw("asset-actions", fullWidth ? "w-full" : "")}
+      aria-label="Actions Trigger"
     >
       <span className="flex size-6 items-center justify-center gap-2 text-center">
         <VerticalDotsIcon />

diff --git a/app/components/booking/booking-assets-column.tsx b/app/components/booking/booking-assets-column.tsx
@@ -211,6 +211,7 @@ export function BookingAssetsColumn() {
                                   onClick={() => toggleKitExpansion(kit.id)}
                                   variant="link"
                                   className="text-center font-bold text-gray-600 hover:text-gray-900"
+                                  aria-label="Toggle kit expand"
                                 >
                                   <ChevronDownIcon
                                     className={tw(

diff --git a/app/components/booking/kit-row-actions-dropdown.tsx b/app/components/booking/kit-row-actions-dropdown.tsx
@@ -32,6 +32,7 @@ export default function KitRowActionsDropdown({
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
         className={tw("asset-actions", fullWidth ? "w-full" : "")}
+        aria-label="Actions Trigger"
       >
         <span className="flex size-6 items-center justify-center gap-2 text-center">
           <VerticalDotsIcon />

diff --git a/app/components/booking/status-filter.tsx b/app/components/booking/status-filter.tsx
@@ -45,8 +45,11 @@ export function StatusFilter({
         onValueChange={handleValueChange}
         disabled={disabled}
       >
-        <SelectTrigger className="mt-2 px-3.5 py-2 text-left text-base text-gray-500 md:mt-0 md:max-w-fit">
-          <SelectValue placeholder={`Filter by status`} />
+        <SelectTrigger
+          aria-label="Filter by status"
+          className="mt-2 px-3.5 py-2 text-left text-base text-gray-500 md:mt-0 md:max-w-fit"
+        >
+          <SelectValue placeholder="Filter by status" />
         </SelectTrigger>
         <SelectContent
           position="popper"

diff --git a/app/components/custom-fields/actions-dropdown.tsx b/app/components/custom-fields/actions-dropdown.tsx
@@ -11,7 +11,10 @@ import { Button } from "../shared/button";
 export function ActionsDropdown({ customField }: { customField: CustomField }) {
   return (
     <DropdownMenu modal={false}>
-      <DropdownMenuTrigger className="outline-none focus-visible:border-0">
+      <DropdownMenuTrigger
+        className="outline-none focus-visible:border-0"
+        aria-label="Actions Trigger"
+      >
         <i className="inline-block px-3 py-0 text-gray-400 ">
           <VerticalDotsIcon />
         </i>

diff --git a/app/components/dynamic-dropdown/dynamic-dropdown.tsx b/app/components/dynamic-dropdown/dynamic-dropdown.tsx
@@ -106,14 +106,14 @@ export default function DynamicDropdown({
           )}
           asChild
         >
-          <div>
+          <button>
             {cloneElement(trigger)}
             <When truthy={selectedItems.length > 0 && !hideCounter}>
               <div className="flex size-6 items-center justify-center rounded-full bg-primary-50 px-2 py-[2px] text-xs font-medium text-primary-700">
                 {selectedItems.length}
               </div>
             </When>
-          </div>
+          </button>
         </PopoverTrigger>
         <PopoverPortal>
           <PopoverContent

diff --git a/app/components/forms/input.tsx b/app/components/forms/input.tsx
@@ -101,6 +101,7 @@ const Input = forwardRef(function Input(
   let input = (
     <input
       {...inputProps}
+      aria-label={label}
       ref={ref as RefObject<HTMLInputElement> | undefined}
     />
   );
@@ -112,12 +113,16 @@ const Input = forwardRef(function Input(
         maxLength={rest.maxLength || 250}
         rows={rest.rows || 8}
         ref={ref as RefObject<HTMLTextAreaElement> | undefined}
+        aria-label={label}
       />
     );
   }
 
   return (
-    <label className={tw("relative flex flex-col", className)}>
+    <label
+      className={tw("relative flex flex-col", className)}
+      htmlFor={inputProps.name}
+    >
       {/* Label */}
       <InnerLabel hideLg={hideLabel} required={required}>
         {label}

diff --git a/app/components/kits/actions-dropdown.tsx b/app/components/kits/actions-dropdown.tsx
@@ -100,7 +100,7 @@ function ConditionalActionsDropdown({ fullWidth }: { fullWidth?: boolean }) {
           onClick={() => setOpen(!open)}
           asChild
         >
-          <Button variant="secondary">
+          <Button variant="secondary" aria-label="Actions Trigger">
             <span className="flex items-center gap-2">
               Actions <ChevronRight className="chev" />
             </span>
@@ -113,6 +113,7 @@ function ConditionalActionsDropdown({ fullWidth }: { fullWidth?: boolean }) {
           className="actions-dropdown sm:hidden"
           width="full"
           onClick={() => setOpen(true)}
+          aria-label="Actions Trigger"
         >
           <span className="flex items-center gap-2">
             Actions <ChevronRight className="chev" />
@@ -158,6 +159,7 @@ function ConditionalActionsDropdown({ fullWidth }: { fullWidth?: boolean }) {
                     width="full"
                     onClick={() => setOpen(false)}
                     disabled={disableReleaseForSelfService}
+                    aria-label="Release Custody"
                   >
                     <span className="flex items-center gap-1">
                       <Icon icon="release-custody" /> Release custody
@@ -168,12 +170,11 @@ function ConditionalActionsDropdown({ fullWidth }: { fullWidth?: boolean }) {
                     to="assign-custody"
                     role="link"
                     variant="link"
-                    className={tw(
-                      "justify-start px-4 py-3  text-gray-700 hover:text-gray-700"
-                    )}
+                    className="justify-start px-4 py-3 text-gray-700 hover:text-gray-700"
                     width="full"
                     onClick={() => setOpen(false)}
                     disabled={someAssetIsNotAvailable}
+                    aria-label="Assign/Take Custody"
                   >
                     <span className="flex items-center gap-2">
                       <Icon icon="assign-custody" />{" "}

diff --git a/app/components/kits/asset-row-actions-dropdown.tsx b/app/components/kits/asset-row-actions-dropdown.tsx
@@ -20,6 +20,7 @@ export default function AssetRowActionsDropdown({
   return (
     <DropdownMenu modal={false}>
       <DropdownMenuTrigger
+        aria-label="Actions Trigger"
         className={tw("asset-actions", fullWidth ? "w-full" : "")}
       >
         <span className="flex items-center gap-2">

diff --git a/app/components/layout/sidebar/sidebar-nav.tsx b/app/components/layout/sidebar/sidebar-nav.tsx
@@ -68,13 +68,14 @@ export default function SidebarNav({
         case "label": {
           return (
             <SidebarGroupLabel
+              asChild
               className={
                 navItem.title.toLowerCase() === "organization"
                   ? "mt-4"
                   : undefined
               }
             >
-              {navItem.title}
+              <li>{navItem.title}</li>
             </SidebarGroupLabel>
           );
         }

diff --git a/app/components/layout/sidebar/sidebar.tsx b/app/components/layout/sidebar/sidebar.tsx
@@ -447,7 +447,7 @@ const SidebarGroupLabel = forwardRef<
       ref={ref}
       data-sidebar="group-label"
       className={tw(
-        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-sidebar-foreground/70 outline-none ring-primary-500 transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-semibold text-sidebar-foreground/75 outline-none ring-primary-500 transition-[margin,opa] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
         "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
         className
       )}

diff --git a/app/components/list/filters/sort-by.tsx b/app/components/list/filters/sort-by.tsx
@@ -41,13 +41,13 @@ export function SortBy() {
         className="inline-flex items-center gap-2 text-gray-500"
         asChild
       >
-        <div className="flex items-center justify-between whitespace-nowrap rounded border border-gray-300 px-[14px] py-[10px] text-[16px] text-gray-500 hover:cursor-pointer disabled:opacity-50">
+        <button className="flex items-center justify-between whitespace-nowrap rounded border border-gray-300 px-[14px] py-[10px] text-[16px] text-gray-500 hover:cursor-pointer disabled:opacity-50">
           <span className="truncate whitespace-nowrap text-[14px]">
             {/* We only show the message if orderBy is present in params so in the default case we dont show it */}
             Sorted by: {sortingOptions[orderBy]}
           </span>
           <CaretSortIcon />
-        </div>
+        </button>
       </PopoverTrigger>
       <PopoverPortal>
         <PopoverContent

diff --git a/app/components/list/pagination/index.tsx b/app/components/list/pagination/index.tsx
@@ -33,9 +33,8 @@ export const Pagination = ({ className }: { className?: string }) => {
           size="sm"
           onClick={() => goToPage(1)}
           disabled={prevDisabled}
-          className={tw(
-            "rounded-none border-y-0 border-l-0 border-r border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
-          )}
+          className="rounded-none border-y-0 border-l-0 border-r border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
+          aria-label="Go to page 1"
         >
           <ChevronLeftDoubleIcon />
         </Button>
@@ -45,9 +44,8 @@ export const Pagination = ({ className }: { className?: string }) => {
           size="sm"
           onClick={() => goToPage(page - 1)}
           disabled={prevDisabled}
-          className={tw(
-            "h-8 w-10 rotate-180 rounded-none border-y-0 border-l border-r-0 border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
-          )}
+          className="h-8 w-10 rotate-180 rounded-none border-y-0 border-l border-r-0 border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
+          aria-label="Go to previous page"
         >
           <ChevronRight />
         </Button>
@@ -72,9 +70,8 @@ export const Pagination = ({ className }: { className?: string }) => {
           size="sm"
           onClick={() => goToPage(page + 1)}
           disabled={nextDisabled}
-          className={tw(
-            "h-8 w-10 rounded-none border-y-0 border-l border-r-0 border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
-          )}
+          className="h-8 w-10 rounded-none border-y-0 border-l border-r-0 border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
+          aria-label="Go to next page"
         >
           <ChevronRight />
         </Button>
@@ -84,16 +81,15 @@ export const Pagination = ({ className }: { className?: string }) => {
           size="sm"
           onClick={() => goToPage(totalPages)}
           disabled={nextDisabled}
-          className={tw(
-            "rotate-180 rounded-none border-y-0 border-l-0 border-r border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
-          )}
+          className="rotate-180 rounded-none border-y-0 border-l-0 border-r border-gray-300 bg-transparent px-3 py-[4px] hover:bg-transparent"
+          aria-label="Go to last page"
         >
           <ChevronLeftDoubleIcon />
         </Button>
       </div>
       <div className="flex items-center gap-2">
         <PerPageItemsSelect />
-        <p className="hidden text-[14px] font-medium text-gray-400 lg:block">
+        <p className="hidden text-[14px] font-medium text-gray-500 lg:block">
           <span className="capitalize">{modelName.plural}</span> per page
         </p>
       </div>

diff --git a/app/components/list/pagination/per-page-items-select.tsx b/app/components/list/pagination/per-page-items-select.tsx
@@ -33,7 +33,10 @@ export default function PerPageItemsSelect() {
         defaultValue={perPage.toString()}
         onValueChange={onValueChange}
       >
-        <SelectTrigger className="h-[34px] px-3 py-[5.5px] text-[14px]">
+        <SelectTrigger
+          aria-label="Select per page"
+          className="h-[34px] px-3 py-[5.5px] text-[14px]"
+        >
           <SelectValue />
         </SelectTrigger>
         <SelectContent className="w-[250px]" position="popper" align="start">

diff --git a/app/components/workspace/edit-form.tsx b/app/components/workspace/edit-form.tsx
@@ -149,7 +149,10 @@ export const WorkspaceEditForm = ({
               disabled={disabled}
               name={zo.fields.currency()}
             >
-              <SelectTrigger className="px-3.5 py-3">
+              <SelectTrigger
+                className="px-3.5 py-3"
+                aria-label="Select currency"
+              >
                 <SelectValue placeholder="Choose a field type" />
               </SelectTrigger>
               <SelectContent

diff --git a/app/components/workspace/nrm-actions-dropdown.tsx b/app/components/workspace/nrm-actions-dropdown.tsx
@@ -36,7 +36,10 @@ export function TeamMembersActionsDropdown({
       onOpenChange={(open) => setOpen(open)}
       open={open}
     >
-      <DropdownMenuTrigger className="outline-none focus-visible:border-0">
+      <DropdownMenuTrigger
+        className="outline-none focus-visible:border-0"
+        aria-label="Actions Trigger"
+      >
         <i className="inline-block px-3 py-0 text-gray-400 ">
           <VerticalDotsIcon />
         </i>

diff --git a/app/components/workspace/users-actions-dropdown.tsx b/app/components/workspace/users-actions-dropdown.tsx
@@ -57,7 +57,12 @@ export function TeamUsersActionsDropdown({
           {customTrigger ? (
             customTrigger(disabled)
           ) : (
-            <Button variant="tertiary" width="full" className="border-0 pr-0">
+            <Button
+              variant="tertiary"
+              width="full"
+              className="border-0 pr-0"
+              aria-label="Actions Trigger"
+            >
               {disabled ? <Spinner className="size-4" /> : <VerticalDotsIcon />}
             </Button>
           )}

diff --git a/app/routes/_layout+/assets._index.tsx b/app/routes/_layout+/assets._index.tsx
@@ -436,8 +436,8 @@ const ListAssetContent = ({ item }: { item: AssetsFromViewItem }) => {
             {category.name}
           </Badge>
         ) : (
-          <Badge color={"#808080"} withDot={false}>
-            {"Uncategorized"}
+          <Badge color="#575757" withDot={false}>
+            Uncategorized
           </Badge>
         )}
       </Td>

diff --git a/app/routes/_layout+/calendar.tsx b/app/routes/_layout+/calendar.tsx
@@ -274,6 +274,7 @@ export default function Calendar() {
                   variant="secondary"
                   className="border-r p-[0.75em] text-gray-500"
                   onClick={() => handleNavigation("prev")}
+                  aria-label="Previous month"
                 >
                   <ChevronLeftIcon />
                 </Button>
@@ -288,6 +289,7 @@ export default function Calendar() {
                   variant="secondary"
                   className="p-[0.75em] text-gray-500"
                   onClick={() => handleNavigation("next")}
+                  aria-label="Next month"
                 >
                   <ChevronRightIcon />
                 </Button>