refactor(StructuredList): ariaLabel to aria-label (#13261)

* refactor(StructuredListWrapper): ariaLabel to aria-label * fix(StructuredList test): use 'aria-label' --------- Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Mar 6, 2023 · 8c8e942 · 8c8e942
1 parent 479172c
commit 8c8e942
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 7 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -6891,15 +6891,16 @@ Map {
   },
   "StructuredListWrapper" => Object {
     "defaultProps": Object {
-      "ariaLabel": "Structured list section",
+      "aria-label": "Structured list section",
       "isCondensed": false,
       "isFlush": false,
       "selection": false,
     },
     "propTypes": Object {
-      "ariaLabel": Object {
+      "aria-label": Object {
         "type": "string",
       },
+      "ariaLabel": [Function],
       "children": Object {
         "type": "node",
       },

diff --git a/packages/react/src/components/StructuredList/StructuredList-test.js b/packages/react/src/components/StructuredList/StructuredList-test.js
@@ -164,7 +164,7 @@ describe('StructuredList', () => {
     });
     it('should allow a custom aria label to be passed in', () => {
       const testAriaLabel = 'custom-test-aria-label';
-      renderComponent({ wrapperProps: { ariaLabel: testAriaLabel } });
+      renderComponent({ wrapperProps: { 'aria-label': testAriaLabel } });
       expect(screen.getByLabelText(testAriaLabel)).toBeInTheDocument();
     });
     it('should check that children are rendered', () => {

diff --git a/packages/react/src/components/StructuredList/StructuredList.js b/packages/react/src/components/StructuredList/StructuredList.js
@@ -20,7 +20,8 @@ export function StructuredListWrapper(props) {
     children,
     selection,
     className,
-    ariaLabel,
+    ['aria-label']: ariaLabel,
+    ariaLabel: deprecatedAriaLabel,
     isCondensed,
     isFlush,
     ...other
@@ -36,7 +37,11 @@ export function StructuredListWrapper(props) {
   return (
     <GridSelectedRowStateContext.Provider value={selectedRow}>
       <GridSelectedRowDispatchContext.Provider value={setSelectedRow}>
-        <div role="table" className={classes} {...other} aria-label={ariaLabel}>
+        <div
+          role="table"
+          className={classes}
+          {...other}
+          aria-label={deprecatedAriaLabel || ariaLabel}>
           {children}
         </div>
       </GridSelectedRowDispatchContext.Provider>
@@ -48,7 +53,16 @@ StructuredListWrapper.propTypes = {
   /**
    * Specify a label to be read by screen readers on the container node
    */
-  ariaLabel: PropTypes.string,
+  ['aria-label']: PropTypes.string,
+
+  /**
+   * Deprecated, please use `aria-label` instead.
+   * Specify a label to be read by screen readers on the container note.
+   */
+  ariaLabel: deprecate(
+    PropTypes.string,
+    'This prop syntax has been deprecated. Please use the new `aria-label`.'
+  ),
 
   /**
    * Provide the contents of your StructuredListWrapper
@@ -80,7 +94,7 @@ StructuredListWrapper.defaultProps = {
   selection: false,
   isCondensed: false,
   isFlush: false,
-  ariaLabel: 'Structured list section',
+  ['aria-label']: 'Structured list section',
 };
 
 export function StructuredListHead(props) {