Ensure DialogContent Accessibility by Adding Description Support (#10635

)

public/locale/en.json

@@ -953,6 +953,7 @@
   "encounter_manage_organization_description": "Add or remove organizations from this encouter",
   "encounter_marked_as_complete": "Encounter Completed",
   "encounter_notes__all_discussions": "All Discussions",
+  "encounter_notes__all_discussions_description": "View and manage encounternotes discussion threads",
   "encounter_notes__be_first_to_send": "Be the first to send a message",
   "encounter_notes__choose_template": "Choose a template or enter a custom title",
   "encounter_notes__create_discussion": "Create a new discussion thread to organize your conversation topics.",
@@ -2145,7 +2146,6 @@
   "select_policy_to_add_items": "Select a Policy to Add Items",
   "select_practitioner": "Select Practitioner",
   "select_previous": "Select Previous Fields",
-  "show_on_map": "Show on Map",
   "select_priority": "Select Priority",
   "select_prn_reason": "Select reason for PRN",
   "select_register_patient": "Select/Register Patient",
@@ -2212,10 +2212,13 @@
   "show_all_notifications": "Show All",
   "show_all_slots": "Show all slots",
   "show_default_presets": "Show Default Presets",
+  "show_on_map": "Show on Map",
   "show_patient_presets": "Show Patient Presets",
   "show_unread_notifications": "Show Unread",
   "showing_all_appointments": "Showing all appointments",
   "showing_x_of_y": "Showing <strong>{{x}}</strong> of <strong>{{y}}</strong>",
+  "sidebar": "sidebar",
+  "sidebar_description": "sidebar provides navigation to different sections",
   "sign_in": "Sign in",
   "sign_out": "Sign out",
   "site": "Site",

src/components/Common/AvatarEditModal.tsx

@@ -16,6 +16,7 @@ import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
 } from "@/components/ui/dialog";
@@ -224,6 +225,9 @@ const AvatarEditModal = ({
       <DialogContent className="md:max-w-4xl">
         <DialogHeader>
           <DialogTitle className="text-xl">{title}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {t("edit_avatar")}
+          </DialogDescription>
         </DialogHeader>
         <div className="flex h-full w-full items-center justify-center overflow-y-auto">
           <div className="flex max-h-screen min-h-96 w-full flex-col overflow-auto">

src/components/ui/sidebar.tsx

@@ -3,14 +3,20 @@ import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { VariantProps, cva } from "class-variance-authority";
 import { PanelLeftClose, PanelRightClose } from "lucide-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 
 import { cn } from "@/lib/utils";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Separator } from "@/components/ui/separator";
-import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { Skeleton } from "@/components/ui/skeleton";
 import {
   Tooltip,
@@ -178,6 +184,7 @@ const Sidebar = React.forwardRef<
     ref,
   ) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+    const { t } = useTranslation();
 
     if (collapsible === "none") {
       return (
@@ -197,6 +204,9 @@ const Sidebar = React.forwardRef<
     if (isMobile) {
       return (
         <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+          <SheetDescription className="sr-only">
+            {t("sidebar_description")}
+          </SheetDescription>
           <SheetContent
             data-sidebar="sidebar"
             data-mobile="true"

src/pages/Encounters/tabs/EncounterNotesTab.tsx

@@ -37,7 +37,12 @@ import {
 import { Input } from "@/components/ui/input";
 import { Markdown } from "@/components/ui/markdown";
 import { ScrollArea } from "@/components/ui/scroll-area";
-import { Sheet, SheetContent } from "@/components/ui/sheet";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
@@ -519,6 +524,10 @@ export const EncounterNotesTab = ({ encounter }: EncounterTabProps) => {
       {/* Mobile Sheet */}
       <Sheet open={isThreadsExpanded} onOpenChange={setIsThreadsExpanded}>
         <SheetContent side="left" className="w-[100%] sm:w-[380px] p-0">
+          <SheetDescription className="sr-only">
+            {t("encounter_notes__all_discussions_description")}
+          </SheetDescription>
+          <SheetTitle className="sr-only">{t("encounter")}</SheetTitle>
           <div className="flex flex-col h-full">
             <div className="p-4 border-b">
               <div className="flex items-center justify-between">

src/pages/Scheduling/components/CreateScheduleTemplateSheet.tsx

@@ -30,6 +30,7 @@ import {
   Sheet,
   SheetClose,
   SheetContent,
+  SheetDescription,
   SheetFooter,
   SheetHeader,
   SheetTitle,
@@ -252,6 +253,9 @@ export default function CreateScheduleTemplateSheet({
       <SheetContent className="flex min-w-full flex-col bg-gray-100 sm:min-w-[45rem]">
         <SheetHeader>
           <SheetTitle>{t("create_schedule_template")}</SheetTitle>
+          <SheetDescription className="sr-only">
+            {t("create_schedule_template")}
+          </SheetDescription>
         </SheetHeader>
 
         <div className="-mx-6 mb-16 overflow-auto px-6 pb-16 pt-6">

src/pages/Scheduling/components/EditScheduleTemplateSheet.tsx

@@ -43,6 +43,7 @@ import { Input } from "@/components/ui/input";
 import {
   Sheet,
   SheetContent,
+  SheetDescription,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
@@ -88,6 +89,9 @@ export default function EditScheduleTemplateSheet({
       <SheetContent className="flex min-w-full flex-col bg-gray-100 sm:min-w-[32rem]">
         <SheetHeader>
           <SheetTitle>{t("edit_schedule_template")}</SheetTitle>
+          <SheetDescription className="sr-only">
+            {t("edit_schedule_template")}
+          </SheetDescription>
         </SheetHeader>
         <div className="overflow-auto -mx-6 px-6 pb-16">
           <ScheduleTemplateEditor