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,

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

@@ -4970,9 +4970,7 @@ Map {
   "StructuredListRow" => Object {
     "defaultProps": Object {
       "head": false,
-      "label": false,
       "onKeyDown": [Function],
-      "tabIndex": 0,
     },
     "propTypes": Object {
       "children": Object {
@@ -4984,15 +4982,9 @@ Map {
       "head": Object {
         "type": "bool",
       },
-      "label": Object {
-        "type": "bool",
-      },
       "onKeyDown": Object {
         "type": "func",
       },
-      "tabIndex": Object {
-        "type": "number",
-      },
     },
   },
   "StructuredListInput" => Object {

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

@@ -120,16 +120,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,14 @@
  * 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();
 
 export function StructuredListWrapper(props) {
   const {
@@ -29,7 +28,7 @@ export function StructuredListWrapper(props) {
   });
 
   return (
-    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
+    <div role="grid" className={classes} {...other} aria-label={ariaLabel}>
       {children}
     </div>
   );
@@ -127,32 +126,38 @@ StructuredListBody.defaultProps = {
   onKeyDown: () => {},
 };
 
+function useFocusWithin() {
+  const [hasFocusWithin, setHasFocusWithin] = useState(false);
+  return [hasFocusWithin, setHasFocusWithin];
+}
+
 export function StructuredListRow(props) {
-  const {
-    onKeyDown,
-    tabIndex,
-    children,
-    className,
-    head,
-    label,
-    ...other
-  } = props;
+  const { onKeyDown, children, className, head, ...other } = props;
+  const [hasFocusWithin, setHasFocusWithin] = useFocusWithin();
   const classes = classNames(`${prefix}--structured-list-row`, className, {
     [`${prefix}--structured-list-row--header-row`]: head,
+    [`${prefix}--structured-list-row--focused-within`]: hasFocusWithin,
   });
 
-  return label ? (
+  return head ? (
+    <div tabIndex={-1} role="row" {...other} className={classes}>
+      {children}
+    </div>
+  ) : (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    <label
+    <div
       {...other}
-      tabIndex={tabIndex}
+      role="row"
+      tabIndex={-1}
       className={classes}
+      onFocus={() => {
+        setHasFocusWithin(true);
+      }}
+      onBlur={() => {
+        setHasFocusWithin(false);
+      }}
       onKeyDown={onKeyDown}>
       {children}
-    </label>
-  ) : (
-    <div {...other} className={classes}>
-      {children}
     </div>
   );
 }
@@ -173,41 +178,39 @@ StructuredListRow.propTypes = {
    */
   head: PropTypes.bool,
 
-  /**
-   * Specify whether a `<label>` should be used
-   */
-  label: PropTypes.bool,
-
   /**
    * 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,
+    value,
+    name = `structuredListInput-${defaultId}`,
+    title,
+    id,
+    ...other
+  } = props;
+  const classes = classNames(
+    `${prefix}--structured-list-input`,
+    `${prefix}--visually-hidden`,
+    className
+  );
 
   return (
     <input
       {...other}
       type="radio"
-      tabIndex={-1}
-      id={instanceId}
+      tabIndex={0}
+      id={id || defaultId}
       className={classes}
       value={value}
       name={name}