fix(StructuredList): add aria table roles

carbon-design-system · Mar 13, 2021 · 70eba6e · 70eba6e
1 parent eb81408
commit 70eba6e
Showing 1 changed file with 9 additions and 10 deletions.
diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
@@ -5,14 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import React, { useState } from 'react';
+import React, { useState, useRef } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { settings } from 'carbon-components';
 import setupGetInstanceId from '../../tools/setupGetInstanceId';
 import deprecate from '../../prop-types/deprecate';
 
 const { prefix } = settings;
+const getInstanceId = setupGetInstanceId();
 
 export function StructuredListWrapper(props) {
   const {
@@ -28,7 +29,7 @@ export function StructuredListWrapper(props) {
   });
 
   return (
-    <div className={classes} {...other} aria-label={ariaLabel}>
+    <div role="table" className={classes} {...other} aria-label={ariaLabel}>
       {children}
     </div>
   );
@@ -74,7 +75,7 @@ export function StructuredListHead(props) {
   const classes = classNames(`${prefix}--structured-list-thead`, className);
 
   return (
-    <div className={classes} {...other}>
+    <div role="rowgroup" className={classes} {...other}>
       {children}
     </div>
   );
@@ -92,16 +93,14 @@ StructuredListHead.propTypes = {
   className: PropTypes.string,
 };
 
-const getInstanceId = setupGetInstanceId();
-
 export function StructuredListBody(props) {
   const { children, className, ...other } = props;
   const classes = classNames(`${prefix}--structured-list-tbody`, className);
   const { labelRows, setLabelRows } = useState(null);
   const { rowSelected, setRowSelected } = useState(0);
 
   return (
-    <div className={classes} {...other}>
+    <div className={classes} role="rowgroup" {...other}>
       {children}
     </div>
   );
@@ -201,16 +200,16 @@ StructuredListRow.defaultProps = {
 };
 
 export function StructuredListInput(props) {
-  const { className, value, name, title, ...other } = props;
-  const uid = props.id || getInstanceId();
+  const { className, value, name, title, id, ...other } = props;
   const classes = classNames(`${prefix}--structured-list-input`, className);
+  const instanceId = id || getInstanceId();
 
   return (
     <input
       {...other}
       type="radio"
       tabIndex={-1}
-      id={uid}
+      id={instanceId}
       className={classes}
       value={value}
       name={name}
@@ -271,7 +270,7 @@ export function StructuredListCell(props) {
   });
 
   return (
-    <div className={classes} {...other}>
+    <div className={classes} role={head ? 'columnheader' : 'cell'} {...other}>
       {children}
     </div>
   );