fix: fixed Table aria-level bug when children data is empty #2359 (#2428

) Co-authored-by: shijia.me <shijia.me@bytedance.com>
DouyinFE · Aug 19, 2024 · ac7ee98 · ac7ee98
1 parent dd41595
commit ac7ee98
Show file tree

Hide file tree

Showing 8 changed files with 55 additions and 18 deletions.
diff --git a/cypress/e2e/table.spec.js b/cypress/e2e/table.spec.js
@@ -316,4 +316,9 @@ describe('table', () => {
         cy.get('.test-th').should('have.attr', 'style').should('contain', 'background: blue');
         cy.get('.test-td').should('have.attr', 'style').should('contain', 'background: red');
     });
+
+    it('test aria-level when children is empty', () => {
+        cy.visit('http://localhost:6006/iframe.html?args=&id=table--fixed-aria-level&viewMode=story');
+        cy.get('.semi-table-tbody .semi-table-row').eq(0).should('have.attr', 'aria-level', '1');
+    });
 });
diff --git a/packages/semi-ui/table/Body/BaseRow.tsx b/packages/semi-ui/table/Body/BaseRow.tsx
@@ -371,16 +371,9 @@ export default class TableRow extends BaseComponent<BaseRowProps, Record<string,
         if (expandableRow) {
             ariaProps['aria-expanded'] = expanded;
         }
-        // if row is expandedRow, set it's level to 2 
-        if (expanded || expandedRow) {
-            ariaProps['aria-level'] = 2;
-        }
         if (typeof level === 'number') {
             ariaProps['aria-level'] = level + 1;
         }
-        if (isSection) {
-            ariaProps['aria-level'] = 1;
-        }
 
         return (
             <BodyRow

diff --git a/packages/semi-ui/table/Body/ExpandedRow.tsx b/packages/semi-ui/table/Body/ExpandedRow.tsx
@@ -30,8 +30,9 @@ export interface TableExpandedRowProps {
     renderExpandIcon?: (record?: Record<string, any>, isNested?: boolean) => ReactNode | null;
     store?: Store;
     style?: React.CSSProperties;
-    virtualized?: Virtualized
+    virtualized?: Virtualized;
     displayNone?: boolean;
+    level?: number
 }
 
 /**
@@ -62,6 +63,7 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
         store: PropTypes.object,
         style: PropTypes.object,
         virtualized: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
+        level: PropTypes.number,
     };
     static defaultProps = {
         record: {},
@@ -86,7 +88,8 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
             virtualized,
             indentSize,
             cellWidths,
-            displayNone
+            displayNone,
+            level
         } = this.props;
         const { tableWidth, anyColumnFixed, getCellWidths } = this.context;
         const cell: ExpandedRowRenderReturnType = expandedRowRender(record, index, expanded);
@@ -150,6 +153,7 @@ export default class TableExpandedRow extends PureComponent<TableExpandedRowProp
                 indentSize={indentSize}
                 cellWidths={baseRowCellWidths}
                 displayNone={displayNone}
+                level={level}
             />
         );
     }

diff --git a/packages/semi-ui/table/Body/SectionRow.tsx b/packages/semi-ui/table/Body/SectionRow.tsx
@@ -37,7 +37,8 @@ export interface SectionRowProps {
     renderExpandIcon?: (record: Record<string, any>, isNested: boolean, groupKey: string | number) => ReactNode | null;
     className?: string;
     store?: Store;
-    rowKey?: RowKey<any>
+    rowKey?: RowKey<any>;
+    level?: number
 }
 
 /**
@@ -63,6 +64,7 @@ export const sectionRowPropTypes = {
     className: PropTypes.string,
     store: PropTypes.object,
     rowKey: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.func]),
+    level: PropTypes.number,
 };
 
 /**
@@ -151,6 +153,7 @@ class SectionRow extends PureComponent<SectionRowProps> {
             groupKey,
             virtualized,
             style,
+            level
         } = this.props;
 
         const props: { colSpan?: number } = {};
@@ -188,6 +191,7 @@ class SectionRow extends PureComponent<SectionRowProps> {
                 expanded={expanded}
                 expandIcon
                 isSection
+                level={level}
                 record={record}
                 replaceClassName={rowCls}
                 expandableRow

diff --git a/packages/semi-ui/table/Body/index.tsx b/packages/semi-ui/table/Body/index.tsx
@@ -494,7 +494,8 @@ class Body extends BaseComponent<BodyProps, BodyState> {
             index,
             rowKey,
             virtualized,
-            displayNone
+            displayNone,
+            level
         } = props;
         let key = getRecordKey(record, rowKey);
 
@@ -524,6 +525,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 key={genExpandedRowKey(key)}
                 cellWidths={this.cellWidths}
                 displayNone={displayNone}
+                level={level}
             />
         );
     };
@@ -561,17 +563,14 @@ class Body extends BaseComponent<BodyProps, BodyState> {
         const expandable = rowExpandable && rowExpandable(record);
 
         const expandableProps: {
-            level?: number;
             expanded?: boolean;
             expandableRow?: boolean;
             onRowClick?: (...args: any[]) => void
         } = {
-            level: undefined,
             expanded,
         };
 
         if (expandable || expandBtnShouldInRow) {
-            expandableProps.level = level;
             expandableProps.expandableRow = expandable;
             if (expandRowByClick) {
                 expandableProps.onRowClick = this.handleRowClick;
@@ -639,6 +638,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                     group,
                     groupKey,
                     expanded,
+                    level: 0,
                 })
             );
 
@@ -657,7 +657,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 /**
                  * Render the contents of the group row
                  */
-                renderedRows.push(this.renderBodyRows(dataInGroup, undefined, [], !expanded));
+                renderedRows.push(this.renderBodyRows(dataInGroup, 1, [], !expanded));
             }
         });
 
