[Accessibility] Allow setting of the aria-label of table row selection checkboxes

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Changed `EuiNavDrawerFlyout` title from `h5` to `div` ([#2040](https://github.com/elastic/eui/pull/2040))
 - Fixed proptype for `EuiCopy`'s `children` ([#2048](https://github.com/elastic/eui/pull/2048))
+- Added `ariaLabel` prop's value of the the selection checkbox in table items (for each row) in `EuiBasicTable` as a result of modifier function passed with with items ([#2043](https://github.com/elastic/eui/pull/2043))
 
 ## [`12.0.0`](https://github.com/elastic/eui/tree/v12.0.0)
 

src-docs/src/views/tables/selection/selection.js

@@ -203,6 +203,9 @@ export class Table extends Component {
       onSelectionChange: this.onSelectionChange,
     };
 
+    const getAriaLabel = (item = {}) =>
+      `${item.firstName || ''} ${item.lastName || ''}`;
+
     return (
       <Fragment>
         {deleteButton}
@@ -214,6 +217,7 @@ export class Table extends Component {
           sorting={sorting}
           isSelectable={true}
           selection={selection}
+          getAriaLabel={getAriaLabel}
           onChange={this.onTableChange}
         />
       </Fragment>

src-docs/src/views/tables/selection/selection_section.js

@@ -22,8 +22,14 @@ export const section = {
   text: (
     <p>
       The following example shows how to configure selection via the{' '}
-      <EuiCode>selection</EuiCode>
-      property.
+      <EuiCode>selection</EuiCode> property.
+      <br />
+      This is important to provide an <EuiCode>getAriaLabel</EuiCode> modifier
+      function of selection table to supply a valuable screen reader user{' '}
+      experience.
+      <br />
+      If no modifier function is provided, then default aria-label value is{' '}
+      <EuiCode>Select this row</EuiCode>.
     </p>
   ),
   components: { EuiBasicTable },