[terra-table] Provide examples and tests for focusable elements in a …

…table. (#1850)

packages/terra-framework-docs/CHANGELOG.md

@@ -8,6 +8,7 @@
   * Added documentation for the new `terra-table` component.
   * Added test to cover enabling zebra striping for the `terra-table` component.
   * Added test for tab focus for scrollable tables for the `terra-table` component.
+  * Added examples and tests to cover the behavior of interactive elements within a table for `terra-table`.
 
 * Updated
   * Removed columnHeaderHeight from tests using the default implementation for `terra-data-grid`.

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableFocusableCell.doc.mdx

@@ -0,0 +1,3 @@
+import TableFocusableCell from './TableFocusableCell?dev-site-example';
+
+<TableFocusableCell title= 'Table With Focusable Cell Elements' />

packages/terra-framework-docs/src/terra-dev-site/doc/table/Examples/TableFocusableCell.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import Table from 'terra-table';
+import NotificationDialog from 'terra-notification-dialog';
+
+const TableFocusableCell = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+  };
+
+  const handleButtonOpenModal = () => {
+    setIsOpen(true);
+  };
+
+  const buttonCell = <button type="button" aria-label="Alert" onClick={handleButtonOpenModal}>Alert</button>;
+  // eslint-disable-next-line react/forbid-dom-props
+  const inputCell = <input type="text" aria-label="Text Input" style={{ width: '100px', height: '25px', display: 'inline' }} />;
+  const anchorCell = <a href="https://www.oracle.com/" aria-label="Visit Oracle">Visit Oracle</a>;
+  const textAreaCell = <textarea name="textArea" aria-label="Text Area" rows="1" cols="15" />;
+  const selectCell = (
+    <select name="specialties" id="specialties" aria-label="Select Specialty">
+      <option value="ambulatory">Ambulatory</option>
+      <option value="cardiology">Cardiology</option>
+      <option value="radiology">Radiology</option>
+      <option value="neurology">Neurology</option>
+    </select>
+  );
+
+  const tableDataJSON = {
+    cols: [
+      { id: 'Column-0', displayName: 'Patient' },
+      { id: 'Column-1', displayName: 'Column 1' },
+      { id: 'Column-2', displayName: 'Column 2' },
+      { id: 'Column-3', displayName: 'Column 3' },
+    ],
+    rows: [
+      {
+        id: '1',
+        cells: [
+          { content: 'Fleck, Arthur' },
+          {
+            content: <>
+              {buttonCell}
+              <div>Non-Focusable Text</div>
+              {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+            </>,
+          },
+          { content: inputCell },
+          { content: anchorCell },
+        ],
+      },
+      {
+        id: '2',
+        cells: [
+          { content: 'Wayne, Bruce' },
+          {
+            content: (<div>
+              {buttonCell}
+              {inputCell}
+              {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+            </div>),
+          },
+          { content: selectCell },
+          { content: textAreaCell },
+        ],
+      },
+    ],
+  };
+
+  const { cols, rows } = tableDataJSON;
+
+  return (
+    <>
+      {isOpen && (
+      <NotificationDialog
+        variant="hazard-low"
+        dialogTitle="Button from Focusable Cell"
+        startMessage="Button Selected"
+        acceptAction={{
+          text: 'OK',
+          onClick: handleCloseModal,
+        }}
+      />
+      )}
+      <Table
+        id="table-focusable-cell"
+        overflowColumns={cols}
+        rows={rows}
+        ariaLabel="Table with Focusable Elements"
+      />
+    </>
+  );
+};
+
+export default TableFocusableCell;

packages/terra-framework-docs/src/terra-dev-site/test/table/TableFocusableCell.test.jsx

@@ -0,0 +1,96 @@
+import React, { useState } from 'react';
+import Table from 'terra-table';
+import NotificationDialog from 'terra-notification-dialog';
+
+const TableFocusableCell = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const handleCloseModal = () => {
+    setIsOpen(false);
+  };
+
+  const handleButtonOpenModal = () => {
+    setIsOpen(true);
+  };
+
+  const buttonCell = <button type="button" aria-label="Alert" onClick={handleButtonOpenModal}>Alert</button>;
+  // eslint-disable-next-line react/forbid-dom-props
+  const inputCell = <input type="text" aria-label="Text Input" style={{ width: '100px', height: '25px', display: 'inline' }} />;
+  const anchorCell = <a href="https://www.oracle.com/" aria-label="Visit Oracle">Visit Oracle</a>;
+  const textAreaCell = <textarea name="textArea" aria-label="Text Area" rows="1" cols="15" />;
+  const selectCell = (
+    <select name="specialties" id="specialties" aria-label="Select Specialty">
+      <option value="ambulatory">Ambulatory</option>
+      <option value="cardiology">Cardiology</option>
+      <option value="radiology">Radiology</option>
+      <option value="neurology">Neurology</option>
+    </select>
+  );
+
+  const tableDataJSON = {
+    cols: [
+      { id: 'Column-0', displayName: 'Patient' },
+      { id: 'Column-1', displayName: 'Column 1' },
+      { id: 'Column-2', displayName: 'Column 2' },
+      { id: 'Column-3', displayName: 'Column 3' },
+    ],
+    rows: [
+      {
+        id: '1',
+        cells: [
+          { content: 'Fleck, Arthur' },
+          {
+            content: <>
+              {buttonCell}
+              <div>Non-Focusable Text</div>
+              {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+            </>,
+          },
+          { content: inputCell },
+          { content: anchorCell },
+        ],
+      },
+      {
+        id: '2',
+        cells: [
+          { content: 'Wayne, Bruce' },
+          {
+            content: (<div>
+              {buttonCell}
+              {inputCell}
+              {/* eslint-disable-next-line react/jsx-closing-tag-location */}
+            </div>),
+          },
+          { content: selectCell },
+          { content: textAreaCell },
+        ],
+      },
+    ],
+  };
+
+  const { cols, rows } = tableDataJSON;
+
+  return (
+    <>
+      {isOpen && (
+      <NotificationDialog
+        variant="hazard-low"
+        dialogTitle="Button from Focusable Cell"
+        startMessage="Button Selected"
+        acceptAction={{
+          text: 'OK',
+          onClick: handleCloseModal,
+        }}
+      />
+      )}
+      <Table
+        id="table-focusable-cell"
+        overflowColumns={cols}
+        rows={rows}
+        ariaLabel="Table with Focusable Elements"
+      />
+    </>
+  );
+};
+
+export default TableFocusableCell;

packages/terra-table/tests/wdio/table-spec.js

@@ -116,6 +116,28 @@ Terra.describeViewports('Table', ['medium', 'large'], () => {
     });
   });
 
+  describe('Focusable Cell Element Navigation : ', () => {
+    const focusElementSelector = 'body';
+
+    beforeEach(() => {
+      browser.url('/raw/tests/cerner-terra-framework-docs/table/table-focusable-cell');
+    });
+
+    it('validates that the first interactive element in the table is given focus on tab', () => {
+      browser.keys(['Tab']);
+
+      expect(browser.$$('button:focus')).toBeElementsArrayOfSize(1);
+      Terra.validates.element('table-focus-first-button', { columnResizeSelector: focusElementSelector });
+    });
+
+    it('validates that the second interactive element in the table is given focus with two tabs', () => {
+      browser.keys(['Tab', 'Tab']);
+
+      expect(browser.$$('input:focus')).toBeElementsArrayOfSize(1);
+      Terra.validates.element('table-focus-input', { columnResizeSelector: focusElementSelector });
+    });
+  });
+
   describe('Scrollable Table', () => {
     const scrollableTableSelector = '#scroll-test-container';