Card component destructure aria data props (#3071)

* Add functionality to destructure aria and data props on SLDSCard component

* Add test to ensure aria and data props are correctly destructured on SLDSCard component

* Add aria and data props to storybook story

* Update snapshot to ensure aria and data props display in stories

* Add updated component-docs file

* try different approach for failing unit test

Author: BenjaminWFox-MuleSoft

components/card/__docs__/__snapshots__/storybook-stories.storyshot

@@ -8,7 +8,9 @@ exports[`DOM snapshots SLDSCard Custom Header 1`] = `
     className="slds-grid slds-grid_vertical"
   >
     <article
+      aria-label="SLDSCard Component"
       className="slds-card"
+      data-description="Description of the Card component"
       id="ExampleCard"
     >
       <div
@@ -247,7 +249,9 @@ exports[`DOM snapshots SLDSCard Custom Heading 1`] = `
     className="slds-grid slds-grid_vertical"
   >
     <article
+      aria-label="SLDSCard Component"
       className="slds-card"
+      data-description="Description of the Card component"
       id="ExampleCard"
     >
       <div
@@ -662,7 +666,9 @@ exports[`DOM snapshots SLDSCard Empty 1`] = `
     className="slds-grid slds-grid_vertical"
   >
     <article
+      aria-label="SLDSCard Component"
       className="slds-card"
+      data-description="Description of the Card component"
       id="ExampleCard"
     >
       <div
@@ -866,7 +872,9 @@ exports[`DOM snapshots SLDSCard w/ Items 1`] = `
     className="slds-grid slds-grid_vertical"
   >
     <article
+      aria-label="SLDSCard Component"
       className="slds-card"
+      data-description="Description of the Card component"
       id="ExampleCard"
     >
       <div

components/card/__docs__/storybook-stories.jsx

@@ -114,6 +114,8 @@ class DemoCard extends React.Component {
 					heading={heading}
 					icon={<Icon category="standard" name="document" size="small" />}
 					empty={isEmpty ? <CardEmpty heading="No Related Items" /> : null}
+					aria-label="SLDSCard Component"
+					data-description="Description of the Card component"
 				>
 					<DataTable id="SLDSDataTableExample-1" items={items}>
 						<DataTableColumn label="Opportunity Name" property="name" truncate>

components/card/__tests__/card.browser-test.jsx

@@ -118,6 +118,8 @@ describe('Card: ', () => {
 		name: 'default',
 		size: 'small',
 	});
+	const ariaLabel = 'aria-label';
+	const dataLabel = 'data-label';
 
 	const optionalProps = assign(requiredProps, {
 		bodyClassName: 'this-is-a-custom-body-class',
@@ -127,6 +129,8 @@ describe('Card: ', () => {
 		filter: renderFilter,
 		icon: renderIcon,
 		style: { background: 'rgb(18, 49, 35)' },
+		[ariaLabel]: ariaLabel,
+		[dataLabel]: dataLabel,
 	});
 
 	describe('Optional Structure', () => {
@@ -187,6 +191,16 @@ describe('Card: ', () => {
 			)[0];
 			headerActionsChildren.should.not.be.undefined;
 		});
+
+		it('correctly destructures `aria-` props', function () {
+			const card = getCard(this.dom);
+			card.getAttribute(ariaLabel).should.equal(ariaLabel);
+		});
+
+		it('correctly destructures `data-` props', function () {
+			const card = getCard(this.dom);
+			card.dataset.label.should.equal(dataLabel);
+		});
 	});
 
 	describe('Accepts a custom node as heading', () => {

components/card/index.jsx

@@ -23,6 +23,8 @@ import Footer from './private/footer';
 import Empty from './empty';
 
 import { CARD } from '../../utilities/constants';
+import getAriaProps from '../../utilities/get-aria-props';
+import getDataProps from '../../utilities/get-data-props';
 
 const idSuffixes = {
 	body: '__body',
@@ -32,9 +34,11 @@ const idSuffixes = {
 };
 
 /**
- * Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination.
+ * Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination. `aria-` and `data-` props can be provided and will be destructured on the root `article` element.
  */
 const Card = (props) => {
+	const ariaProps = getAriaProps(props);
+	const dataProps = getDataProps(props);
 	const bodyId = props.id ? props.id + idSuffixes.body : null;
 	const filterId = props.id ? props.id + idSuffixes.filter : null;
 	const headingId = props.id ? props.id + idSuffixes.heading : null;
@@ -51,6 +55,8 @@ const Card = (props) => {
 			id={props.id}
 			className={classnames('slds-card', props.className)}
 			style={props.style}
+			{...ariaProps}
+			{...dataProps}
 		>
 			{!props.hasNoHeader && (
 				<Header

components/component-docs.json

@@ -2497,7 +2497,7 @@
         "dependencies": []
     },
     "card": {
-        "description": "Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination.",
+        "description": "Cards are used to apply a container around a related grouping of information. It has a header, a body, and an optional footer. It often contains a DataTable or Tile (coming soon). Actions associated with selected items or with all items are included within the header actions. Footer often contains pagination. `aria-` and `data-` props can be provided and will be destructured on the root `article` element.",
         "methods": [],
         "props": {
             "bodyClassName": {