diff --git a/src/components/form/Fieldset.test.tsx b/src/app-components/Label/Fieldset.test.tsx similarity index 53% rename from src/components/form/Fieldset.test.tsx rename to src/app-components/Label/Fieldset.test.tsx index 06acb1c33a..2b768d2cfd 100644 --- a/src/components/form/Fieldset.test.tsx +++ b/src/app-components/Label/Fieldset.test.tsx @@ -1,43 +1,48 @@ import React from 'react'; -import { screen } from '@testing-library/react'; +import { render, screen } from '@testing-library/react'; -import { Fieldset } from 'src/components/form/Fieldset'; -import { renderWithoutInstanceAndLayout } from 'src/test/renderWithProviders'; -import type { FieldsetProps } from 'src/components/form/Fieldset'; +import { Fieldset } from 'src/app-components/Label/Fieldset'; describe('Fieldset', () => { - const render = async (props?: Partial) => - await renderWithoutInstanceAndLayout({ - renderer: () => ( -
- ), - }); - it('renders with accessible legend', async () => { - await render(); + render(
); const fieldset = screen.getByRole('group', { name: /legend test/i }); expect(fieldset).toBeInTheDocument(); }); it('renders with accessible description', async () => { - await render(); + render( +
description test} + />, + ); + const description = screen.getByText('description test'); expect(description).toBeInTheDocument(); }); it('provides an optional indicator', async () => { - await render({ required: false, labelSettings: { optionalIndicator: true } }); + render( +
(valgfri)} + />, + ); const fieldset = screen.getByRole('group', { name: /legend test \(valgfri\)/i }); expect(fieldset).toBeInTheDocument(); }); it('provides an required indicator', async () => { - await render({ required: true }); + render( +
*} + />, + ); const fieldset = screen.getByRole('group', { name: /legend test \*/i }); expect(fieldset).toBeInTheDocument(); }); diff --git a/src/app-components/Label/Fieldset.tsx b/src/app-components/Label/Fieldset.tsx index 5e8bedfdfa..ca996c707c 100644 --- a/src/app-components/Label/Fieldset.tsx +++ b/src/app-components/Label/Fieldset.tsx @@ -9,9 +9,9 @@ import type { LabelProps as DesignsystemetLabelProps } from '@digdir/designsyste import labelClasses from 'src/app-components/Label/Label.module.css'; import type { GridSize } from 'src/app-components/Label/types'; -type FieldsetProps = { +export type FieldsetProps = { id?: string; - legend: string | undefined; + legend: string | ReactElement | undefined; className?: string; grid?: GridSize; optionalIndicator?: ReactElement; diff --git a/src/app-components/Label/Label.tsx b/src/app-components/Label/Label.tsx index acc8506f84..a2ca659ae2 100644 --- a/src/app-components/Label/Label.tsx +++ b/src/app-components/Label/Label.tsx @@ -11,28 +11,28 @@ import type { GridSize } from 'src/app-components/Label/types'; type LabelProps = { label: string | undefined; + htmlFor?: DesignsystemetLabelProps['htmlFor']; + required?: boolean; + requiredIndicator?: JSX.Element; optionalIndicator?: ReactElement; help?: ReactElement; description?: ReactElement; className?: string; grid?: GridSize; - required?: boolean; - requiredIndicator?: JSX.Element; - htmlFor?: DesignsystemetLabelProps['htmlFor']; style?: DesignsystemetLabelProps['style']; }; export function Label({ label, + htmlFor, required, requiredIndicator, optionalIndicator, help, description, - htmlFor, - style, className, grid, + style, children, }: PropsWithChildren) { if (!label) { diff --git a/src/components/form/Fieldset.tsx b/src/components/form/Fieldset.tsx deleted file mode 100644 index 6ce536cc6e..0000000000 --- a/src/components/form/Fieldset.tsx +++ /dev/null @@ -1,69 +0,0 @@ -import React from 'react'; -import type { HTMLAttributes } from 'react'; - -import { Fieldset as DSFieldset } from '@digdir/designsystemet-react'; - -import { Description } from 'src/components/form/Description'; -import classes from 'src/components/form/Fieldset.module.css'; -import { HelpTextContainer } from 'src/components/form/HelpTextContainer'; -import { OptionalIndicator } from 'src/components/form/OptionalIndicator'; -import { RequiredIndicator } from 'src/components/form/RequiredIndicator'; -import { useLanguage } from 'src/features/language/useLanguage'; -import type { ILabelSettings } from 'src/layout/common.generated'; - -export type FieldsetProps = { - legend?: React.ReactNode; - description?: React.ReactNode; - helpText?: React.ReactNode; - required?: boolean; - labelSettings?: ILabelSettings; -} & HTMLAttributes; - -export const Fieldset = ({ - legend, - description, - helpText, - required, - labelSettings, - children, - id, - ...rest -}: FieldsetProps) => { - const { elementAsString } = useLanguage(); - const legendAsText = elementAsString(legend); - return ( - - {legend} - - - {helpText && ( - - )} - - } - description={ - description ? ( - - ) : undefined - } - {...rest} - > - {children} - - ); -}; diff --git a/src/layout/Grid/GridComponent.tsx b/src/layout/Grid/GridComponent.tsx index 6fd7995d32..ca3aa0fa29 100644 --- a/src/layout/Grid/GridComponent.tsx +++ b/src/layout/Grid/GridComponent.tsx @@ -4,9 +4,9 @@ import type { PropsWithChildren } from 'react'; import { Table } from '@digdir/designsystemet-react'; import cn from 'classnames'; +import { Fieldset } from 'src/app-components/Label/Fieldset'; import { ConditionalWrapper } from 'src/components/ConditionalWrapper'; import { Caption } from 'src/components/form/caption/Caption'; -import { Fieldset } from 'src/components/form/Fieldset'; import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper'; import { HelpTextContainer } from 'src/components/form/HelpTextContainer'; import { LabelContent } from 'src/components/label/LabelContent'; @@ -26,6 +26,7 @@ import { getColumnStyles } from 'src/utils/formComponentUtils'; import { BaseLayoutNode } from 'src/utils/layout/LayoutNode'; import { LayoutPage } from 'src/utils/layout/LayoutPage'; import { Hidden, useNode } from 'src/utils/layout/NodesContext'; +import { useLabel } from 'src/utils/layout/useLabel'; import { useNodeItem } from 'src/utils/layout/useNodeItem'; import type { PropsFromGenericComponent } from 'src/layout'; import type { ITableColumnFormatting, ITableColumnProperties } from 'src/layout/common.generated'; @@ -287,19 +288,19 @@ function CellWithLabel({ className, columnStyleOptions, labelFrom, isHeader = fa ); } -function MobileGrid({ node }: PropsFromGenericComponent<'Grid'>) { - const { textResourceBindings, id, labelSettings } = useNodeItem(node); - const { title, description, help } = textResourceBindings ?? {}; +function MobileGrid({ node, overrideDisplay }: PropsFromGenericComponent<'Grid'>) { + const { id } = useNodeItem(node); const nodeIds = useNodeIdsFromGrid(node); const isHidden = Hidden.useIsHiddenSelector(); + const { labelText, getDescriptionComponent, getHelpTextComponent } = useLabel({ node, overrideDisplay }); + return (
} - description={title && } - helpText={help} - labelSettings={labelSettings} + legend={labelText} + description={getDescriptionComponent()} + help={getHelpTextComponent()} className={css.mobileFieldset} > {nodeIds diff --git a/src/layout/Group/GroupComponent.tsx b/src/layout/Group/GroupComponent.tsx index e443c114eb..b81b8e638f 100644 --- a/src/layout/Group/GroupComponent.tsx +++ b/src/layout/Group/GroupComponent.tsx @@ -4,8 +4,9 @@ import type { JSX } from 'react'; import { Heading } from '@digdir/designsystemet-react'; import cn from 'classnames'; +import { Fieldset } from 'src/app-components/Label/Fieldset'; import { ConditionalWrapper } from 'src/components/ConditionalWrapper'; -import { Fieldset } from 'src/components/form/Fieldset'; +import { Description } from 'src/components/form/Description'; import { FullWidthWrapper } from 'src/components/form/FullWidthWrapper'; import { Lang } from 'src/features/language/Lang'; import classes from 'src/layout/Group/GroupComponent.module.css'; @@ -65,31 +66,28 @@ export function GroupComponent({ condition={isPanel && !isSummary} wrapper={(child) => {child}} > - {/* If the group does not have a legend, we don't want to render the Fieldset because it breaks WCAG tests*/} - ( -
- - - ) - } - className={cn({ - [classes.summary]: isSummary, - [classes.group]: !isSummary, - [classes.panel]: isPanel && !isSummary, - })} - description={description && !isSummary && } - > - {child} -
- )} +
+ + + ) + } + className={cn({ + [classes.summary]: isSummary, + [classes.group]: !isSummary, + [classes.panel]: isPanel && !isSummary, + })} + description={ + + } >
{children.map((n) => renderLayoutNode(n))}
- +
); } diff --git a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx index b2a8c7bd84..931fb87b09 100644 --- a/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx +++ b/src/layout/Likert/Summary/LargeLikertSummaryContainer.tsx @@ -3,7 +3,7 @@ import type { JSX } from 'react'; import { Heading } from '@digdir/designsystemet-react'; -import { Fieldset } from 'src/components/form/Fieldset'; +import { Fieldset } from 'src/app-components/Label/Fieldset'; import { Lang } from 'src/features/language/Lang'; import classes from 'src/layout/Likert/Summary/LikertSummaryComponent.module.css'; import { Hidden } from 'src/utils/layout/NodesContext';