Mim 1968 adjust expansionbox (#1251)

* MIM-1968:Ajust spaceing

* Fixed tabbing in closed box

* Fixed focus

* Fixed sonarLink warnings

* Fixed max-height

* Remove overflow

* Bump version

lib/bundle.css

@@ -966,6 +966,11 @@ a {
 .ssb-expansion-box:has(.header:hover) {
   box-shadow: 0 0 0 1px #00824d;
 }
+.ssb-expansion-box:has(.header:focus-visible) {
+  outline: #9272fc solid 2px;
+  outline-offset: 2px;
+  border-radius: 8px;
+}
 .ssb-expansion-box .header {
   background-color: transparent;
   border: none;
@@ -981,6 +986,10 @@ a {
   cursor: pointer;
   display: flex;
 }
+.ssb-expansion-box .header:hover .icon-wrapper {
+  display: grid;
+  place-content: center;
+}
 .ssb-expansion-box .header:hover .icon-wrapper::before {
   height: 3rem;
   width: 3rem;
@@ -1026,7 +1035,7 @@ a {
 .ssb-expansion-box .header .icon {
   align-items: center;
   display: inline-flex;
-  margin-right: 1rem;
+  margin-right: 0.5rem;
 }
 .ssb-expansion-box .header .icon svg {
   height: 2rem;
@@ -1055,6 +1064,11 @@ a {
   opacity: 0;
   transition: max-height 0.5s, opacity 0.5s;
 }
+@media screen and (max-width: 767px) {
+  .ssb-expansion-box .content {
+    padding: 0 1.25rem;
+  }
+}
 .ssb-expansion-box.open:focus-within {
   outline: none;
 }
@@ -1066,20 +1080,14 @@ a {
 .ssb-expansion-box.open .content {
   max-height: 1000px;
   opacity: 1;
-  overflow-y: auto;
   padding: 0 4rem 2rem 2.5rem;
   transition: max-height 0.5s;
 }
 @media screen and (max-width: 767px) {
   .ssb-expansion-box.open .content {
-    padding: 0 1.25rem 1.25rem;
+    padding: 0 1.25rem;
   }
 }
-.ssb-expansion-box:focus-within {
-  outline: #9272fc solid 2px;
-  outline-offset: 2px;
-  border-radius: 8px;
-}
 .ssb-expansion-box.sneak-peek:not(.ssb-expansion-box.sneak-peek.open) {
   position: relative;
 }
@@ -1094,10 +1102,11 @@ a {
   transition: padding-bottom 0.5s;
 }
 .ssb-expansion-box.sneak-peek.open .header {
-  padding-bottom: 2.5rem;
+  padding-bottom: 1.7rem;
   transition: padding-bottom 0.5s;
 }
 .ssb-expansion-box.sneak-peek .content.closed {
+  display: block;
   position: relative;
   max-height: 5.5rem;
   opacity: 1;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.8",
+  "version": "2.2.9",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

src/components/ExpansionBox/ExpansionBox.tsx

@@ -12,29 +12,44 @@ export interface ExpansionBoxProps {
 }
 const ExpansionBox: React.FC<ExpansionBoxProps> = ({
   aiIcon = false,
-  className = '',
+  className,
   header = '',
   openByDefault = false,
   sneakPeek,
   text = '',
 }) => {
-  const [isOpen, toggleOpen] = useState(openByDefault)
+  const [isOpen, setIsOpen] = useState(openByDefault)
   const [maxHeight, setMaxHeight] = useState('')
   const contentRef = useRef<HTMLDivElement>(null)
+  const classNameList: string[] = [
+    'ssb-expansion-box',
+    className ?? '',
+    isOpen ? 'open' : '',
+    sneakPeek ? 'sneak-peek' : '',
+  ].filter(Boolean)
 
   useEffect(() => {
     if (contentRef.current) {
       const contentHeight = contentRef.current.scrollHeight
-      const maxHeightValue = contentHeight <= 1000 ? contentHeight + 10 : 1000
+      const maxHeightValue = contentHeight + 10
       setMaxHeight(isOpen ? `${maxHeightValue}px` : '')
+      const focusableElements = contentRef.current.querySelectorAll('button, a')
+
+      if (!isOpen) {
+        focusableElements.forEach((el) => {
+          el.setAttribute('tabindex', '-1')
+        })
+      } else {
+        focusableElements.forEach((el) => {
+          el.removeAttribute('tabindex')
+        })
+      }
     }
   }, [isOpen])
 
   return (
-    <div
-      className={`ssb-expansion-box${className ? ` ${className}` : ''}${isOpen ? ' open' : ''}${sneakPeek ? ` sneak-peek` : ''}`}
-    >
-      <button className='header' aria-expanded={isOpen ? 'true' : 'false'} onClick={() => toggleOpen(!isOpen)}>
+    <div className={classNameList.join(' ')}>
+      <button className='header' aria-expanded={isOpen ? 'true' : 'false'} onClick={() => setIsOpen(!isOpen)}>
         {aiIcon && (
           <div className='icon'>
             <SparklesIcon />

src/components/ExpansionBox/_expansion-box.scss

@@ -8,6 +8,11 @@
     box-shadow: 0 0 0 1px $ssb-green-4;
   }
 
+  &:has(.header:focus-visible) {
+    @include focus-ring;
+    border-radius: 8px;
+  }
+
   .header {
     @include reset-button;
     padding: 1.7rem 2.5rem;
@@ -17,6 +22,9 @@
 
     &:hover {
       .icon-wrapper {
+        display: grid;
+        place-content: center;
+
         &::before {
           height: 3rem;
           width: 3rem;
@@ -68,7 +76,7 @@
     .icon {
       align-items: center;
       display: inline-flex;
-      margin-right: 1rem;
+      margin-right: 0.5rem;
 
       svg {
         height: 2rem;
@@ -100,6 +108,10 @@
         max-height 0.5s,
         opacity 0.5s;
     }
+
+    @media #{$mobile} {
+      padding: 0 1.25rem;
+    }
   }
 
   &.open {
@@ -115,21 +127,15 @@
     .content {
       max-height: 1000px;
       opacity: 1;
-      overflow-y: auto;
       padding: 0 4rem 2rem 2.5rem;
       transition: max-height 0.5s;
 
       @media #{$mobile} {
-        padding: 0 1.25rem 1.25rem;
+        padding: 0 1.25rem;
       }
     }
   }
 
-  &:focus-within {
-    @include focus-ring;
-    border-radius: 8px;
-  }
-
   &.sneak-peek {
     &:not(&.open) {
       position: relative;
@@ -148,11 +154,12 @@
     }
 
     &.open .header {
-      padding-bottom: 2.5rem;
+      padding-bottom: 1.7rem;
       transition: padding-bottom 0.5s;
     }
 
     .content.closed {
+      display: block;
       position: relative;
       max-height: 5.5rem;
       opacity: 1;