Corrects the element that aria- props are applied to (#855)

* Corrects element aria- props are applied to * Removes test attribute * Adds headers to demo
react-component · Dec 21, 2022 · 0504dc6 · 0504dc6
1 parent 0f8d2b8
commit 0504dc6
Show file tree

Hide file tree

Showing 4 changed files with 61 additions and 6 deletions.
diff --git a/docs/demo/aria.md b/docs/demo/aria.md
@@ -0,0 +1,3 @@
+## aria-label
+
+<code src="../examples/aria.tsx">
diff --git a/docs/examples/aria.tsx b/docs/examples/aria.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import Table from 'rc-table';
+import '../../assets/index.less';
+
+const columns = [
+  {
+    title: 'Name',
+    dataIndex: 'name',
+    key: 'name',
+  },
+  {
+    title: 'Age',
+    dataIndex: 'age',
+    key: 'age',
+  },
+  {
+    title: 'Address',
+    dataIndex: 'address',
+    key: 'address',
+  },
+];
+
+const data = [
+  { name: 'John', age: '25', address: '1 A Street' },
+  { name: 'Fred', age: '38', address: '2 B Street' },
+  { name: 'Anne', age: '47', address: '3 C Street' },
+];
+
+const Demo = () => (
+  <div>
+    <h2>Table with aria-label</h2>
+    <Table columns={columns} data={data} aria-label="Users" data-testid="blah" />
+    <br />
+    <h2>Table with aria-labelledby</h2>
+    <label id="lblPeopleTable">People</label>
+    <Table columns={columns} data={data} aria-labelledby="lblPeopleTable" />
+  </div>
+);
+
+export default Demo;
diff --git a/src/Table.tsx b/src/Table.tsx
@@ -642,6 +642,9 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     warning(false, '`components.body` with render props is only work on `scroll.y`.');
   }
 
+  const dataProps = pickAttrs(props, { data: true });
+  const ariaProps = pickAttrs(props, { aria: true });
+
   if (fixHeader || isSticky) {
     // >>>>>> Fixed Header
     let bodyContent: React.ReactNode;
@@ -681,6 +684,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
               ...scrollTableStyle,
               tableLayout: mergedTableLayout,
             }}
+            {...ariaProps}
           >
             {captionElement}
             {bodyColGroup}
@@ -763,7 +767,10 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
         onScroll={onScroll}
         ref={scrollBodyRef}
       >
-        <TableComponent style={{ ...scrollTableStyle, tableLayout: mergedTableLayout }}>
+        <TableComponent
+          style={{ ...scrollTableStyle, tableLayout: mergedTableLayout }}
+          {...ariaProps}
+        >
           {captionElement}
           {bodyColGroup}
           {showHeader !== false && <Header {...headerProps} {...columnContext} />}
@@ -778,8 +785,6 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
     );
   }
 
-  const ariaProps = pickAttrs(props, { aria: true, data: true });
-
   let fullTable = (
     <div
       className={classNames(prefixCls, className, {
@@ -799,7 +804,7 @@ function Table<RecordType extends DefaultRecordType>(tableProps: TableProps<Reco
       style={style}
       id={id}
       ref={fullTableRef}
-      {...ariaProps}
+      {...dataProps}
     >
       <MemoTableContent
         pingLeft={pingedLeft}

diff --git a/tests/Table.spec.js b/tests/Table.spec.js
@@ -135,13 +135,20 @@ describe('Table.Basic', () => {
     expect(wrapper.find(`div#${testId}`).length).toBeTruthy();
   });
 
-  it('renders data- &  aria- attributes', () => {
-    const miscProps = { 'data-test': 'names-table', 'aria-label': 'names-table-aria' };
+  it('renders data- attributes', () => {
+    const miscProps = { 'data-test': 'names-table' };
     const wrapper = mount(createTable(miscProps));
     const props = wrapper.find('div.rc-table').props();
     expect(props).toEqual(expect.objectContaining(miscProps));
   });
 
+  it('renders aria- attributes', () => {
+    const miscProps = { 'aria-label': 'names-table-aria' };
+    const wrapper = mount(createTable(miscProps));
+    const props = wrapper.find('table').props();
+    expect(props).toEqual(expect.objectContaining(miscProps));
+  });
+
   describe('rowKey', () => {
     it('uses record.key', () => {
       const wrapper = mount(createTable());