feat(a11y): add labels and roles [EE-6717] (#11181)

app/react/components/datatables/Datatable.tsx

@@ -188,6 +188,7 @@ export function Datatable<D extends DefaultType>({
         isLoading={isLoading}
         onSortChange={handleSortChange}
         data-cy={dataCy}
+        aria-label={`${title} table`}
       />
 
       <DatatableFooter

app/react/components/datatables/DatatableContent.tsx

@@ -11,6 +11,7 @@ interface Props<D extends DefaultType> extends AutomationTestingProps {
   onSortChange?(colId: string, desc: boolean): void;
   isLoading?: boolean;
   emptyContentLabel?: string;
+  'aria-label'?: string;
 }
 
 export function DatatableContent<D extends DefaultType>({
@@ -20,12 +21,13 @@ export function DatatableContent<D extends DefaultType>({
   isLoading,
   emptyContentLabel,
   'data-cy': dataCy,
+  'aria-label': ariaLabel,
 }: Props<D>) {
   const headerGroups = tableInstance.getHeaderGroups();
   const pageRowModel = tableInstance.getPaginationRowModel();
 
   return (
-    <Table data-cy={dataCy} className="nowrap-cells">
+    <Table data-cy={dataCy} className="nowrap-cells" aria-label={ariaLabel}>
       <thead>
         {headerGroups.map((headerGroup) => (
           <Table.HeaderRow<D>

app/react/components/datatables/NestedDatatable.tsx

@@ -28,6 +28,8 @@ interface Props<D extends DefaultType> {
    * keyword to filter by
    */
   search?: string;
+
+  'aria-label'?: string;
 }
 
 export function NestedDatatable<D extends DefaultType>({
@@ -39,6 +41,7 @@ export function NestedDatatable<D extends DefaultType>({
   isLoading,
   initialSortBy,
   search,
+  'aria-label': ariaLabel,
 }: Props<D>) {
   const tableInstance = useReactTable<D>({
     columns,
@@ -70,6 +73,7 @@ export function NestedDatatable<D extends DefaultType>({
           isLoading={isLoading}
           emptyContentLabel={emptyContentLabel}
           renderRow={(row) => <Table.Row<D> cells={row.getVisibleCells()} />}
+          aria-label={ariaLabel}
         />
       </Table.Container>
     </NestedTable>

app/react/components/datatables/SearchBar.tsx

@@ -42,6 +42,7 @@ export function SearchBar({
         onChange={(e) => setSearchValue(e.target.value)}
         placeholder={placeholder}
         data-cy={dataCy}
+        aria-label="Search input"
       />
       {children}
       <Button onClick={onClear} icon={X} color="none" disabled={!searchValue} />

app/react/components/datatables/Table.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { PropsWithChildren } from 'react';
+import { AriaAttributes, PropsWithChildren } from 'react';
 
 import { AutomationTestingProps } from '@/types';
 
@@ -14,23 +14,21 @@ import { TableHeaderCell } from './TableHeaderCell';
 import { TableHeaderRow } from './TableHeaderRow';
 import { TableRow } from './TableRow';
 
-interface Props extends AutomationTestingProps {
+interface Props extends AutomationTestingProps, AriaAttributes {
   className?: string;
 }
 
 function MainComponent({
   children,
   className,
-  'data-cy': dataCy,
+  ...props
 }: PropsWithChildren<Props>) {
   return (
     <div className="table-responsive">
       <table
-        data-cy={dataCy}
-        className={clsx(
-          'table-hover table-filters nowrap-cells table',
-          className
-        )}
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        {...props}
+        className={clsx('table-hover table-filters table', className)}
       >
         {children}
       </table>

app/react/components/datatables/TableTitle.tsx

@@ -23,7 +23,7 @@ export function TableTitle({
     <>
       <div className={clsx('toolBar flex-col', className)} id={id}>
         <div className="flex w-full items-center gap-1 p-0">
-          <div className="toolBarTitle">
+          <h2 className="toolBarTitle m-0 text-2xl">
             {icon && (
               <div className="widget-icon">
                 <Icon icon={icon} className="space-right" />
@@ -31,7 +31,7 @@ export function TableTitle({
             )}
 
             {label}
-          </div>
+          </h2>
           {children}
         </div>
       </div>

app/react/components/datatables/expand-column.tsx

@@ -17,6 +17,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
             onClick={table.getToggleAllRowsExpandedHandler()}
             color="none"
             icon={table.getIsAllRowsExpanded() ? ChevronDown : ChevronUp}
+            title="Expand all"
           />
         )
       );
@@ -32,6 +33,7 @@ export function buildExpandColumn<T extends DefaultType>(): ColumnDef<T> {
           }}
           color="none"
           icon={row.getIsExpanded() ? ChevronDown : ChevronUp}
+          title={row.getIsExpanded() ? 'Collapse' : 'Expand'}
         />
       ),
     enableColumnFilter: false,