Merge pull request #2997 from statisticsnorway/MIM-2066-Accessibility…

…-fix-popup [MIM-2066] Accessibility fix for popup
statisticsnorway · Oct 30, 2024 · c3a16aa · c3a16aa
2 parents e29ba46 + a2a65e1
commit c3a16aa
Showing 1 changed file with 7 additions and 4 deletions.
diff --git a/src/main/resources/react4xp/_entries/Popup.tsx b/src/main/resources/react4xp/_entries/Popup.tsx
@@ -90,6 +90,9 @@ const Popup = () => {
     <div
       className={`popup-container ${isOpen ? 'open' : isScrolled ? 'scrolled' : 'closed'}`}
       ref={popupContainerRef}
+      role='dialog'
+      aria-labelledby='popup-header'
+      aria-describedby='popup-content'
       tabIndex={isOpen ? -1 : 0}
       onKeyDown={!isOpen ? handleClosedButtonKeyDown : undefined}
     >
@@ -100,18 +103,18 @@ const Popup = () => {
         </button>
       ) : (
         <>
-          <div className='popup-header' role='presentation'>
+          <header className='popup-header' id='popup-header'>
             <h4 className='header-text'>Hvordan opplever du ssb.no?</h4>
             <button className='close-icon-wrapper' aria-label='Lukk' tabIndex={0} onClick={closePopup}>
               <X className='close-icon' size={24} />
             </button>
-          </div>
-          <div className='popup-content' role='presentation'>
+          </header>
+          <main className='popup-content' id='popup-content'>
             <p>
               Hjelp oss å gjøre opplevelsen din på ssb.no bedre. Det tar omtrent 6 minutter å svare på vår årlige
               brukerundersøkelse.
             </p>
-          </div>
+          </main>
           <div className='button-group'>
             <button
               className='popup-secondary-button'