Expand table's default action type to allow reactnode names (#3688)

* Expand table's default action type to allow reactnode names * changelog * Updated docs' props for DefaultItemAction.name
elastic · Jul 2, 2020 · 03b2249 · 03b2249
1 parent 1de4ed6
commit 03b2249
Show file tree

Hide file tree

Showing 7 changed files with 46 additions and 21 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `26.2.0`.
+- Expanded `EuiBasicTable`'s default action's name configuration to accept any React node ([#3688](https://github.com/elastic/eui/pull/3688))
 
 ## [`26.2.0`](https://github.com/elastic/eui/tree/v26.2.0)
 

diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -134,7 +134,7 @@ export const Table = () => {
         ]
       : [
           {
-            name: 'Clone',
+            name: <span>Clone</span>,
             description: 'Clone this user',
             icon: 'copy',
             onClick: cloneUser,

diff --git a/src-docs/src/views/tables/basic/props_info.js b/src-docs/src/views/tables/basic/props_info.js
@@ -393,9 +393,9 @@ export const propsInfo = {
       props: {
         name: {
           description:
-            'The display name of the action (will be the button caption',
+            'The display name of the action (will be the button caption)',
           required: true,
-          type: { name: 'string' },
+          type: { name: 'PropTypes.node' },
         },
         description: {
           description: 'Describes the action (will be the button title)',

diff --git a/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap b/src/components/basic_table/__snapshots__/default_item_action.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`DefaultItemAction render - default button 1`] = `
+exports[`DefaultItemAction render - button 1`] = `
 <EuiToolTip
   content="action 1"
   delay="long"
@@ -18,7 +18,7 @@ exports[`DefaultItemAction render - default button 1`] = `
 </EuiToolTip>
 `;
 
-exports[`DefaultItemAction render - button 1`] = `
+exports[`DefaultItemAction render - default button 1`] = `
 <EuiToolTip
   content="action 1"
   delay="long"
@@ -43,11 +43,20 @@ exports[`DefaultItemAction render - icon 1`] = `
   position="top"
 >
   <EuiButtonIcon
-    aria-label="action1"
+    aria-labelledby="random_id"
     color="primary"
     iconType="trash"
     isDisabled={false}
     onClick={[Function]}
   />
+  <EuiScreenReaderOnly>
+    <span
+      id="random_id"
+    >
+      <span>
+        action1
+      </span>
+    </span>
+  </EuiScreenReaderOnly>
 </EuiToolTip>
 `;
diff --git a/src/components/basic_table/action_types.ts b/src/components/basic_table/action_types.ts
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ReactElement } from 'react';
+import { ReactElement, ReactNode } from 'react';
 import { EuiIconType } from '../icon/icon';
 import { EuiButtonIconColor } from '../button/button_icon/button_icon';
 import { EuiButtonEmptyColor } from '../button/button_empty';
@@ -28,7 +28,7 @@ type ButtonColor = EuiButtonIconColor | EuiButtonEmptyColor;
 type EuiButtonIconColorFunction<T> = (item: T) => ButtonColor;
 
 interface DefaultItemActionBase<T> {
-  name: string;
+  name: ReactNode;
   description: string;
   onClick?: (item: T) => void;
   href?: string;

diff --git a/src/components/basic_table/default_item_action.test.tsx b/src/components/basic_table/default_item_action.test.tsx
@@ -25,6 +25,13 @@ import {
   DefaultItemIconButtonAction as IconButtonAction,
 } from './action_types';
 
+// Mock the htmlIdGenerator to generate predictable ids for snapshot tests
+jest.mock('../../services/accessibility/html_id_generator', () => ({
+  htmlIdGenerator: () => {
+    return () => 'random_id';
+  },
+}));
+
 interface Item {
   id: string;
 }
@@ -67,7 +74,7 @@ describe('DefaultItemAction', () => {
 
   test('render - icon', () => {
     const action: IconButtonAction<Item> = {
-      name: 'action1',
+      name: <span>action1</span>,
       description: 'action 1',
       type: 'icon',
       icon: 'trash',

diff --git a/src/components/basic_table/default_item_action.tsx b/src/components/basic_table/default_item_action.tsx
@@ -27,6 +27,8 @@ import {
 } from '../button';
 import { EuiToolTip } from '../tool_tip';
 import { DefaultItemAction as Action } from './action_types';
+import { htmlIdGenerator } from '../../services/accessibility';
+import { EuiScreenReaderOnly } from '../accessibility';
 
 export interface DefaultItemActionProps<T> {
   action: Action<T>;
@@ -73,18 +75,25 @@ export const DefaultItemAction = <T extends {}>({
       }]. It is configured to render as an icon but no
       icon is provided. Make sure to set the 'icon' property of the action`);
     }
+    const ariaLabelId = htmlIdGenerator()();
     button = (
-      <EuiButtonIcon
-        className={className}
-        aria-label={action.name}
-        isDisabled={!enabled}
-        color={color}
-        iconType={icon}
-        onClick={onClick}
-        href={action.href}
-        target={action.target}
-        data-test-subj={action['data-test-subj']}
-      />
+      <>
+        <EuiButtonIcon
+          className={className}
+          aria-labelledby={ariaLabelId}
+          isDisabled={!enabled}
+          color={color}
+          iconType={icon}
+          onClick={onClick}
+          href={action.href}
+          target={action.target}
+          data-test-subj={action['data-test-subj']}
+        />
+        {/* action.name is a ReactNode and must be rendered to an element and referenced by ID for screen readers */}
+        <EuiScreenReaderOnly>
+          <span id={ariaLabelId}>{action.name}</span>
+        </EuiScreenReaderOnly>
+      </>
     );
   } else {
     button = (