Accessibility features (#14518)

* Add screen reader aria labels to buttons and menu items

* Fix sub_label score in search detail dialog

web/src/views/settings/AuthenticationView.tsx

@@ -95,6 +95,7 @@ export default function AuthenticationView() {
           </Heading>
           <Button
             className="flex items-center gap-1"
+            aria-label="Add a new user"
             variant="default"
             onClick={() => {
               setShowCreate(true);
@@ -114,6 +115,7 @@ export default function AuthenticationView() {
                 <div className="flex flex-1 justify-end space-x-2">
                   <Button
                     className="flex items-center gap-1"
+                    aria-label="Update the user's password"
                     variant="secondary"
                     onClick={() => {
                       setShowSetPassword(true);
@@ -125,6 +127,7 @@ export default function AuthenticationView() {
                   </Button>
                   <Button
                     className="flex items-center gap-1"
+                    aria-label="Delete the user"
                     variant="destructive"
                     onClick={() => {
                       setShowDelete(true);

web/src/views/settings/CameraSettingsView.tsx

@@ -475,6 +475,7 @@ export default function CameraSettingsView({
               <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
                 <Button
                   className="flex flex-1"
+                  aria-label="Cancel"
                   onClick={onCancel}
                   type="button"
                 >
@@ -484,6 +485,7 @@ export default function CameraSettingsView({
                   variant="select"
                   disabled={isLoading}
                   className="flex flex-1"
+                  aria-label="Save"
                   type="submit"
                 >
                   {isLoading ? (

web/src/views/settings/MasksAndZonesView.tsx

@@ -459,6 +459,7 @@ export default function MasksAndZonesView({
                             <Button
                               variant="secondary"
                               className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                              aria-label="Add a new zone"
                               onClick={() => {
                                 setEditPane("zone");
                                 handleNewPolygon("zone");
@@ -527,6 +528,7 @@ export default function MasksAndZonesView({
                             <Button
                               variant="secondary"
                               className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                              aria-label="Add a new motion mask"
                               onClick={() => {
                                 setEditPane("motion_mask");
                                 handleNewPolygon("motion_mask");
@@ -596,6 +598,7 @@ export default function MasksAndZonesView({
                             <Button
                               variant="secondary"
                               className="size-6 rounded-md bg-secondary-foreground p-1 text-background"
+                              aria-label="Add a new object mask"
                               onClick={() => {
                                 setEditPane("object_mask");
                                 handleNewPolygon("object_mask");

web/src/views/settings/MotionTunerView.tsx

@@ -284,13 +284,18 @@ export default function MotionTunerView({
         </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="Reset"
+              onClick={onCancel}
+            >
               Reset
             </Button>
             <Button
               variant="select"
               disabled={!changedValue || isLoading}
               className="flex flex-1"
+              aria-label="Save"
               onClick={saveToConfig}
             >
               {isLoading ? (

web/src/views/settings/NotificationsSettingsView.tsx

@@ -270,6 +270,7 @@ export default function NotificationView({
               <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
                 <Button
                   className="flex flex-1"
+                  aria-label="Cancel"
                   onClick={onCancel}
                   type="button"
                 >
@@ -279,6 +280,7 @@ export default function NotificationView({
                   variant="select"
                   disabled={isLoading}
                   className="flex flex-1"
+                  aria-label="Save"
                   type="submit"
                 >
                   {isLoading ? (
@@ -298,6 +300,7 @@ export default function NotificationView({
             <div className="space-y-3">
               <Separator className="my-2 flex bg-secondary" />
               <Button
+                aria-label="Register or unregister notifications for this device"
                 disabled={
                   !config?.notifications.enabled || publicKey == undefined
                 }

web/src/views/settings/SearchSettingsView.tsx

@@ -266,13 +266,14 @@ export default function SearchSettingsView({
         <Separator className="my-2 flex bg-secondary" />
 
         <div className="flex w-full flex-row items-center gap-2 pt-2 md:w-[25%]">
-          <Button className="flex flex-1" onClick={onCancel}>
+          <Button className="flex flex-1" aria-label="Reset" onClick={onCancel}>
             Reset
           </Button>
           <Button
             variant="select"
             disabled={!changedValue || isLoading}
             className="flex flex-1"
+            aria-label="Save"
             onClick={saveToConfig}
           >
             {isLoading ? (

web/src/views/settings/UiSettingsView.tsx

@@ -125,7 +125,12 @@ export default function UiSettingsView() {
                   </p>
                 </div>
               </div>
-              <Button onClick={clearStoredLayouts}>Clear All Layouts</Button>
+              <Button
+                aria-label="Clear all saved layouts"
+                onClick={clearStoredLayouts}
+              >
+                Clear All Layouts
+              </Button>
             </div>
 
             <Separator className="my-2 flex bg-secondary" />