@@ -708,7 +708,7 @@ class Body extends BaseComponent<BodyProps, BodyState> {
                 const currentExpandRow = this.renderExpandedRow({
                     ...this.props,
                     columns: flattenedColumns,
-                    level,
+                    level: level + 1,
                     index,
                     record,
                     expanded,
@@ -862,5 +862,6 @@ export interface RenderSectionRowProps {
     group?: any;
     groupKey: string | number;
     index?: number;
-    expanded?: boolean
+    expanded?: boolean;
+    level?: number
 }
diff --git a/packages/semi-ui/table/_story/table.stories.jsx b/packages/semi-ui/table/_story/table.stories.jsx
@@ -118,7 +118,8 @@ export {
     DndKitDrag,
     FixedOnGroupedRowClassName,
     FixedVirtualizedRef,
-    RowSelectionOnCell
+    RowSelectionOnCell,
+    FixedAriaLevel
 } from './v2';
 export { default as FixSelectAll325 } from './Demos/rowSelection';
 

diff --git a/packages/semi-ui/table/_story/v2/FixedAriaLevel/index.tsx b/packages/semi-ui/table/_story/v2/FixedAriaLevel/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Table } from '@douyinfe/semi-ui';
+
+export default function App() {
+    return (
+        <Table
+            rowKey="key"
+            columns={[
+                {
+                    title: '标题',
+                    width: 500,
+                    dataIndex: 'name',
+                },
+            ]}
+            dataSource={[
+                {
+                    key: '112',
+                    name: 'Semi Design 设计稿.fig',
+                    size: '2M',
+                    owner: '姜鹏志',
+                    updateTime: '2020-02-02 05:13',
+                },
+            ]}
+            expandAllRows
+            pagination={false}
+        />
+    );
+}
diff --git a/packages/semi-ui/table/_story/v2/index.js b/packages/semi-ui/table/_story/v2/index.js
@@ -38,3 +38,4 @@ export { default as DndKitDrag } from './DndKitDrag';
 export { default as FixedOnGroupedRowClassName } from './FixedOnGroupedRowClassName';
 export { default as FixedVirtualizedRef } from './FixedVirtualizedRef';
 export { default as RowSelectionOnCell } from './RowSelectionOnCell';
+export { default as FixedAriaLevel } from './FixedAriaLevel';