[TableCell] Add "scope" attribute for th (#10277)

pages/api/table-cell.md

@@ -17,6 +17,7 @@ filename: /src/Table/TableCell.js
 | component | union:&nbsp;string&nbsp;&#124;<br>&nbsp;func<br> |  | The component used for the root node. Either a string to use a DOM element or a component. |
 | numeric | bool | false | If `true`, content will align to the right. |
 | padding | enum:&nbsp;'default'&nbsp;&#124;<br>&nbsp;'checkbox'&nbsp;&#124;<br>&nbsp;'dense'&nbsp;&#124;<br>&nbsp;'none'<br> | 'default' | Sets the padding applied to the cell. |
+| scope | string |  | Set scope attribute. |
 | sortDirection | enum:&nbsp;'asc'&nbsp;&#124;<br>&nbsp;'desc'&nbsp;&#124;<br>&nbsp;false<br> |  | Set aria-sort direction. |
 | variant | enum:&nbsp;'head'&nbsp;&#124;<br>&nbsp;'body'&nbsp;&#124;<br>&nbsp;'footer'<br> |  | Specify the cell type. By default, the TableHead, TableBody or TableFooter parent component set the value. |
 

src/Table/TableCell.js

@@ -60,6 +60,7 @@ function TableCell(props, context) {
     sortDirection,
     numeric,
     padding,
+    scope: scopeProp,
     variant,
     ...other
   } = props;
@@ -71,6 +72,11 @@ function TableCell(props, context) {
     Component = table && table.head ? 'th' : 'td';
   }
 
+  let scope = scopeProp;
+  if (!scope && table && table.head) {
+    scope = 'col';
+  }
+
   const className = classNames(
     classes.root,
     {
@@ -90,7 +96,7 @@ function TableCell(props, context) {
   }
 
   return (
-    <Component className={className} aria-sort={ariaSort} {...other}>
+    <Component className={className} aria-sort={ariaSort} scope={scope} {...other}>
       {children}
     </Component>
   );
@@ -122,6 +128,10 @@ TableCell.propTypes = {
    * Sets the padding applied to the cell.
    */
   padding: PropTypes.oneOf(['default', 'checkbox', 'dense', 'none']),
+  /**
+   * Set scope attribute.
+   */
+  scope: PropTypes.string,
   /**
    * Set aria-sort direction.
    */

src/Table/TableCell.spec.js

@@ -76,6 +76,13 @@ describe('<TableCell />', () => {
     assert.strictEqual(wrapper.name(), 'th');
     assert.strictEqual(wrapper.hasClass(classes.root), true);
     assert.strictEqual(wrapper.hasClass(classes.typeHead), true, 'should have the head class');
+    assert.strictEqual(wrapper.props().scope, 'col', 'should have the correct scope attribute');
+  });
+
+  it('should render specified scope attribute even when in the context of a table head', () => {
+    const wrapper = shallow(<TableCell scope="row" />);
+    wrapper.setContext({ table: { head: true } });
+    assert.strictEqual(wrapper.props().scope, 'row', 'should have the specified scope attribute');
   });
 
   it('should render a th with the footer class when in the context of a table footer', () => {
@@ -100,30 +107,27 @@ describe('<TableCell />', () => {
   });
 
   it('should render with the head class when variant is head, overriding context', () => {
-    const wrapper = shallow(<TableCell />);
+    const wrapper = shallow(<TableCell variant="head" />);
     wrapper.setContext({ table: { footer: true } });
-    wrapper.setProps({ variant: 'head' });
     assert.strictEqual(wrapper.hasClass(classes.typeHead), true);
+    assert.strictEqual(wrapper.props().scope, undefined, 'should have the correct scope attribute');
   });
 
   it('should render without head class when variant is body, overriding context', () => {
-    const wrapper = shallow(<TableCell />);
+    const wrapper = shallow(<TableCell variant="body" />);
     wrapper.setContext({ table: { head: true } });
-    wrapper.setProps({ variant: 'body' });
     assert.strictEqual(wrapper.hasClass(classes.typeHead), false);
   });
 
   it('should render without footer class when variant is body, overriding context', () => {
-    const wrapper = shallow(<TableCell />);
+    const wrapper = shallow(<TableCell variant="body" />);
     wrapper.setContext({ table: { footer: true } });
-    wrapper.setProps({ variant: 'body' });
     assert.strictEqual(wrapper.hasClass(classes.typeFooter), false);
   });
 
   it('should render with the footer class when variant is footer, overriding context', () => {
-    const wrapper = shallow(<TableCell />);
+    const wrapper = shallow(<TableCell variant="footer" />);
     wrapper.setContext({ table: { head: true } });
-    wrapper.setProps({ variant: 'footer' });
     assert.strictEqual(wrapper.hasClass(classes.typeFooter), true);
   });