Mim 1932 sr arrow keyfigure (#1196)

* Add screen reader only text for key figures change variation Add aria-label attribute for glossary since children prop can be a node MIM-1932 * Bump ssb-component library from 2.2.2 to 2.2.3 * Update key figures test with screen reader text changes * Minor code refactoring * Remove unused screen import * Update key figures storybook examples with sr only text example
statisticsnorway · Jul 26, 2024 · f127a08 · f127a08
1 parent f140d75
commit f127a08
Show file tree

Hide file tree

Showing 8 changed files with 147 additions and 79 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

diff --git a/src/components/Glossary/README.md b/src/components/Glossary/README.md
@@ -43,3 +43,4 @@ Available props:
 | className   | string          | Optional container class                 |
 | closeText   | string          | Close button text, default "Lukk"        |
 | explanation | required string | Text to be inside popup                  |
+| ariaLabel | string | Defines a string value that describes the glossary  |
diff --git a/src/components/Glossary/index.jsx b/src/components/Glossary/index.jsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState, useRef, useCallback } from 'react'
 import PropTypes from 'prop-types'
 import { BookOpen, XCircle } from 'react-feather'
 
-const Glossary = ({ explanation, children, className, closeText }) => {
+const Glossary = ({ explanation, children, className, closeText, ariaLabel }) => {
   const node = useRef()
   const [open, setOpen] = useState(false)
 
@@ -51,7 +51,7 @@ const Glossary = ({ explanation, children, className, closeText }) => {
         ref={node}
         onClick={() => setOpen(!open)}
         className='glossary-button'
-        aria-label={children}
+        aria-label={ariaLabel || children}
         aria-expanded={open ? 'true' : 'false'}
       >
         <span className='glossary-text-wrap'>{children}</span>
@@ -86,6 +86,7 @@ Glossary.propTypes = {
   className: PropTypes.string,
   closeText: PropTypes.string,
   explanation: PropTypes.string.isRequired,
+  ariaLabel: PropTypes.string,
 }
 
 export default Glossary
diff --git a/src/components/KeyFigures/README.md b/src/components/KeyFigures/README.md
@@ -134,7 +134,7 @@ Available props:
 
 | Name              | Type                                                                  | Description                                              |
 | ----------------- | --------------------------------------------------------------------- | -------------------------------------------------------- |
-| changes           | object (changeDirection [up, down or same], changeText, changePeriod) | Renders changetext with icon                             |
+| changes           | object (changeDirection [up, down or same], changeText, changePeriod, srChangeText) | Renders changetext with icon                             |
 | className         | string                                                                | Optional container class                                 |
 | icon              | node                                                                  | Renders an icon                                          |
 | number            | string or number                                                      | Large number to be displayed                             |

diff --git a/src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap b/src/components/KeyFigures/__snapshots__/keyFigures.test.jsx.snap
@@ -34,7 +34,7 @@ exports[`KeyFigures component Matches the snapshot 1`] = `
       >
         <button
           aria-expanded="false"
-          aria-label="[object Object]"
+          aria-label="Antall husholdninger"
           class="glossary-button"
         >
           <span
@@ -140,6 +140,19 @@ exports[`KeyFigures component Matches the snapshot 1`] = `
           husholdninger
         </span>
       </div>
+      <div
+        class="kf-changes"
+      >
+        <span
+          aria-hidden="false"
+          class="changes-text"
+        />
+         
+        <span
+          aria-hidden="false"
+          class="changes-periode"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -173,6 +186,19 @@ exports[`KeyFigures component Render green box variation 1`] = `
           class="kf-title subtitle"
         />
       </div>
+      <div
+        class="kf-changes"
+      >
+        <span
+          aria-hidden="false"
+          class="changes-text"
+        />
+         
+        <span
+          aria-hidden="false"
+          class="changes-periode"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -189,15 +215,17 @@ exports[`KeyFigures component Renders Glossary 1`] = `
       >
         <button
           aria-expanded="false"
-          aria-label="[object Object]"
+          aria-label="Antall husholdninger"
           class="glossary-button"
         >
           <span
             class="glossary-text-wrap"
           >
             <span
               class="kf-title"
-            />
+            >
+              Antall husholdninger
+            </span>
           </span>
           <svg
             aria-hidden="true"
@@ -289,6 +317,19 @@ exports[`KeyFigures component Renders Glossary 1`] = `
           class="kf-title subtitle"
         />
       </div>
+      <div
+        class="kf-changes"
+      >
+        <span
+          aria-hidden="false"
+          class="changes-text"
+        />
+         
+        <span
+          aria-hidden="false"
+          class="changes-periode"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>

diff --git a/src/components/KeyFigures/index.jsx b/src/components/KeyFigures/index.jsx
@@ -5,59 +5,65 @@ import Number from '../Number'
 import Glossary from '../Glossary'
 
 const KeyFigures = ({
-  changes,
+  changes = {},
   className,
   icon,
   number,
   numberDescription,
-  noNumberText,
+  noNumberText = 'Tall ikke tilgjengelig',
   size,
   title,
   time,
   glossary,
   greenBox,
-}) => (
-  <div className={`ssb-key-figures ${size}${greenBox ? ' green-box' : ''}${className ? ` ${className}` : ''}`}>
-    {icon && <div className={`kf-icon ${size}`}>{icon}</div>}
-    <div>
-      {glossary ? (
-        <Glossary explanation={glossary}>
+}) => {
+  const { changeDirection, changeText, changePeriod, srChangeText } = changes
+  return (
+    <div className={`ssb-key-figures ${size}${greenBox ? ' green-box' : ''}${className ? ` ${className}` : ''}`}>
+      {icon && <div className={`kf-icon ${size}`}>{icon}</div>}
+      <div>
+        {glossary && title ? (
+          <Glossary explanation={glossary} ariaLabel={title}>
+            <span className='kf-title'>{title}</span>
+          </Glossary>
+        ) : (
           <span className='kf-title'>{title}</span>
-        </Glossary>
-      ) : (
-        <span className='kf-title'>{title}</span>
-      )}
-      <div className='kf-time'>{time}</div>
-      {number ? (
-        <div className='number-section'>
-          <Number size={size}>{number}</Number>
-          <span className='kf-title subtitle'>{numberDescription}</span>
-        </div>
-      ) : (
-        <span className='no-number'>{noNumberText}</span>
-      )}
-      {changes && (
-        <div className='kf-changes'>
-          {changes.changeDirection === 'up' && <ArrowUp className='changes-icon' size={20} />}
-          {changes.changeDirection === 'down' && <ArrowDown className='changes-icon' size={20} />}
-          {changes.changeDirection === 'same' && <Minus className='changes-icon' size={20} />}
-          <span className='changes-text'>{changes.changeText}</span>&nbsp;
-          <span className='changes-periode'>{changes.changePeriod}</span>
-        </div>
-      )}
+        )}
+        <div className='kf-time'>{time}</div>
+        {number ? (
+          <div className='number-section'>
+            <Number size={size}>{number}</Number>
+            <span className='kf-title subtitle'>{numberDescription}</span>
+          </div>
+        ) : (
+          <span className='no-number'>{noNumberText}</span>
+        )}
+        {changes && (
+          <div className='kf-changes'>
+            {changeDirection === 'up' && <ArrowUp className='changes-icon' size={20} aria-hidden='true' />}
+            {changeDirection === 'down' && <ArrowDown className='changes-icon' size={20} aria-hidden='true' />}
+            {changeDirection === 'same' && <Minus className='changes-icon' size={20} aria-hidden='true' />}
+            <span className='changes-text' aria-hidden={srChangeText ? 'true' : 'false'}>
+              {changeText}
+            </span>
+            &nbsp;
+            <span className='changes-periode' aria-hidden={srChangeText ? 'true' : 'false'}>
+              {changePeriod}
+            </span>
+            {srChangeText ? <span className='sr-only'>{srChangeText}</span> : null}
+          </div>
+        )}
+      </div>
     </div>
-  </div>
-)
-
-KeyFigures.defaultProps = {
-  noNumberText: 'Tall ikke tilgjengelig',
+  )
 }
 
 KeyFigures.propTypes = {
   changes: PropTypes.shape({
     changeDirection: PropTypes.oneOf(['up', 'down', 'same']),
     changeText: PropTypes.string,
     changePeriod: PropTypes.string,
+    srChangeText: PropTypes.string,
   }),
   className: PropTypes.string,
   icon: PropTypes.node,

diff --git a/src/components/KeyFigures/keyFigures.story.jsx b/src/components/KeyFigures/keyFigures.story.jsx
@@ -19,7 +19,7 @@ export const Large = () => (
       numberDescription='husholdninger'
       time='2018'
       size='large'
-      icon={<HouseIcon alt='house' />}
+      icon={<HouseIcon />}
       glossary={placeholderText}
     />
   </div>
@@ -33,7 +33,7 @@ export const Medium = () => (
       numberDescription='husholdninger'
       time='2018'
       size='medium'
-      icon={<HouseIcon alt='house' />}
+      icon={<HouseIcon />}
     />
   </div>
 )
@@ -46,7 +46,7 @@ export const Small = () => (
       numberDescription='plasser'
       time='2018'
       size='small'
-      icon={<HouseIcon alt='house' />}
+      icon={<HouseIcon />}
     />
   </div>
 )
@@ -76,24 +76,16 @@ export const WithoutIcon = () => (
   </div>
 )
 
-WithoutIcon.story = {
-  name: 'Without icon',
-}
-
 export const WithoutNumber = () => (
   <KeyFigures
     title='Antall plasser i helse- og omsorgsinstitusjoner'
     numberDescription='plasser'
     time='2018'
     size='small'
-    icon={<HouseIcon alt='house' />}
+    icon={<HouseIcon />}
   />
 )
 
-WithoutNumber.story = {
-  name: 'Without number',
-}
-
 export const WithChanges = () => (
   <div>
     <KeyFigures
@@ -102,7 +94,7 @@ export const WithChanges = () => (
       numberDescription='husholdninger'
       time='2018'
       size='large'
-      icon={<HouseIcon alt='house' />}
+      icon={<HouseIcon />}
       glossary={placeholderText}
       changes={{
         changeDirection: 'up',
@@ -120,7 +112,7 @@ export const WithChanges = () => (
       numberDescription='husholdninger'
       time='2018'
       size='medium'
-      icon={<HouseIcon alt='house' />}
+      icon={<HouseIcon />}
       changes={{
         changeDirection: 'same',
         changeText: 'Ingen endring',
@@ -137,7 +129,7 @@ export const WithChanges = () => (
       numberDescription='plasser'
       time='2018'
       size='small'
-      icon={<HouseIcon alt='house' />}
+      icon={<HouseIcon />}
       changes={{
         changeDirection: 'down',
         changeText: 'Ned 1 prosentpoeng',
@@ -147,9 +139,25 @@ export const WithChanges = () => (
   </div>
 )
 
-WithChanges.story = {
-  name: 'With changes',
-}
+export const WithChangesAndScreenReaderOnlyText = () => (
+  <div>
+    <KeyFigures
+      number='789 398'
+      title={title}
+      numberDescription='husholdninger'
+      time='2018'
+      size='large'
+      icon={<HouseIcon />}
+      glossary={placeholderText}
+      changes={{
+        changeDirection: 'up',
+        changeText: '1,5%',
+        changePeriod: 'fra året før',
+        srChangeText: 'Oppgang 1,5% fra året før',
+      }}
+    />
+  </div>
+)
 
 export const GreenboxVariasjonMedium = () => (
   <KeyFigures
@@ -162,10 +170,6 @@ export const GreenboxVariasjonMedium = () => (
   />
 )
 
-GreenboxVariasjonMedium.story = {
-  name: 'Greenbox variasjon medium',
-}
-
 export const GreenboxVariasjonStor = () => (
   <KeyFigures
     title='Valgdeltagelse ved stortingsvalg'
@@ -176,7 +180,3 @@ export const GreenboxVariasjonStor = () => (
     greenBox
   />
 )
-
-GreenboxVariasjonStor.story = {
-  name: 'Greenbox variasjon stor',
-}