feat(StructuredList): Accessibility refactor

packages/components/src/components/structured-list/_structured-list.scss

@@ -18,8 +18,8 @@
     @include padding--data-structured-list;
   }
 
-  .#{$prefix}--structured-list-input {
-    display: none;
+  .#{$prefix}--structured-list-row--focused-within {
+    @include focus-outline('outline');
   }
 
   .#{$prefix}--structured-list {
@@ -62,10 +62,6 @@
     cursor: inherit;
   }
 
-  .#{$prefix}--structured-list-row:focus:not(.#{$prefix}--structured-list-row--header-row) {
-    @include focus-outline('outline');
-  }
-
   .#{$prefix}--structured-list--selection
     .#{$prefix}--structured-list-row:hover:not(.#{$prefix}--structured-list-row--header-row)
     > .#{$prefix}--structured-list-td,
@@ -113,6 +109,7 @@
     display: table-cell;
     max-width: 36rem;
     color: $text-02;
+    border-top: 1px solid $ui-03;
     transition: color $duration--fast-02 motion(standard, productive);
   }
 

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -5000,9 +5000,7 @@ Map {
   "StructuredListRow" => Object {
     "defaultProps": Object {
       "head": false,
-      "label": false,
       "onKeyDown": [Function],
-      "tabIndex": 0,
     },
     "propTypes": Object {
       "children": Object {
@@ -5014,56 +5012,32 @@ Map {
       "head": Object {
         "type": "bool",
       },
-      "label": Object {
-        "type": "bool",
-      },
+      "label": [Function],
       "onKeyDown": Object {
         "type": "func",
       },
-      "tabIndex": Object {
-        "type": "number",
-      },
     },
   },
   "StructuredListInput" => Object {
     "defaultProps": Object {
-      "onChange": [Function],
       "title": "title",
-      "value": "value",
     },
     "propTypes": Object {
       "className": Object {
         "type": "string",
       },
-      "defaultChecked": Object {
-        "type": "bool",
-      },
+      "defaultChecked": [Function],
       "id": Object {
         "type": "string",
       },
       "name": Object {
         "type": "string",
       },
-      "onChange": Object {
-        "type": "func",
-      },
+      "onChange": [Function],
       "title": Object {
         "type": "string",
       },
-      "value": Object {
-        "args": Array [
-          Array [
-            Object {
-              "type": "string",
-            },
-            Object {
-              "type": "number",
-            },
-          ],
-        ],
-        "isRequired": true,
-        "type": "oneOfType",
-      },
+      "value": [Function],
     },
   },
   "StructuredListCell" => Object {

packages/react/src/components/StructuredList/StructuredList-test.js

@@ -26,11 +26,13 @@ describe('StructuredListWrapper', () => {
     );
 
     it('should have the expected classes', () => {
-      expect(wrapper.hasClass(`${prefix}--structured-list`)).toEqual(true);
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list`)
+      ).toEqual(true);
     });
 
     it('Should add extra classes that are passed via className', () => {
-      expect(wrapper.hasClass('extra-class')).toEqual(true);
+      expect(wrapper.find('div').hasClass('extra-class')).toEqual(true);
     });
 
     it('By default, selection prop is false', () => {
@@ -41,9 +43,9 @@ describe('StructuredListWrapper', () => {
 
     it('Should add the modifier class for selection when selection prop is true', () => {
       wrapper.setProps({ selection: true });
-      expect(wrapper.hasClass(`${prefix}--structured-list--selection`)).toEqual(
-        true
-      );
+      expect(
+        wrapper.find('div').hasClass(`${prefix}--structured-list--selection`)
+      ).toEqual(true);
     });
   });
 });
@@ -120,16 +122,6 @@ describe('StructuredListRow', () => {
       ).toEqual(true);
     });
 
-    it('should use <div> HTML by default (or when label prop is false)', () => {
-      const wrapperLabel = shallow(<StructuredListRow />);
-      expect(wrapperLabel.getElement().type).toEqual('div');
-    });
-
-    it('should use <label> HTML when label prop is true', () => {
-      const wrapperLabel = shallow(<StructuredListRow label />);
-      expect(wrapperLabel.getElement().type).toEqual('label');
-    });
-
     it('Should accept other props from ...other', () => {
       const wrapperProps = shallow(
         <StructuredListRow title="title">hi</StructuredListRow>

packages/react/src/components/StructuredList/StructuredList.js

@@ -5,15 +5,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
-const getInstanceId = setupGetInstanceId();
+const GridSelectedRowStateContext = React.createContext(null);
+const GridSelectedRowDispatchContext = React.createContext(null);
 
 export function StructuredListWrapper(props) {
   const {
@@ -27,11 +28,16 @@ export function StructuredListWrapper(props) {
   const classes = classNames(`${prefix}--structured-list`, className, {
     [`${prefix}--structured-list--selection`]: selection,
   });
+  const [selectedRow, setSelectedRow] = React.useState(null);
 
   return (
-    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
-      {children}
-    </div>
+    <GridSelectedRowStateContext.Provider value={selectedRow}>
+      <GridSelectedRowDispatchContext.Provider value={setSelectedRow}>
+        <div role="grid" className={classes} {...other} aria-label={ariaLabel}>
+          {children}
+        </div>
+      </GridSelectedRowDispatchContext.Provider>
+    </GridSelectedRowStateContext.Provider>
   );
 }
 
@@ -127,32 +133,40 @@ StructuredListBody.defaultProps = {
   onKeyDown: () => {},
 };
 
+const GridRowContext = React.createContext(null);
+
 export function StructuredListRow(props) {
-  const {
-    onKeyDown,
-    tabIndex,
-    children,
-    className,
-    head,
-    label,
-    ...other
-  } = props;
+  const { onKeyDown, children, className, head, ...other } = props;
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  const id = useId('grid-input');
+  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
+  const value = { id };
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
   });
 
-  return label ? (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <label
+  return head ? (
+    <div role="row" {...other} className={classes}>
+      {children}
+    </div>
+  ) : (
+    // eslint-disable-next-line jsx-a11y/interactive-supports-focus
+    <div
       {...other}
-      tabIndex={tabIndex}
+      role="row"
       className={classes}
+      onClick={() => setSelectedRow(id)}
+      onFocus={() => {
+        setHasFocusWithin(true);
+      }}
+      onBlur={() => {
+        setHasFocusWithin(false);
+      }}
       onKeyDown={onKeyDown}>
-      {children}
-    </label>
-  ) : (
-    <div {...other} className={classes}>
-      {children}
+      <GridRowContext.Provider value={value}>
+        {children}
+      </GridRowContext.Provider>
     </div>
   );
 }
@@ -176,40 +190,52 @@ StructuredListRow.propTypes = {
   /**
    * Specify whether a `<label>` should be used
    */
-  label: PropTypes.bool,
+  label: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`label\` will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * Provide a handler that is invoked on the key down event for the control,
-   * if `<label>` is in use
    */
   onKeyDown: PropTypes.func,
-
-  /**
-   * Specify the tab index of the container node, if `<label>` is in use
-   */
-  tabIndex: PropTypes.number,
 };
 
 StructuredListRow.defaultProps = {
   head: false,
-  label: false,
-  tabIndex: 0,
   onKeyDown: () => {},
 };
 
 export function StructuredListInput(props) {
-  const { className, value, name, title, id, ...other } = props;
-  const classes = classNames(`${prefix}--structured-list-input`, className);
-  const instanceId = id || getInstanceId();
+  const defaultId = useId('structureListInput');
+  const {
+    className,
+    name = `structured-list-input-${defaultId}`,
+    title,
+    id,
+    ...other
+  } = props;
+  const classes = classNames(
+    `${prefix}--structured-list-input`,
+    `${prefix}--visually-hidden`,
+    className
+  );
+  const row = React.useContext(GridRowContext);
+  const selectedRow = React.useContext(GridSelectedRowStateContext);
+  const setSelectedRow = React.useContext(GridSelectedRowDispatchContext);
 
   return (
     <input
       {...other}
       type="radio"
-      tabIndex={-1}
-      id={instanceId}
+      tabIndex={0}
+      checked={row && row.id === selectedRow}
+      value={row ? row.id : ''}
+      onChange={(event) => {
+        setSelectedRow(event.target.value);
+      }}
+      id={!id && defaultId}
       className={classes}
-      value={value}
       name={name}
       title={title}
     />
@@ -225,7 +251,10 @@ StructuredListInput.propTypes = {
   /**
    * Specify whether the underlying input should be checked by default
    */
-  defaultChecked: PropTypes.bool,
+  defaultChecked: deprecate(
+    PropTypes.bool,
+    `\nThe prop \`defaultChecked\` is no longer needed and will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * Specify a custom `id` for the input
@@ -240,7 +269,10 @@ StructuredListInput.propTypes = {
   /**
    * Provide an optional hook that is called each time the input is updated
    */
-  onChange: PropTypes.func,
+  onChange: deprecate(
+    PropTypes.func,
+    `\nThe prop \`onChange\` will be removed in the next major version of Carbon.`
+  ),
 
   /**
    * Provide a `title` for the input
@@ -250,12 +282,13 @@ StructuredListInput.propTypes = {
   /**
    * Specify the value of the input
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+  value: deprecate(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+    `\nThe prop \`value\` will be removed in the next major version of Carbon.`
+  ),
 };
 
 StructuredListInput.defaultProps = {
-  onChange: () => {},
-  value: 'value',
   title: 'title',
 };
 
@@ -267,8 +300,12 @@ export function StructuredListCell(props) {
     [`${prefix}--structured-list-content--nowrap`]: noWrap,
   });
 
-  return (
-    <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}>
+  return head ? (
+    <span className={classes} role="columnheader" {...other}>
+      {children}
+    </span>
+  ) : (
+    <div className={classes} role="cell" {...other}>
       {children}
     </div>
   );