Add Aria label to Modal.tsx

Author: ekraffmiller

packages/design-system/src/lib/components/modal/Modal.tsx

@@ -10,11 +10,19 @@ interface ModalProps {
   onHide: () => void
   centered?: boolean
   size?: 'sm' | 'lg' | 'xl'
+  ariaLabel?: string
 }
 
-function Modal({ show, onHide, centered, size, children }: PropsWithChildren<ModalProps>) {
+function Modal({
+  show,
+  onHide,
+  centered,
+  size,
+  children,
+  ariaLabel
+}: PropsWithChildren<ModalProps>) {
   return (
-    <BSModal centered={centered} show={show} onHide={onHide} size={size}>
+    <BSModal centered={centered} show={show} onHide={onHide} size={size} aria-label={ariaLabel}>
       {children}
     </BSModal>
   )

public/locales/en/dataset.json

@@ -184,6 +184,7 @@
     "studyCompletionTip": "Relationship of the data collected to the amount of data coded and stored in the Dataset. Information as to why certain items of collected information were not included in the dataset or a specific data file should be provided."
   },
   "publish": {
+    "title": "Publish Dataset",
     "draftQuestion": "Are you sure you want to publish this dataset? Once you do so, it must remain published.",
     "draftSubtext": "This version of the dataset will be published with the following terms:",
     "previouslyReleasedQuestion": "Are you sure you want to republish this dataset?",

src/sections/collection/edit-collection-dropdown/delete-collection-button/confirm-delete-collection-modal/ConfirmDeleteCollectionModal.tsx

@@ -20,9 +20,15 @@ export const ConfirmDeleteCollectionModal = ({
 }: ConfirmDeleteCollectionModalProps) => {
   const { t: tShared } = useTranslation('shared')
   const { t } = useTranslation('collection')
+  const modalTitle = t('deleteCollectionModal.title')
 
   return (
-    <Modal show={show} onHide={isDeletingCollection ? () => {} : handleClose} centered size="lg">
+    <Modal
+      ariaLabel={modalTitle}
+      show={show}
+      onHide={isDeletingCollection ? () => {} : handleClose}
+      centered
+      size="lg">
       <Modal.Header>
         <Modal.Title>{t('deleteCollectionModal.title')}</Modal.Title>
       </Modal.Header>

src/sections/dataset/dataset-action-buttons/edit-dataset-menu/delete-draft-dataset/ConfirmDeleteDraftDatasetModal.tsx

@@ -20,11 +20,17 @@ export const ConfirmDeleteDraftDatasetModal = ({
 }: ConfirmDeleteDraftDatasetModalProps) => {
   const { t: tShared } = useTranslation('shared')
   const { t } = useTranslation('dataset')
+  const modalTitle = t('datasetActionButtons.editDataset.deleteDatasetModal.title')
 
   return (
-    <Modal show={show} onHide={isDeletingDataset ? () => {} : handleClose} centered size="lg">
+    <Modal
+      ariaLabel={modalTitle}
+      show={show}
+      onHide={isDeletingDataset ? () => {} : handleClose}
+      centered
+      size="lg">
       <Modal.Header>
-        <Modal.Title>{t('datasetActionButtons.editDataset.deleteDatasetModal.title')}</Modal.Title>
+        <Modal.Title>{modalTitle}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <Stack gap={2}>

src/sections/dataset/deaccession-dataset/ConfirmationModal.tsx

@@ -19,9 +19,10 @@ export function ConfirmationModal({
 }: ConfirmationModalProps) {
   const { t } = useTranslation(['dataset', 'shared'])
   const isDeaccessioning = submissionStatus === SubmissionStatus.IsSubmitting
+  const modalTitle = t('confirmDeaccession.title')
 
   return (
-    <Modal size={'lg'} show={show} onHide={onCancel}>
+    <Modal ariaLabel={modalTitle} size={'lg'} show={show} onHide={onCancel}>
       <Modal.Header>
         <Modal.Title>{t('confirmDeaccession.title')}</Modal.Title>
       </Modal.Header>

src/sections/dataset/publish-dataset/PublishDatasetModal.tsx

@@ -79,11 +79,12 @@ export function PublishDatasetModal({
     )
     handleClose()
   }
+  const modalTitle = t('publish.title')
 
   return (
-    <Modal show={show} onHide={handleClose} size="xl">
+    <Modal show={show} onHide={handleClose} size="xl" ariaLabel={modalTitle}>
       <Modal.Header>
-        <Modal.Title>Publish Dataset</Modal.Title>
+        <Modal.Title>{t('publish.title')}</Modal.Title>
       </Modal.Header>
       <Modal.Body>
         <Stack direction="vertical">