Accessibility features (#14518)

* Add screen reader aria labels to buttons and menu items

* Fix sub_label score in search detail dialog

web/src/components/settings/MotionMaskEditPane.tsx

@@ -308,11 +308,16 @@ export default function MotionMaskEditPane({
           />
           <div className="flex flex-1 flex-col justify-end">
             <div className="flex flex-row gap-2 pt-5">
-              <Button className="flex flex-1" onClick={onCancel}>
+              <Button
+                className="flex flex-1"
+                aria-label="Cancel"
+                onClick={onCancel}
+              >
                 Cancel
               </Button>
               <Button
                 variant="select"
+                aria-label="Save"
                 disabled={isLoading}
                 className="flex flex-1"
                 type="submit"

web/src/components/settings/ObjectMaskEditPane.tsx

@@ -335,13 +335,18 @@ export default function ObjectMaskEditPane({
           </div>
           <div className="flex flex-1 flex-col justify-end">
             <div className="flex flex-row gap-2 pt-5">
-              <Button className="flex flex-1" onClick={onCancel}>
+              <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 ? (

web/src/components/settings/PolygonEditControls.tsx

@@ -74,6 +74,7 @@ export default function PolygonEditControls({
           <Button
             variant="default"
             className="size-6 rounded-md p-1"
+            aria-label="Remove last point"
             disabled={!polygons[activePolygonIndex].points.length}
             onClick={undo}
           >
@@ -87,6 +88,7 @@ export default function PolygonEditControls({
           <Button
             variant="default"
             className="size-6 rounded-md p-1"
+            aria-label="Clear all points"
             disabled={!polygons[activePolygonIndex].points.length}
             onClick={reset}
           >

web/src/components/settings/PolygonItem.tsx

@@ -276,6 +276,7 @@ export default function PolygonItem({
               </DropdownMenuTrigger>
               <DropdownMenuContent>
                 <DropdownMenuItem
+                  aria-label="Edit"
                   onClick={() => {
                     setActivePolygonIndex(index);
                     setEditPane(polygon.type);
@@ -283,10 +284,14 @@ export default function PolygonItem({
                 >
                   Edit
                 </DropdownMenuItem>
-                <DropdownMenuItem onClick={() => handleCopyCoordinates(index)}>
+                <DropdownMenuItem
+                  aria-label="Copy"
+                  onClick={() => handleCopyCoordinates(index)}
+                >
                   Copy
                 </DropdownMenuItem>
                 <DropdownMenuItem
+                  aria-label="Delete"
                   disabled={isLoading}
                   onClick={() => setDeleteDialogOpen(true)}
                 >

web/src/components/settings/SearchSettings.tsx

@@ -44,7 +44,11 @@ export default function SearchSettings({
   ]);
 
   const trigger = (
-    <Button className="flex items-center gap-2" size="sm">
+    <Button
+      className="flex items-center gap-2"
+      aria-label="Search Settings"
+      size="sm"
+    >
       <FaCog className="text-secondary-foreground" />
       Settings
     </Button>

web/src/components/settings/ZoneEditPane.tsx

@@ -466,13 +466,18 @@ export default function ZoneEditPane({
             )}
           />
           <div className="flex flex-row gap-2 pt-5">
-            <Button className="flex flex-1" onClick={onCancel}>
+            <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 ? (