[EuiDescriptionList] titleProps and descriptionProps extends CommonProps

CHANGELOG.md

@@ -12,6 +12,7 @@
 - Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https://github.com/elastic/eui/pull/5135))
 - Added `useGeneratedHtmlId` utility, which memoizes the randomly generated ID on mount and prevents regenerated IDs on component rerender ([#5133](https://github.com/elastic/eui/pull/5133))
 - Fixed `z-index` styles that were causing parts of `EuiResizableContainer` to overlap `EuiHeader` ([#5164](https://github.com/elastic/eui/pull/5164))
+- Updated `titleProps` and `descriptionProps` on `EuiDescriptionList` to extend `CommonProps` ([#5166](https://github.com/elastic/eui/pull/5166))
 
 **Theme: Amsterdam**
 

src/components/description_list/__snapshots__/description_list.test.tsx.snap

@@ -28,7 +28,7 @@ exports[`EuiDescriptionList props compressed is rendered 1`] = `
 />
 `;
 
-exports[`EuiDescriptionList props listItems is rendered as strings and elements 1`] = `
+exports[`EuiDescriptionList props listItems descriptionProps is rendered 1`] = `
 <dl
   class="euiDescriptionList euiDescriptionList--row"
 >
@@ -38,7 +38,9 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
     Title 1
   </dt>
   <dd
-    class="euiDescriptionList__description"
+    aria-label="aria-label"
+    class="euiDescriptionList__description testClass1 testClass2"
+    data-test-subj="test subject string"
   >
     Description 1
   </dd>
@@ -50,7 +52,9 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
     </em>
   </dt>
   <dd
-    class="euiDescriptionList__description"
+    aria-label="aria-label"
+    class="euiDescriptionList__description testClass1 testClass2"
+    data-test-subj="test subject string"
   >
     <code>
       Description 2
@@ -61,6 +65,55 @@ exports[`EuiDescriptionList props listItems is rendered as strings and elements
   >
     Title 3
   </dt>
+  <dd
+    aria-label="aria-label"
+    class="euiDescriptionList__description testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Description 3
+  </dd>
+</dl>
+`;
+
+exports[`EuiDescriptionList props listItems titleProps is rendered 1`] = `
+<dl
+  class="euiDescriptionList euiDescriptionList--row"
+>
+  <dt
+    aria-label="aria-label"
+    class="euiDescriptionList__title testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Title 1
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    Description 1
+  </dd>
+  <dt
+    aria-label="aria-label"
+    class="euiDescriptionList__title testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    <em>
+      Title 2
+    </em>
+  </dt>
+  <dd
+    class="euiDescriptionList__description"
+  >
+    <code>
+      Description 2
+    </code>
+  </dd>
+  <dt
+    aria-label="aria-label"
+    class="euiDescriptionList__title testClass1 testClass2"
+    data-test-subj="test subject string"
+  >
+    Title 3
+  </dt>
   <dd
     class="euiDescriptionList__description"
   >

src/components/description_list/description_list.test.tsx

@@ -21,31 +21,46 @@ describe('EuiDescriptionList', () => {
     expect(component).toMatchSnapshot();
   });
 
+  const listItems = [
+    {
+      title: 'Title 1',
+      description: 'Description 1',
+    },
+    {
+      title: <em>Title 2</em>,
+      description: <code>Description 2</code>,
+    },
+    {
+      title: 'Title 3',
+      description: 'Description 3',
+    },
+  ];
   describe('props', () => {
     describe('listItems', () => {
-      test('is rendered as strings and elements', () => {
-        const listItems = [
-          {
-            title: 'Title 1',
-            description: 'Description 1',
-          },
-          {
-            title: <em>Title 2</em>,
-            description: <code>Description 2</code>,
-          },
-          {
-            title: 'Title 3',
-            description: 'Description 3',
-          },
-        ];
+      describe('titleProps', () => {
+        test('is rendered', () => {
+          const component = render(
+            <EuiDescriptionList
+              listItems={listItems}
+              titleProps={requiredProps}
+            />
+          );
 
-        const component = render(
-          <EuiDescriptionList listItems={listItems}>
-            listItems will render instead of this content
-          </EuiDescriptionList>
-        );
+          expect(component).toMatchSnapshot();
+        });
+      });
 
-        expect(component).toMatchSnapshot();
+      describe('descriptionProps', () => {
+        test('is rendered', () => {
+          const component = render(
+            <EuiDescriptionList
+              listItems={listItems}
+              descriptionProps={requiredProps}
+            />
+          );
+
+          expect(component).toMatchSnapshot();
+        });
       });
     });
 

src/components/description_list/description_list.tsx

@@ -43,11 +43,11 @@ export interface EuiDescriptionListProps {
   /**
    * Props object to be passed to `EuiDescriptionListTitle`
    */
-  titleProps?: HTMLAttributes<HTMLElement>;
+  titleProps?: HTMLAttributes<HTMLElement> & CommonProps;
   /**
    * Props object to be passed to `EuiDescriptionListDescription`
    */
-  descriptionProps?: HTMLAttributes<HTMLElement>;
+  descriptionProps?: HTMLAttributes<HTMLElement> & CommonProps;
 }
 
 const typesToClassNameMap = {