Add aria-hidden column prop to Table

Author: Kubit

src/components/table/component/listColumnHeaderPriority.tsx

@@ -33,6 +33,7 @@ export const ListColumnHeaderPriority = (props: IListComponent): JSX.Element =>
             >
               {header.label && (
                 <ListHeaderItemStylesStyled
+                  aria-hidden={header.config?.['aria-hidden']}
                   customAlign={
                     header?.config?.alignHeader?.[props.device] || header?.config?.alignHeader
                   }

src/components/table/component/listRowHeaderPriority.tsx

@@ -71,6 +71,7 @@ export const ListRowHeaderPriority = (props: IListRowHeaderPriority): JSX.Elemen
               <li key={indexHeader}>
                 {header.label && (
                   <ListHeaderItemStylesStyled
+                    aria-hidden={header?.config?.['aria-hidden']}
                     customAlign={
                       header?.config?.alignHeader?.[props.device] || header?.config?.alignHeader
                     }

src/components/table/component/table.tsx

@@ -26,7 +26,7 @@ interface ITableComponent extends Omit<ITableStandAlone, 'headerVariant'> {
 }
 
 export const TableComponent = (
-  props: ITableComponent,
+  { ariaHiddenDividerColumn = true, ariaHiddenEmptyColumn = true, ...props }: ITableComponent,
   ref: React.ForwardedRef<HTMLTableElement> | undefined | null
 ): JSX.Element => {
   const ariaProps = pickAriaProps(props);
@@ -73,11 +73,15 @@ export const TableComponent = (
             styles={props.styles.header?.[props.headerVariant]}
           >
             {hasRowHeader && (
-              <TableEmptyColumnHeaderStyled styles={props.styles.header?.[props.headerVariant]} />
+              <TableEmptyColumnHeaderStyled
+                aria-hidden={ariaHiddenEmptyColumn}
+                styles={props.styles.header?.[props.headerVariant]}
+              />
             )}
             {hasSomeDividerContent && (
               <TableColumnHeaderStyled
                 key={'dividerContent'}
+                aria-hidden={ariaHiddenDividerColumn}
                 hasDivider={true}
                 scope="col"
                 styles={props.styles.header?.[props.headerVariant]}
@@ -96,6 +100,7 @@ export const TableComponent = (
               return (
                 <TableColumnHeaderStyled
                   key={headerValue.id}
+                  aria-hidden={headerValue.config?.['aria-hidden']}
                   customAlign={
                     headerValue?.config?.alignHeader?.[props.device] ||
                     headerValue?.config?.alignHeader

src/components/table/component/tableRow.tsx

@@ -62,6 +62,7 @@ export const TableRow = (props: ITableRow): JSX.Element => {
         <TableDivider divider={dividerValue()} styles={props.styles.divider} />
         {rowHeader && (
           <TableColumnHeaderStyled
+            aria-hidden={rowHeader.config?.['aria-hidden']}
             customAlign={
               rowHeader?.config?.alignHeader?.[props.device] || rowHeader?.config?.alignHeader
             }
@@ -87,6 +88,7 @@ export const TableRow = (props: ITableRow): JSX.Element => {
             return (
               <TableColumnBodyStyled
                 key={indexHeader}
+                aria-hidden={headerValue.config?.['aria-hidden']}
                 customAlign={
                   getCellTokenValue({ headerValue, token: 'align' }) ||
                   headerValue?.config?.alignValue?.[props.device] ||

src/components/table/stories/argtypes.ts

@@ -46,6 +46,30 @@ export const argtypes = (
         category: CATEGORY_CONTROL.CONTENT,
       },
     },
+    ariaHiddenDividerColumn: {
+      description: 'aria-hidden prop applied to divider column created when table has divider',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: true },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
+    ariaHiddenEmptyColumn: {
+      description: 'aria-hidden prop applied to empty column created when has row headers',
+      type: { name: 'boolean' },
+      control: { type: 'boolean' },
+      table: {
+        type: {
+          summary: 'boolean',
+        },
+        defaultValue: { summary: true },
+        category: CATEGORY_CONTROL.MODIFIERS,
+      },
+    },
     values: {
       description: 'Content of your table',
       type: { name: 'IValue[]', required: true },

src/components/table/types/table.ts

@@ -126,6 +126,7 @@ export type ConfigType = {
   srOnlyHeader?: boolean | SrOnlyHeaderType;
   flexWidth?: number | string | FlexWidthType;
   backgroundColor?: string;
+  ['aria-hidden']?: boolean;
 };
 
 export type ValueFunctionType = (
@@ -173,6 +174,8 @@ type TBodyScrollAriasType = {
  */
 export interface ITableStandAlone extends TableAriaAttributes {
   styles: TableRowHeaderTypes<string, string>;
+  ariaHiddenDividerColumn?: boolean;
+  ariaHiddenEmptyColumn?: boolean;
   lineSeparatorLineStyles: LineSeparatorLinePropsStylesType;
   lineSeparatorTopOnHeader?: boolean;
   lineSeparatorBottomOnHeader?: boolean;