Merge pull request #2113 from statisticsnorway/MIMIR-1870_tabs-unique-id

Add unique id to tabs so aria-controls in tab component points to cor…
statisticsnorway · Sep 28, 2023 · 8ed7f8f · 8ed7f8f
2 parents c6bfb1f + 2c0919b
commit 8ed7f8f
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -76,7 +76,7 @@
     "@item-enonic-types/lib-thymeleaf": "^2.1.0",
     "@item-enonic-types/lib-time": "^1.0.3",
     "@reduxjs/toolkit": "^1.9.5",
-    "@statisticsnorway/ssb-component-library": "^2.0.93",
+    "@statisticsnorway/ssb-component-library": "^2.0.94",
     "@types/ramda": "~0.29.1",
     "@types/react": "^18.2.14",
     "@types/uuid": "^9.0.0",

diff --git a/src/main/resources/site/parts/staticVisualization/staticVisualization.jsx b/src/main/resources/site/parts/staticVisualization/staticVisualization.jsx
@@ -42,6 +42,7 @@ function StaticVisualization(props) {
     return (
       <React.Fragment>
         <Tabs
+          id={props.id}
           className='pl-4'
           activeOnInit='figure'
           onClick={tabClicked}
@@ -142,12 +143,16 @@ function StaticVisualization(props) {
             </figcaption>
             {renderTabs()}
             {activeTab === 'figure' && (
-              <div className='static-visualization-chart'>
+              <div className='static-visualization-chart' id={`tabpanel-0-${props.id}`}>
                 <img alt={props.altText} src={props.imageSrc} />
               </div>
             )}
 
-            {activeTab === 'table' && <div className='static-visualization-data'>{createTable()}</div>}
+            {activeTab === 'table' && (
+              <div id={`tabpanel-1-${props.id}`} className='static-visualization-data'>
+                {createTable()}
+              </div>
+            )}
 
             <FactBox header={props.descriptionStaticVisualization} text={renderLongDescriptionAndSources()} />
           </figure>