Merge pull request #2035 from SpareBank1/Tooltip-legend-uu-fix

fix(ffe-form-react): Fikse div med tooltip inne i fieldset legend
SpareBank1 · May 24, 2024 · f7c8549 · f7c8549
2 parents d4c50d1 + fc9559e
commit f7c8549
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/packages/ffe-form-react/src/RadioButtonInputGroup.spec.tsx b/packages/ffe-form-react/src/RadioButtonInputGroup.spec.tsx
@@ -58,7 +58,7 @@ describe('<RadioButtonInputGroup />', () => {
             const { container } = renderRadioButtonInputGroup({
                 label: 'Test label',
             });
-            const legend = container.querySelector('legend');
+            const legend = container.querySelector('.ffe-form-label');
             expect(legend?.textContent).toBe('Test label');
         });
         it('does not render a legend if not set', () => {

diff --git a/packages/ffe-form-react/src/RadioButtonInputGroup.tsx b/packages/ffe-form-react/src/RadioButtonInputGroup.tsx
@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
 import { ErrorFieldMessage } from './message';
 import { Tooltip } from './Tooltip';
+import { v4 as uuid } from 'uuid';
 
 export interface RadioButtonInputGroupProps
     extends Omit<
@@ -73,9 +74,11 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
             'Don\'t use both "tooltip" and "description" on an <RadioButtonInputGroup />, pick one of them',
         );
     }
+    const id = useRef(uuid()).current;
 
     return (
         <fieldset
+            aria-labelledby={id}
             className={classNames(
                 'ffe-input-group',
                 { 'ffe-input-group--no-extra-margin': !extraMargin },
@@ -85,7 +88,8 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
             {...rest}
         >
             {label && (
-                <legend
+                <div
+                    id={id}
                     className={classNames(
                         'ffe-form-label',
                         'ffe-form-label--block',
@@ -96,7 +100,7 @@ export const RadioButtonInputGroup: React.FC<RadioButtonInputGroupProps> = ({
                         <Tooltip>{tooltip}</Tooltip>
                     )}
                     {React.isValidElement(tooltip) && tooltip}
-                </legend>
+                </div>
             )}
 
             {typeof description === 'string' ? (