Add alertdialog role to confirmation

src/app/content/components/Modal.tsx

@@ -13,7 +13,7 @@ interface ModalWithScrollLockProps extends StyledComponentProps<'div', {}, {}, '
 const ModalWithScrollLock = React.forwardRef<HTMLDivElement, ModalWithScrollLockProps>(
   ({ children, scrollLockProps, ...props }: ModalWithScrollLockProps, ref) => {
   return createPortal(
-    <PopupWrapper>
+    <PopupWrapper role='dialog' aria-modal='true'>
       <ScrollLock {...scrollLockProps} />
       <ModalWrapper ref={ref} {...props}>
         {children}

src/app/content/components/popUp/FiltersList.tsx

@@ -143,7 +143,7 @@ const FiltersList = ({
     });
   };
 
-  return <ul className={className}>
+  return <ul className={className} aria-live='polite' aria-atomic='true'>
     {Array.from(locationFilters).map(([locationId, location]) => selectedLocationFilters.has(locationId) &&
     <FiltersListChapter
       key={locationId}

src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap

@@ -434,6 +434,8 @@ exports[`Filters matches snapshot 1`] = `
     </button>
   </div>
   <ul
+    aria-atomic="true"
+    aria-live="polite"
     className="c16 c17"
   >
     <li
@@ -1124,6 +1126,8 @@ exports[`Filters matches snapshot when open color filters 1`] = `
     </button>
   </div>
   <ul
+    aria-atomic="true"
+    aria-live="polite"
     className="c18 c19"
   />
 </div>

src/app/content/highlights/components/Confirmation.tsx

@@ -60,6 +60,7 @@ const Confirmation = React.forwardRef<HTMLElement, Props>((
   return <Overlay
     ref={mergeRefs(ref, drawFocus ? drawFocusRef : null)}
     tabIndex={-1}
+    role='alertdialog'
     {...props['data-analytics-region']
       ? {'data-analytics-region': props['data-analytics-region']}
       : {}

src/app/content/highlights/components/Highlights.tsx

@@ -78,7 +78,7 @@ const Highlights = ({ className }: { className: string }) => {
 
   return <React.Fragment>
     {isLoading ? <LoaderWrapper><Loader large /></LoaderWrapper> : null}
-    {orderedHighlights && <HighlightsWrapper ref={container} className={className}>
+    {orderedHighlights && <HighlightsWrapper ref={container} className={className} aria-live='polite'>
       {orderedHighlights.map((highlightData) => {
         return <SectionHighlights
           key={highlightData.location.id}

src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap

@@ -1241,6 +1241,8 @@ input:checked + .c21 .c22 {
     </button>
   </div>
   <ul
+    aria-atomic="true"
+    aria-live="polite"
     className="c44 c45"
   >
     <li

src/app/content/highlights/components/__snapshots__/Confirmation.spec.tsx.snap

@@ -123,6 +123,7 @@ exports[`Confirmation matches snapshot no selection 1`] = `
 <div
   className="c0"
   data-analytics-region="region"
+  role="alertdialog"
   tabIndex={-1}
 >
   <label>

src/app/content/keyboardShortcuts/components/__snapshots__/KeyboardShortcutsPopup.spec.tsx.snap

@@ -272,7 +272,9 @@ exports[`KeyboardShortcuts renders keyboard shortcuts modal if it is open 1`] =
 }
 
 <div
+  aria-modal="true"
   className="c0"
+  role="dialog"
 >
   <div
     className="c1"

src/app/content/practiceQuestions/components/__snapshots__/PracticeQuestionsPopup.spec.tsx.snap

@@ -398,7 +398,9 @@ exports[`PracticeQuestions renders practice questions modal if it is open 1`] =
 }
 
 <div
+  aria-modal="true"
   className="c0"
+  role="dialog"
 >
   <div
     className="c1"

src/app/content/studyGuides/components/StudyGuides.tsx

@@ -45,15 +45,15 @@ const StudyGuides = ({ className }: { className: string }) => {
   return <div className={className}>
     {isLoading ? <LoaderWrapper><Loader large /></LoaderWrapper> : null}
     {(!isLoading && orderedStudyGuides && orderedStudyGuides.length === 0) ?
-      <HighlightsWrapper ref={container}>
+      <HighlightsWrapper ref={container} aria-live='polite'>
         <GeneralCenterText>
           <FormattedMessage id='i18n:studyguides:popup:no-highlights'>
             {(msg) => msg}
           </FormattedMessage>
           <NoStudyGuidesTip />
         </GeneralCenterText>
       </HighlightsWrapper>
-    : orderedStudyGuides && <HighlightsWrapper ref={container}>
+    : orderedStudyGuides && <HighlightsWrapper ref={container} aria-live='polite'>
         {orderedStudyGuides.map((highlightData) => {
           return <SectionHighlights
             key={highlightData.location.id}

src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap

@@ -1776,6 +1776,8 @@ input:checked + .c21 .c22 {
     </button>
   </div>
   <ul
+    aria-atomic="true"
+    aria-live="polite"
     className="c57 c58"
   >
     <li

src/app/content/studyGuides/components/__snapshots__/StudyGuides.spec.tsx.snap

@@ -366,6 +366,7 @@ exports[`StudyGuides properly display summary highlights 1`] = `
   className="c0"
 >
   <div
+    aria-live="polite"
     className="c1"
   >
     <div