MIM-1718 fixed NVDA for calculators (#2427)

MIM-1718 fixed screenreader on NVDA
statisticsnorway · Jan 16, 2024 · cd8bc00 · cd8bc00
1 parent 73b1d8b
commit cd8bc00
Show file tree

Hide file tree

Showing 4 changed files with 23 additions and 27 deletions.
diff --git a/src/main/resources/react4xp/_entries/BkibolCalculator.jsx b/src/main/resources/react4xp/_entries/BkibolCalculator.jsx
@@ -564,7 +564,7 @@ function BkibolCalculator(props) {
 
     return (
       <Container className='calculator-result' ref={scrollAnchor}>
-        <div aria-live='polite' aria-atomic='true'>
+        <div aria-atomic='true'>
           <span className='sr-only'>{resultScreenReaderText}</span>
         </div>
         <Row className='mb-5' aria-hidden='true'>
@@ -615,13 +615,13 @@ function BkibolCalculator(props) {
             <Divider dark />
           </Col>
         </Row>
-        <Row>
+        <Row aria-live='off'>
           <Col className='md-6'>
-            <Button className='close-button' onClick={() => closeResult()} type='button'>
+            <button className='ssb-btn close-button' onClick={() => closeResult()} autoFocus>
               {' '}
               <X size='18' />
               {props.phrases.close}
-            </Button>
+            </button>
           </Col>
         </Row>
       </Container>
@@ -803,7 +803,7 @@ function BkibolCalculator(props) {
   return (
     <Container className='bkibol-calculator'>
       {renderForm()}
-      {renderResult()}
+      <div aria-live='polite'>{renderResult()}</div>
     </Container>
   )
 }

diff --git a/src/main/resources/react4xp/_entries/KpiCalculator.jsx b/src/main/resources/react4xp/_entries/KpiCalculator.jsx
@@ -355,7 +355,7 @@ function KpiCalculator(props) {
 
     return (
       <Container className='calculator-result' ref={scrollAnchor}>
-        <div aria-live='polite' aria-atomic='true'>
+        <div aria-atomic='true'>
           <span className='sr-only'>{resultScreenReader}</span>
         </div>
         <Row className='mb-5' aria-hidden='true'>
@@ -438,13 +438,13 @@ function KpiCalculator(props) {
             <span>{renderNumberChangeValue(changeValue)}</span>
           </Col>
         </Row>
-        <Row>
+        <Row aria-live='off'>
           <Col className='md-6'>
-            <Button className='close-button' onClick={() => closeResult()} type='button'>
+            <button className='ssb-btn close-button' onClick={() => closeResult()} autoFocus>
               {' '}
               <X size='18' />
               {props.phrases.close}
-            </Button>
+            </button>
           </Col>
         </Row>
       </Container>
@@ -527,7 +527,7 @@ function KpiCalculator(props) {
       return (
         <Container className='kpi-calculator'>
           {renderForm()}
-          {renderResult()}
+          <div aria-live='polite'>{renderResult()}</div>
         </Container>
       )
     }

diff --git a/src/main/resources/react4xp/_entries/PifCalculator.jsx b/src/main/resources/react4xp/_entries/PifCalculator.jsx
@@ -458,7 +458,7 @@ function PifCalculator(props) {
 
     return (
       <Container className='calculator-result' ref={scrollAnchor} tabIndex='0'>
-        <div aria-live='polite' aria-atomic='true'>
+        <div aria-atomic='true'>
           <span className='sr-only'>{pifResultForScreenreader}</span>
         </div>
         <Row className='mb-5' aria-hidden='true'>
@@ -510,13 +510,13 @@ function PifCalculator(props) {
             <Divider dark />
           </Col>
         </Row>
-        <Row>
+        <Row aria-live='off'>
           <Col className='md-6'>
-            <Button className='close-button' onClick={() => closeResult()} type='button'>
+            <button className='ssb-btn close-button' onClick={() => closeResult()} autoFocus>
               {' '}
               <X size='18' />
               {props.phrases.close}
-            </Button>
+            </button>
           </Col>
         </Row>
       </Container>
@@ -677,7 +677,7 @@ function PifCalculator(props) {
   return (
     <Container className='pif-calculator'>
       {renderForm()}
-      {renderResult()}
+      <div aria-live='polite'>{renderResult()}</div>
     </Container>
   )
 }

diff --git a/src/main/resources/site/parts/husleieCalculator/husleieCalculator.jsx b/src/main/resources/site/parts/husleieCalculator/husleieCalculator.jsx
@@ -76,8 +76,6 @@ function HusleieCalculator(props) {
     }
   }, [loading, choosePeriod])
 
-  const submitButton = useRef(null)
-
   function onSubmit(e) {
     e.preventDefault()
     if (loading) return
@@ -430,9 +428,7 @@ function HusleieCalculator(props) {
           </Col>
           <Col className='price-change-text col-12 col-md-7 col-lg-6'>
             <span aria-hidden='true'>{resultText}</span>
-            <span aria-live='polite' className='visually-hidden'>
-              {resultScreenReaderText}
-            </span>
+            <span className='visually-hidden'>{resultScreenReaderText}</span>
           </Col>
         </Row>
       </Container>
@@ -481,7 +477,7 @@ function HusleieCalculator(props) {
   function renderChooseHusleiePeriode() {
     if (choosePeriod && showResult) {
       return (
-        <Container ref={scrollAnchor} aria-atomic='true' aria-live='polite'>
+        <Container ref={scrollAnchor} aria-atomic='true'>
           <Divider className='my-5' />
           <Row>
             <Title size={3} className='col-12 mb-2'>
@@ -490,10 +486,10 @@ function HusleieCalculator(props) {
             <p className='col-12 mb-4'>{props.phrases.husleieChooseFiguresToCalculateRent}</p>
           </Row>
           <Row className='ms-0'>
-            <Button className='submit-one-year' onClick={submitOneYearLater} ref={submitButton}>
+            <button className='ssb-btn submit-one-year' onClick={submitOneYearLater} autoFocus>
               {chooseFiguresToCalculateRent.oneYearLater.phraseOneYearLater}
-            </Button>
-            <Button className='submit-last-period' onClick={submitLastPeriod} ref={submitButton}>
+            </button>
+            <Button className='submit-last-period' onClick={submitLastPeriod}>
               {chooseFiguresToCalculateRent.newestNumbersPhrase}
             </Button>
           </Row>
@@ -518,7 +514,7 @@ function HusleieCalculator(props) {
     return (
       <Container className='husleie-calculator'>
         {renderForm()}
-        {renderResult()}
+        <div aria-live='polite'>{renderResult()}</div>
       </Container>
     )
   }
@@ -589,12 +585,12 @@ function HusleieCalculator(props) {
             </Row>
             <Row className='submit'>
               <Col>
-                <Button className='submit-button' primary type='submit' disabled={loading} ref={submitButton}>
+                <Button className='submit-button' primary type='submit' disabled={loading}>
                   {props.phrases.husleieSubmit}
                 </Button>
               </Col>
             </Row>
-            {renderChooseHusleiePeriode()}
+            <div aria-live='polite'>{renderChooseHusleiePeriode()}</div>
           </Container>
         </Form>
       </div>