Add scope prop to EuiTableHeaderCell and EuiTableHeaderCellCheckbox.

CHANGELOG.md

@@ -11,6 +11,7 @@
   sprites [(#160)](https://github.com/elastic/eui/pull/160)
 - Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `<EuiCodeEditor>` ([#169](https://github.com/elastic/eui/pull/169))
 - Add `wrap` prop to `<EuiFlexGroup>` ([#170](https://github.com/elastic/eui/pull/170))
+- Add `scope` prop to `<EuiTableHeaderCell>` and `<EuiTableHeaderCellCheckbox>` ([#171](https://github.com/elastic/eui/pull/171))
 
 **Bug fixes**
 

src/components/table/__snapshots__/table.test.js.snap

@@ -10,6 +10,7 @@ exports[`renders EuiTable 1`] = `
     <tr>
       <th
         class="euiTableHeaderCell"
+        scope="col"
       >
         <div
           class="euiTableCellContent"
@@ -19,6 +20,7 @@ exports[`renders EuiTable 1`] = `
       </th>
       <th
         class="euiTableHeaderCell"
+        scope="col"
       >
         <div
           class="euiTableCellContent"

src/components/table/__snapshots__/table_header_cell.test.js.snap

@@ -3,6 +3,7 @@
 exports[`align defaults to left 1`] = `
 <th
   class="euiTableHeaderCell"
+  scope="col"
 >
   <div
     class="euiTableCellContent"
@@ -13,6 +14,7 @@ exports[`align defaults to left 1`] = `
 exports[`align renders right when specified 1`] = `
 <th
   class="euiTableHeaderCell"
+  scope="col"
 >
   <div
     class="euiTableCellContent euiTableCellContent--alignRight"
@@ -25,6 +27,7 @@ exports[`renders EuiTableHeaderCell 1`] = `
   aria-label="aria-label"
   class="euiTableHeaderCell testClass1 testClass2"
   data-test-subj="test subject string"
+  scope="col"
 >
   <div
     class="euiTableCellContent testClass1 testClass2"

src/components/table/__snapshots__/table_header_cell_checkbox.test.js.snap

@@ -5,6 +5,7 @@ exports[`EuiTableHeaderCellCheckbox is rendered 1`] = `
   aria-label="aria-label"
   class="euiTableHeaderCellCheckbox testClass1 testClass2"
   data-test-subj="test subject string"
+  scope="col"
 >
   <div
     class="euiTableCellContent"

src/components/table/table_header_cell.js

@@ -24,6 +24,7 @@ export const EuiTableHeaderCell = ({
   isSortAscending,
   className,
   ariaLabel,
+  scope,
   ...rest
 }) => {
   const classes = classNames('euiTableHeaderCell', className);
@@ -51,6 +52,7 @@ export const EuiTableHeaderCell = ({
     return (
       <th
         className={classes}
+        scope={scope}
         {...rest}
       >
         <button
@@ -72,6 +74,7 @@ export const EuiTableHeaderCell = ({
     <th
       className={classes}
       aria-label={ariaLabel}
+      scope={scope}
       {...rest}
     >
       <div className={contentClasses}>
@@ -88,8 +91,10 @@ EuiTableHeaderCell.propTypes = {
   onSort: PropTypes.func,
   isSorted: PropTypes.bool,
   isSortAscending: PropTypes.bool,
+  scope: PropTypes.oneOf(['col', 'row', 'colgroup', 'rowgroup']),
 };
 
 EuiTableHeaderCell.defaultProps = {
   align: LEFT_ALIGNMENT,
+  scope: 'col',
 };

src/components/table/table_header_cell_checkbox.js

@@ -21,4 +21,9 @@ export const EuiTableHeaderCellCheckbox = ({
 EuiTableHeaderCellCheckbox.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  scope: PropTypes.oneOf(['col', 'row', 'colgroup', 'rowgroup']),
+};
+
+EuiTableHeaderCellCheckbox.defaultProps = {
+  scope: 'col',
 };