Accessibility features (#14518)

* Add screen reader aria labels to buttons and menu items * Fix sub_label score in search detail dialog
blakeblackshear · Oct 22, 2024 · ad30825 · ad30825
1 parent c7d9f83
commit ad30825
Show file tree

Hide file tree

Showing 61 changed files with 358 additions and 115 deletions.
diff --git a/web/src/components/auth/AuthForm.tsx b/web/src/components/auth/AuthForm.tsx
@@ -121,6 +121,7 @@ export function UserAuthForm({ className, ...props }: UserAuthFormProps) {
               variant="select"
               disabled={isLoading}
               className="flex flex-1"
+              aria-label="Login"
             >
               {isLoading && <ActivityIndicator className="mr-2 h-4 w-4" />}
               Login

diff --git a/web/src/components/button/DownloadVideoButton.tsx b/web/src/components/button/DownloadVideoButton.tsx
@@ -46,6 +46,7 @@ export function DownloadVideoButton({
         disabled={isDownloading}
         className="flex items-center gap-2"
         size="sm"
+        aria-label="Download Video"
       >
         <a
           href={source}

diff --git a/web/src/components/camera/DebugCameraImage.tsx b/web/src/components/camera/DebugCameraImage.tsx
@@ -55,7 +55,12 @@ export default function DebugCameraImage({
         searchParams={searchParams}
         cameraClasses="relative w-full h-full flex justify-center"
       />
-      <Button onClick={handleToggleSettings} variant="link" size="sm">
+      <Button
+        onClick={handleToggleSettings}
+        variant="link"
+        size="sm"
+        aria-label="Settings"
+      >
         <span className="h-5 w-5">
           <LuSettings />
         </span>{" "}

diff --git a/web/src/components/card/AnimatedEventCard.tsx b/web/src/components/card/AnimatedEventCard.tsx
@@ -121,6 +121,7 @@ export function AnimatedEventCard({
                 <Button
                   className="absolute right-2 top-1 z-40 bg-gray-500 bg-gradient-to-br from-gray-400 to-gray-500"
                   size="xs"
+                  aria-label="Mark as Reviewed"
                   onClick={async () => {
                     await axios.post(`reviews/viewed`, { ids: [event.id] });
                     updateEvents();

diff --git a/web/src/components/card/ExportCard.tsx b/web/src/components/card/ExportCard.tsx
@@ -113,6 +113,7 @@ export default function ExportCard({
               />
               <DialogFooter>
                 <Button
+                  aria-label="Save Export"
                   size="sm"
                   variant="select"
                   disabled={(editName?.update?.length ?? 0) == 0}
@@ -206,6 +207,7 @@ export default function ExportCard({
             {!exportedRecording.in_progress && (
               <Button
                 className="absolute left-1/2 top-1/2 h-20 w-20 -translate-x-1/2 -translate-y-1/2 cursor-pointer text-white hover:bg-transparent hover:text-white"
+                aria-label="Play"
                 variant="ghost"
                 onClick={() => {
                   onSelect(exportedRecording);

diff --git a/web/src/components/dynamic/NewReviewData.tsx b/web/src/components/dynamic/NewReviewData.tsx
@@ -36,6 +36,7 @@ export default function NewReviewData({
               : "invisible",
             "mx-auto mt-5 bg-gray-400 text-center text-white",
           )}
+          aria-label="View new review items"
           onClick={() => {
             pullLatestData();
             if (contentRef.current) {

diff --git a/web/src/components/filter/CalendarFilterButton.tsx b/web/src/components/filter/CalendarFilterButton.tsx
@@ -34,6 +34,7 @@ export default function CalendarFilterButton({
   const trigger = (
     <Button
       className="flex items-center gap-2"
+      aria-label="Select a date to filter by"
       variant={day == undefined ? "default" : "select"}
       size="sm"
     >
@@ -57,6 +58,7 @@ export default function CalendarFilterButton({
       <DropdownMenuSeparator />
       <div className="flex items-center justify-center p-2">
         <Button
+          aria-label="Reset"
           onClick={() => {
             updateSelectedDay(undefined);
           }}
@@ -99,6 +101,7 @@ export function CalendarRangeFilterButton({
   const trigger = (
     <Button
       className="flex items-center gap-2"
+      aria-label="Select a date to filter by"
       variant={range == undefined ? "default" : "select"}
       size="sm"
     >

diff --git a/web/src/components/filter/CameraGroupSelector.tsx b/web/src/components/filter/CameraGroupSelector.tsx
@@ -141,6 +141,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                     ? "bg-blue-900 bg-opacity-60 text-selected focus:bg-blue-900 focus:bg-opacity-60"
                     : "bg-secondary text-secondary-foreground focus:bg-secondary focus:text-secondary-foreground"
                 }
+                aria-label="All Cameras"
                 size="xs"
                 onClick={() => (group ? setGroup("default", true) : null)}
                 onMouseEnter={() => (isDesktop ? showTooltip("default") : null)}
@@ -165,6 +166,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
                         ? "bg-blue-900 bg-opacity-60 text-selected focus:bg-blue-900 focus:bg-opacity-60"
                         : "bg-secondary text-secondary-foreground"
                     }
+                    aria-label="Camera Group"
                     size="xs"
                     onClick={() => setGroup(name, group != "default")}
                     onMouseEnter={() => (isDesktop ? showTooltip(name) : null)}
@@ -191,6 +193,7 @@ export function CameraGroupSelector({ className }: CameraGroupSelectorProps) {
 
           <Button
             className="bg-secondary text-muted-foreground"
+            aria-label="Add camera group"
             size="xs"
             onClick={() => setAddGroup(true)}
           >
@@ -355,6 +358,7 @@ function NewGroupDialog({
                         "size-6 rounded-md bg-secondary-foreground p-1 text-background",
                       isMobile && "text-secondary-foreground",
                     )}
+                    aria-label="Add camera group"
                     onClick={() => {
                       setEditState("add");
                     }}
@@ -536,10 +540,16 @@ export function CameraGroupRow({
               </DropdownMenuTrigger>
               <DropdownMenuPortal>
                 <DropdownMenuContent>
-                  <DropdownMenuItem onClick={onEditGroup}>
+                  <DropdownMenuItem
+                    aria-label="Edit group"
+                    onClick={onEditGroup}
+                  >
                     Edit
                   </DropdownMenuItem>
-                  <DropdownMenuItem onClick={() => setDeleteDialogOpen(true)}>
+                  <DropdownMenuItem
+                    aria-label="Delete group"
+                    onClick={() => setDeleteDialogOpen(true)}
+                  >
                     Delete
                   </DropdownMenuItem>
                 </DropdownMenuContent>
@@ -793,13 +803,19 @@ export function CameraGroupEdit({
         <Separator className="my-2 flex bg-secondary" />
 
         <div className="flex flex-row gap-2 py-5 md:pb-0">
-          <Button type="button" className="flex flex-1" onClick={onCancel}>
+          <Button
+            type="button"
+            className="flex flex-1"
+            aria-label="Cancel"
+            onClick={onCancel}
+          >
             Cancel
           </Button>
           <Button
             variant="select"
             disabled={isLoading}
             className="flex flex-1"
+            aria-label="Save"
             type="submit"
           >
             {isLoading ? (

diff --git a/web/src/components/filter/CamerasFilterButton.tsx b/web/src/components/filter/CamerasFilterButton.tsx
@@ -55,6 +55,7 @@ export function CamerasFilterButton({
   const trigger = (
     <Button
       className="flex items-center gap-2 capitalize"
+      aria-label="Cameras Filter"
       variant={selectedCameras?.length == undefined ? "default" : "select"}
       size="sm"
     >
@@ -202,6 +203,7 @@ export function CamerasFilterContent({
       <DropdownMenuSeparator />
       <div className="flex items-center justify-evenly p-2">
         <Button
+          aria-label="Apply"
           variant="select"
           disabled={currentCameras?.length === 0}
           onClick={() => {
@@ -212,6 +214,7 @@ export function CamerasFilterContent({
           Apply
         </Button>
         <Button
+          aria-label="Reset"
           onClick={() => {
             setCurrentCameras(undefined);
             updateCameraFilter(undefined);

diff --git a/web/src/components/filter/LogLevelFilter.tsx b/web/src/components/filter/LogLevelFilter.tsx
@@ -17,7 +17,11 @@ export function LogLevelFilterButton({
   updateLabelFilter,
 }: LogLevelFilterButtonProps) {
   const trigger = (
-    <Button size="sm" className="flex items-center gap-2">
+    <Button
+      size="sm"
+      className="flex items-center gap-2"
+      aria-label="Filter log level"
+    >
       <FaFilter className="text-secondary-foreground" />
       <div className="hidden text-primary md:block">Filter</div>
     </Button>

diff --git a/web/src/components/filter/ReviewActionGroup.tsx b/web/src/components/filter/ReviewActionGroup.tsx
@@ -104,6 +104,7 @@ export default function ReviewActionGroup({
           {selectedReviews.length == 1 && (
             <Button
               className="flex items-center gap-2 p-2"
+              aria-label="Export"
               size="sm"
               onClick={() => {
                 onExport(selectedReviews[0]);
@@ -116,6 +117,7 @@ export default function ReviewActionGroup({
           )}
           <Button
             className="flex items-center gap-2 p-2"
+            aria-label="Mark as reviewed"
             size="sm"
             onClick={onMarkAsReviewed}
           >
@@ -124,6 +126,7 @@ export default function ReviewActionGroup({
           </Button>
           <Button
             className="flex items-center gap-2 p-2"
+            aria-label="Delete"
             size="sm"
             onClick={handleDelete}
           >

diff --git a/web/src/components/filter/ReviewFilterGroup.tsx b/web/src/components/filter/ReviewFilterGroup.tsx
@@ -278,6 +278,7 @@ function ShowReviewFilter({
 
       <Button
         className="block duration-0 md:hidden"
+        aria-label="Show reviewed"
         variant={showReviewedSwitch ? "select" : "default"}
         size="sm"
         onClick={() =>
@@ -338,6 +339,7 @@ function GeneralFilterButton({
         selectedLabels?.length || selectedZones?.length ? "select" : "default"
       }
       className="flex items-center gap-2 capitalize"
+      aria-label="Filter"
     >
       <FaFilter
         className={`${selectedLabels?.length || selectedZones?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
@@ -538,6 +540,7 @@ export function GeneralFilterContent({
       <DropdownMenuSeparator />
       <div className="flex items-center justify-evenly p-2">
         <Button
+          aria-label="Apply"
           variant="select"
           onClick={() => {
             if (selectedLabels != currentLabels) {
@@ -554,6 +557,7 @@ export function GeneralFilterContent({
           Apply
         </Button>
         <Button
+          aria-label="Reset"
           onClick={() => {
             setCurrentLabels(undefined);
             setCurrentZones?.(undefined);
@@ -601,6 +605,7 @@ function ShowMotionOnlyButton({
         <Button
           size="sm"
           className="duration-0"
+          aria-label="Show Motion Only"
           variant={motionOnlyButton ? "select" : "default"}
           onClick={() => setMotionOnlyButton(!motionOnlyButton)}
         >

diff --git a/web/src/components/filter/SearchFilterGroup.tsx b/web/src/components/filter/SearchFilterGroup.tsx
@@ -227,6 +227,7 @@ function GeneralFilterButton({
       size="sm"
       variant={selectedLabels?.length ? "select" : "default"}
       className="flex items-center gap-2 capitalize"
+      aria-label="Labels"
     >
       <MdLabel
         className={`${selectedLabels?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}
@@ -336,6 +337,7 @@ export function GeneralFilterContent({
       <DropdownMenuSeparator />
       <div className="flex items-center justify-evenly p-2">
         <Button
+          aria-label="Apply"
           variant="select"
           onClick={() => {
             if (selectedLabels != currentLabels) {
@@ -348,6 +350,7 @@ export function GeneralFilterContent({
           Apply
         </Button>
         <Button
+          aria-label="Reset"
           onClick={() => {
             setCurrentLabels(undefined);
             updateLabelFilter(undefined);

diff --git a/web/src/components/filter/ZoneMaskFilter.tsx b/web/src/components/filter/ZoneMaskFilter.tsx
@@ -21,6 +21,7 @@ export function ZoneMaskFilterButton({
       size="sm"
       variant={selectedZoneMask?.length ? "select" : "default"}
       className="flex items-center gap-2 capitalize"
+      aria-label="Filter by zone mask"
     >
       <FaFilter
         className={`${selectedZoneMask?.length ? "text-selected-foreground" : "text-secondary-foreground"}`}

diff --git a/web/src/components/icons/IconPicker.tsx b/web/src/components/icons/IconPicker.tsx
@@ -66,7 +66,10 @@ export default function IconPicker({
       >
         <PopoverTrigger asChild>
           {!selectedIcon?.name || !selectedIcon?.Icon ? (
-            <Button className="mt-2 w-full text-muted-foreground">
+            <Button
+              className="mt-2 w-full text-muted-foreground"
+              aria-label="Select an icon"
+            >
               Select an icon
             </Button>
           ) : (

diff --git a/web/src/components/input/SaveSearchDialog.tsx b/web/src/components/input/SaveSearchDialog.tsx
@@ -59,11 +59,14 @@ export function SaveSearchDialog({
           placeholder="Enter a name for your search"
         />
         <DialogFooter>
-          <Button onClick={onClose}>Cancel</Button>
+          <Button aria-label="Cancel" onClick={onClose}>
+            Cancel
+          </Button>
           <Button
             onClick={handleSave}
             variant="select"
             className="mb-2 md:mb-0"
+            aria-label="Save this search"
           >
             Save
           </Button>

diff --git a/web/src/components/menu/AccountSettings.tsx b/web/src/components/menu/AccountSettings.tsx
@@ -72,6 +72,7 @@ export default function AccountSettings({ className }: AccountSettingsProps) {
             className={
               isDesktop ? "cursor-pointer" : "flex items-center p-2 text-sm"
             }
+            aria-label="Log out"
           >
             <a className="flex" href={logoutUrl}>
               <LuLogOut className="mr-2 size-4" />