[Backport] fix: make voicover read title and description out of the table

src/app-components/Table/Table.tsx

@@ -33,6 +33,8 @@ interface DataTableProps<T> {
   schema?: JSONSchema7;
   columns: Column<T>[];
   caption?: React.ReactNode;
+  ariaLabel?: string;
+  tableTestId?: string;
   actionButtons?: TableActionButton<T>[];
   actionButtonHeader?: React.ReactNode;
   mobile?: boolean;
@@ -73,6 +75,8 @@ function formatValue(value: FormDataValue): string {
 
 export function AppTable<T>({
   caption,
+  ariaLabel,
+  tableTestId,
   data,
   columns,
   actionButtons,
@@ -93,6 +97,8 @@ export function AppTable<T>({
       className={cn(classes.table, tableClassName, { [classes.mobileTable]: mobile })}
       zebra={zebra}
       stickyHeader={stickyHeader}
+      aria-label={ariaLabel}
+      data-testid={tableTestId}
     >
       {caption}
       <Table.Head>

src/layout/SigningDocumentList/SigningDocumentListComponent.module.css

@@ -0,0 +1,6 @@
+.downloadLink {
+  display: flex;
+  gap: 0.5rem;
+  white-space: nowrap;
+  text-decoration: none;
+}

src/layout/SigningDocumentList/SigningDocumentListComponent.test.tsx

@@ -29,6 +29,10 @@ const mockDocumentList: SigningDocument[] = [
 
 jest.mock('src/utils/layout/useNodeItem', () => ({}));
 
+jest.mock('src/utils/layout/DataModelLocation', () => ({
+  useIndexedId: (baseId: string) => baseId,
+}));
+
 jest.mock('react-router-dom', () => ({
   useParams: jest.fn(() => ({
     partyId: 'partyId',
@@ -65,6 +69,7 @@ jest.mock('src/layout/SigningDocumentList/SigningDocumentListError', () => ({
 
 describe('SigningDocumentList', () => {
   const mockedUseDocumentList = jest.mocked(useDocumentList);
+  const baseComponentId = 'signing-document-list';
 
   const textResourceBindings: ITextResourceBindings<'SigningDocumentList'> = {
     title: 'Signing Document List',
@@ -84,12 +89,23 @@ describe('SigningDocumentList', () => {
   });
 
   it('should render correctly', () => {
-    render(<SigningDocumentListComponent textResourceBindings={textResourceBindings} />);
+    render(
+      <SigningDocumentListComponent
+        baseComponentId={baseComponentId}
+        textResourceBindings={textResourceBindings}
+      />,
+    );
+
+    screen.getByRole('heading', { name: /Signing Document List/ });
+    screen.getByText('description');
+    expect(screen.queryByRole('caption')).not.toBeInTheDocument();
 
     screen.getByRole('table', { name: /Signing Document List/ });
+    expect(screen.getByTestId('signing-document-list')).toHaveAttribute('aria-label', 'Signing Document List');
     screen.getByRole('columnheader', { name: 'signing_document_list.header_filename' });
     screen.getByRole('columnheader', { name: 'signing_document_list.header_attachment_type' });
     screen.getByRole('columnheader', { name: 'signing_document_list.header_size' });
+    screen.getByRole('columnheader', { name: 'signing_document_list.download' });
 
     expect(screen.getAllByRole('columnheader')).toHaveLength(4);
 
@@ -106,7 +122,12 @@ describe('SigningDocumentList', () => {
       error: new Error('API error'),
     } as unknown as ReturnType<typeof useDocumentList>);
 
-    render(<SigningDocumentListComponent textResourceBindings={textResourceBindings} />);
+    render(
+      <SigningDocumentListComponent
+        baseComponentId={baseComponentId}
+        textResourceBindings={textResourceBindings}
+      />,
+    );
 
     screen.getByText('API error');
   });
@@ -118,8 +139,14 @@ describe('SigningDocumentList', () => {
       error: null,
     } as unknown as ReturnType<typeof useDocumentList>);
 
-    render(<SigningDocumentListComponent textResourceBindings={textResourceBindings} />);
+    render(
+      <SigningDocumentListComponent
+        baseComponentId={baseComponentId}
+        textResourceBindings={textResourceBindings}
+      />,
+    );
 
+    screen.getByRole('heading', { name: /Signing Document List/ });
     screen.getByRole('table', { name: /Signing Document List/ });
     screen.getByRole('columnheader', { name: 'signing_document_list.header_filename' });
     screen.getByRole('columnheader', { name: 'signing_document_list.header_attachment_type' });

src/layout/SigningDocumentList/SigningDocumentListComponent.tsx

@@ -1,29 +1,37 @@
 import React from 'react';
 import { useParams } from 'react-router-dom';
 
-import { Link } from '@digdir/designsystemet-react';
+import { Heading, Link } from '@digdir/designsystemet-react';
 import { DownloadIcon } from '@navikt/aksel-icons';
 
 import { AppTable } from 'src/app-components/Table/Table';
-import { Caption } from 'src/components/form/caption/Caption';
+import captionClasses from 'src/components/form/caption/Caption.module.css';
+import { Description } from 'src/components/form/Description';
+import { HelpTextContainer } from 'src/components/form/HelpTextContainer';
 import { useApplicationMetadata } from 'src/features/applicationMetadata/ApplicationMetadataProvider';
 import { Lang } from 'src/features/language/Lang';
 import { useLanguage } from 'src/features/language/useLanguage';
 import { getFileEnding, removeFileEnding } from 'src/layout/FileUpload/utils/fileEndings';
 import classes from 'src/layout/SigneeList/SigneeListComponent.module.css';
 import { useDocumentList } from 'src/layout/SigningDocumentList/api';
+import downloadClasses from 'src/layout/SigningDocumentList/SigningDocumentListComponent.module.css';
 import { SigningDocumentListError } from 'src/layout/SigningDocumentList/SigningDocumentListError';
+import utilClasses from 'src/styles/utils.module.css';
 import { getSizeWithUnit } from 'src/utils/attachmentsUtils';
+import { useIndexedId } from 'src/utils/layout/DataModelLocation';
 import type { ITextResourceBindings } from 'src/layout/layout';
 
 export function SigningDocumentListComponent({
+  baseComponentId,
   textResourceBindings,
 }: {
+  baseComponentId: string;
   textResourceBindings: ITextResourceBindings<'SigningDocumentList'>;
 }) {
   const { instanceOwnerPartyId, instanceGuid } = useParams();
   const { langAsString } = useLanguage();
   const { altinnNugetVersion } = useApplicationMetadata();
+  const componentId = useIndexedId(baseComponentId);
 
   const { data, isLoading, error } = useDocumentList(instanceOwnerPartyId, instanceGuid, altinnNugetVersion);
 
@@ -32,66 +40,84 @@ export function SigningDocumentListComponent({
   }
 
   return (
-    <AppTable
-      size='md'
-      isLoading={isLoading}
-      headerClassName={classes.header}
-      tableClassName={classes.table}
-      data={data ?? []}
-      emptyText={<Lang id='general.empty_table' />}
-      caption={
-        textResourceBindings?.title ? (
-          <Caption
-            title={<Lang id={textResourceBindings?.title} />}
-            description={textResourceBindings?.description && <Lang id={textResourceBindings?.description} />}
-            helpText={textResourceBindings?.help ? { text: textResourceBindings?.help } : undefined}
-            designSystemLabelProps={{ 'data-size': 'lg' }}
-          />
-        ) : undefined
-      }
-      columns={[
-        {
-          header: langAsString('signing_document_list.header_filename'),
-          accessors: [],
-          renderCell: (_, rowData) => (
-            <Link
-              href={rowData.url}
-              rel='noopener noreferrer'
-              title={rowData.filename}
-            >
-              <span className={classes.nameWrapper}>
-                <span className={classes.truncate}>{removeFileEnding(rowData.filename)}</span>
-                <span className={classes.extension}>{getFileEnding(rowData.filename)}</span>
-              </span>
-            </Link>
-          ),
-        },
-        {
-          header: langAsString('signing_document_list.header_attachment_type'),
-          accessors: [],
-          renderCell: (_, rowData) => rowData.attachmentTypes.map((it) => langAsString(it)).join(', '),
-        },
-        {
-          header: langAsString('signing_document_list.header_size'),
-          accessors: [],
-          renderCell: (_, rowData) => getSizeWithUnit(rowData.size),
-        },
-        {
-          header: null,
-          ariaLabel: langAsString('signing_document_list.download'),
-          accessors: [],
-          renderCell: (_, rowData) => (
-            <Link
-              href={rowData.url}
-              style={{ display: 'flex', gap: '0.5rem', whiteSpace: 'nowrap', textDecoration: 'none' }}
-              download
-            >
-              {langAsString('signing_document_list.download')}
-              <DownloadIcon fontSize='1.5rem' />
-            </Link>
-          ),
-        },
-      ]}
-    />
+    <>
+      {textResourceBindings?.title && (
+        <div className={captionClasses.tableCaption}>
+          <Heading
+            level={3}
+            data-size='sm'
+          >
+            <Lang id={textResourceBindings.title} />
+          </Heading>
+          {textResourceBindings.description && (
+            <Description
+              className={captionClasses.description}
+              componentId={componentId}
+              description={<Lang id={textResourceBindings.description} />}
+            />
+          )}
+          {textResourceBindings.help && (
+            <HelpTextContainer
+              id={componentId}
+              helpText={<Lang id={textResourceBindings.help} />}
+            />
+          )}
+        </div>
+      )}
+      <AppTable
+        size='md'
+        isLoading={isLoading}
+        headerClassName={classes.header}
+        tableClassName={classes.table}
+        tableTestId={baseComponentId}
+        ariaLabel={textResourceBindings?.title ? langAsString(textResourceBindings.title) : undefined}
+        data={data ?? []}
+        emptyText={<Lang id='general.empty_table' />}
+        columns={[
+          {
+            header: langAsString('signing_document_list.header_filename'),
+            accessors: [],
+            renderCell: (_, rowData) => (
+              <Link
+                href={rowData.url}
+                rel='noopener noreferrer'
+                title={rowData.filename}
+              >
+                <span className={classes.nameWrapper}>
+                  <span className={classes.truncate}>{removeFileEnding(rowData.filename)}</span>
+                  <span className={classes.extension}>{getFileEnding(rowData.filename)}</span>
+                </span>
+              </Link>
+            ),
+          },
+          {
+            header: langAsString('signing_document_list.header_attachment_type'),
+            accessors: [],
+            renderCell: (_, rowData) => rowData.attachmentTypes.map((it) => langAsString(it)).join(', '),
+          },
+          {
+            header: langAsString('signing_document_list.header_size'),
+            accessors: [],
+            renderCell: (_, rowData) => getSizeWithUnit(rowData.size),
+          },
+          {
+            header: (
+              <span className={utilClasses.visuallyHidden}>{langAsString('signing_document_list.download')}</span>
+            ),
+            accessors: [],
+            renderCell: (_, rowData) => (
+              <Link
+                href={rowData.url}
+                className={downloadClasses.downloadLink}
+                download
+              >
+                {langAsString('signing_document_list.download')}
+                <DownloadIcon fontSize='1.5rem' />
+              </Link>
+            ),
+          },
+        ]}
+      />
+    </>
   );
 }

src/layout/SigningDocumentList/index.tsx

@@ -13,7 +13,12 @@ export class SigningDocumentList extends SigningDocumentListDef {
   render = forwardRef<HTMLElement, PropsFromGenericComponent<'SigningDocumentList'>>(
     function SigningDocumentListComponentRender(props, _): JSX.Element | null {
       const { textResourceBindings } = useItemWhenType(props.baseComponentId, 'SigningDocumentList');
-      return <SigningDocumentListComponent textResourceBindings={textResourceBindings} />;
+      return (
+        <SigningDocumentListComponent
+          baseComponentId={props.baseComponentId}
+          textResourceBindings={textResourceBindings}
+        />
+      );
     },
   );
 
@@ -30,6 +35,7 @@ export class SigningDocumentList extends SigningDocumentListDef {
         content={SummaryContains.SomeUserContent}
       >
         <SigningDocumentListComponent
+          baseComponentId={targetBaseComponentId}
           textResourceBindings={{
             ...textResourceBindings,
             title: