feat(accordion): deprecate iconDescription on AccordionItem (#5950)

* refactor(accordion): deprecate iconDescription on AccordionItem * chore(accordion): tweak deprecation message * chore(project): update snapshots * Update packages/react/src/components/Accordion/AccordionItem.js Co-Authored-By: emyarod <emyarod@users.noreply.github.com> * Update packages/react/src/components/Accordion/AccordionItem.js Co-authored-by: emyarod <emyarod@users.noreply.github.com>
carbon-design-system · Apr 29, 2020 · d865f82 · d865f82
1 parent ffcc615
commit d865f82
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 34 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -32,9 +32,7 @@ Map {
  "className": Object {
  "type": "string",
  },
- "iconDescription": Object {
- "type": "string",
- },
+ "iconDescription": [Function],
  "onClick": Object {
  "type": "func",
  },

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
@@ -12,14 +12,15 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { match, keys } from '../../internal/keyboard';
 import { useId } from '../../internal/useId';
+import deprecate from '../../prop-types/deprecate.js';
 
 const { prefix } = settings;
 const defaultRenderExpando = props => <button {...props} />;
 
 function AccordionItem({
  children,
  className: customClassName,
- iconDescription = 'Expand/Collapse',
+ iconDescription,
  open = false,
  onHeadingClick,
  renderExpando: Expando = defaultRenderExpando,
@@ -77,12 +78,9 @@ function AccordionItem({
  className={`${prefix}--accordion__heading`}
  onClick={onClick}
  onKeyDown={onKeyDown}
- title={iconDescription}
+ title={title || iconDescription}
  type="button">
- <ChevronRight16
- aria-label={iconDescription}
- className={`${prefix}--accordion__arrow`}
- />
+ <ChevronRight16 className={`${prefix}--accordion__arrow`} />
  <div className={`${prefix}--accordion__title`}>{title}</div>
  </Expando>
  <div id={id} className={`${prefix}--accordion__content`}>
@@ -117,7 +115,13 @@ AccordionItem.propTypes = {
  /**
  * The description of the expando icon.
  */
- iconDescription: PropTypes.string,
+ iconDescription: deprecate(
+ PropTypes.string,
+ 'The `iconDescription` prop has been deprecated as it is no longer ' +
+ 'required. Feel free to remove this prop from <AccordionItem>. This ' +
+ 'prop will be removed in the next major release of ' +
+ '`carbon-components-react`'
+ ),
 
  /**
  * `true` to open the expando.

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -22,7 +22,7 @@ exports[`Accordion should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="Heading A"
  type="button"
  >
  <button
@@ -31,15 +31,13 @@ exports[`Accordion should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="Heading A"
  type="button"
  >
  <ForwardRef(ChevronRight16)
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  >
  <Icon
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  height={16}
  preserveAspectRatio="xMidYMid meet"
@@ -48,12 +46,11 @@ exports[`Accordion should render 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <svg
- aria-label="Expand/Collapse"
+ aria-hidden={true}
  className="bx--accordion__arrow"
  focusable="false"
  height={16}
  preserveAspectRatio="xMidYMid meet"
- role="img"
  viewBox="0 0 16 16"
  width={16}
  xmlns="http://www.w3.org/2000/svg"
@@ -93,7 +90,7 @@ exports[`Accordion should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="Heading B"
  type="button"
  >
  <button
@@ -102,15 +99,13 @@ exports[`Accordion should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="Heading B"
  type="button"
  >
  <ForwardRef(ChevronRight16)
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  >
  <Icon
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  height={16}
  preserveAspectRatio="xMidYMid meet"
@@ -119,12 +114,11 @@ exports[`Accordion should render 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <svg
- aria-label="Expand/Collapse"
+ aria-hidden={true}
  className="bx--accordion__arrow"
  focusable="false"
  height={16}
  preserveAspectRatio="xMidYMid meet"
- role="img"
  viewBox="0 0 16 16"
  width={16}
  xmlns="http://www.w3.org/2000/svg"
@@ -164,7 +158,7 @@ exports[`Accordion should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="Heading C"
  type="button"
  >
  <button
@@ -173,15 +167,13 @@ exports[`Accordion should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="Heading C"
  type="button"
  >
  <ForwardRef(ChevronRight16)
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  >
  <Icon
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  height={16}
  preserveAspectRatio="xMidYMid meet"
@@ -190,12 +182,11 @@ exports[`Accordion should render 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <svg
- aria-label="Expand/Collapse"
+ aria-hidden={true}
  className="bx--accordion__arrow"
  focusable="false"
  height={16}
  preserveAspectRatio="xMidYMid meet"
- role="img"
  viewBox="0 0 16 16"
  width={16}
  xmlns="http://www.w3.org/2000/svg"

diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -15,7 +15,7 @@ exports[`AccordionItem should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="A heading"
  type="button"
  >
  <button
@@ -24,15 +24,13 @@ exports[`AccordionItem should render 1`] = `
  className="bx--accordion__heading"
  onClick={[Function]}
  onKeyDown={[Function]}
- title="Expand/Collapse"
+ title="A heading"
  type="button"
  >
  <ForwardRef(ChevronRight16)
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  >
  <Icon
- aria-label="Expand/Collapse"
  className="bx--accordion__arrow"
  height={16}
  preserveAspectRatio="xMidYMid meet"
@@ -41,12 +39,11 @@ exports[`AccordionItem should render 1`] = `
  xmlns="http://www.w3.org/2000/svg"
  >
  <svg
- aria-label="Expand/Collapse"
+ aria-hidden={true}
  className="bx--accordion__arrow"
  focusable="false"
  height={16}
  preserveAspectRatio="xMidYMid meet"
- role="img"
  viewBox="0 0 16 16"
  width={16}
  xmlns="http://www.w3.org/2000/svg"