Chore(DescriptionList): added unique aria-labels

Mash707 · Mash707 · commit 0d2c20a7df67 · 2025-03-12T00:02:11.000+05:30
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListAutoFitBasic: React.FunctionComponent = () => (
-  <DescriptionList isAutoFit>
+  <DescriptionList isAutoFit aria-label="Basic auto-fit">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx
@@ -9,7 +9,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListAutoFitMinWidthModified: React.FunctionComponent = () => (
-  <DescriptionList isAutoFit autoFitMinModifier={{ default: '200px' }}>
+  <DescriptionList
+    isAutoFit
+    autoFitMinModifier={{ default: '200px' }}
+    aria-label="Auto-fit grid with minimum width modification"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx
@@ -9,7 +9,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListAutoFitMinWidthResponsive: React.FunctionComponent = () => (
-  <DescriptionList isAutoFit autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}>
+  <DescriptionList
+    isAutoFit
+    autoFitMinModifier={{ md: '100px', lg: '150px', xl: '200px', '2xl': '300px' }}
+    aria-label="Responsive auto-fit grid with minimum width"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListBasic: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Basic description list">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx
@@ -9,7 +9,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListColumnFill: React.FunctionComponent = () => (
-  <DescriptionList isFillColumns columnModifier={{ default: '2Col', lg: '3Col' }}>
+  <DescriptionList
+    isFillColumns
+    columnModifier={{ default: '2Col', lg: '3Col' }}
+    aria-label="Description list with column fill enabled"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListCompact: React.FunctionComponent = () => (
-  <DescriptionList isCompact>
+  <DescriptionList isCompact aria-label="Compact description list">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListCompactHorizontal: React.FunctionComponent = () => (
-  <DescriptionList isCompact isHorizontal>
+  <DescriptionList isCompact isHorizontal aria-label="Compact horizontal description list">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultAutoColumn: React.FunctionComponent = () => (
-  <DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }}>
+  <DescriptionList isAutoColumnWidths columnModifier={{ default: '3Col' }} aria-label="Default auto column width">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultInlineGrid: React.FunctionComponent = () => (
-  <DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid>
+  <DescriptionList columnModifier={{ default: '3Col' }} isInlineGrid aria-label="Default inline grid">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx
@@ -9,7 +9,10 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultResponsiveColumns: React.FunctionComponent = () => (
-  <DescriptionList columnModifier={{ lg: '2Col', xl: '3Col' }}>
+  <DescriptionList
+    columnModifier={{ lg: '2Col', xl: '3Col' }}
+    aria-label="Default responsive columns based on screen size"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDefaultThreeColLg: React.FunctionComponent = () => (
-  <DescriptionList columnModifier={{ lg: '3Col' }}>
+  <DescriptionList columnModifier={{ lg: '3Col' }} aria-label="Three-column description list on large screens">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx
@@ -13,6 +13,7 @@ export const DescriptionListDefaultTwoCol: React.FunctionComponent = () => (
     columnModifier={{
       default: '2Col'
     }}
+    aria-label="Two-column description list"
   >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx
@@ -3,7 +3,13 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDisplaySizeAndCardHorizontalTermWidth: React.FunctionComponent = () => (
-  <DescriptionList displaySize="lg" isHorizontal columnModifier={{ lg: '2Col' }} termWidth="10ch">
+  <DescriptionList
+    displaySize="lg"
+    isHorizontal
+    columnModifier={{ lg: '2Col' }}
+    termWidth="10ch"
+    aria-label="Display size with card, horizontal and modified term width"
+  >
     <Card component="div">
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx
@@ -3,7 +3,11 @@ import { Button, DescriptionList, DescriptionListTerm, DescriptionListDescriptio
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListDisplayLgAndCardThreeColumn: React.FunctionComponent = () => (
-  <DescriptionList displaySize="lg" columnModifier={{ lg: '3Col' }}>
+  <DescriptionList
+    displaySize="lg"
+    columnModifier={{ lg: '3Col' }}
+    aria-label="Display size with card and three column on large breakpoint"
+  >
     <Card component="div">
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListFluidHorizontal: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal isFluid>
+  <DescriptionList isHorizontal isFluid aria-label="Fluid horizontal description list">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx
@@ -9,7 +9,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontal: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal>
+  <DescriptionList isHorizontal aria-label="Horizontal description list">
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx
@@ -9,7 +9,12 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalAutoColumn: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal isAutoColumnWidths columnModifier={{ lg: '2Col' }}>
+  <DescriptionList
+    isHorizontal
+    isAutoColumnWidths
+    columnModifier={{ lg: '2Col' }}
+    aria-label="Horizontal auto column width"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx
@@ -19,6 +19,7 @@ export const DescriptionListHorizontalCustomTermWidth: React.FunctionComponent =
       xl: '30ch',
       '2xl': '35ch'
     }}
+    aria-label="Horizontal description list with custom term width modifier"
   >
     <DescriptionListGroup>
       <DescriptionListTerm>Name longer than the default term width</DescriptionListTerm>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx
@@ -9,7 +9,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalResponsiveColumns: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal columnModifier={{ lg: '2Col', xl: '3Col' }}>
+  <DescriptionList
+    isHorizontal
+    columnModifier={{ lg: '2Col', xl: '3Col' }}
+    aria-label="Horizontal responsive columns based on screen size"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx
@@ -9,7 +9,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalThreeColLg: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal columnModifier={{ lg: '3Col' }}>
+  <DescriptionList
+    isHorizontal
+    columnModifier={{ lg: '3Col' }}
+    aria-label="Three-columns horizontal description list on large screens"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx
@@ -9,7 +9,11 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListHorizontalTwoCol: React.FunctionComponent = () => (
-  <DescriptionList isHorizontal columnModifier={{ default: '2Col' }}>
+  <DescriptionList
+    isHorizontal
+    columnModifier={{ default: '2Col' }}
+    aria-label="Two-column horizontal description list"
+  >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx
@@ -14,7 +14,7 @@ import GlobeIcon from '@patternfly/react-icons/dist/esm/icons/globe-icon';
 import FlagIcon from '@patternfly/react-icons/dist/esm/icons/flag-icon';
 
 export const DescriptionListIconsOnTerms: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Description list with icons">
     <DescriptionListGroup>
       <DescriptionListTerm icon={<CubeIcon />}>Name</DescriptionListTerm>
       <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx
@@ -17,6 +17,7 @@ export const DescriptionListResponsiveHoriVertGroup: React.FunctionComponent = (
       xl: 'vertical',
       '2xl': 'horizontal'
     }}
+    aria-label="Responsive layout based on orientation"
   >
     <DescriptionListGroup>
       <DescriptionListTerm>Name</DescriptionListTerm>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx
@@ -29,7 +29,7 @@ export const DescriptionListWithCard: React.FunctionComponent = () => {
           name="toggle-isSelectable"
         />
       </div>
-      <DescriptionList columnModifier={{ lg: '2Col' }}>
+      <DescriptionList columnModifier={{ lg: '2Col' }} aria-label="Description list with card">
         <Card component="div" isSelectable={isSelectable}>
           <DescriptionListTerm>Name</DescriptionListTerm>
           <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx
@@ -30,7 +30,7 @@ export const DescriptionListWithLargeDisplaySize: React.FunctionComponent = () =
           name="toggle-display-size"
         />
       </div>
-      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }} aria-label="Large display size">
         <DescriptionListGroup>
           <DescriptionListTerm>Name</DescriptionListTerm>
           <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx
@@ -30,7 +30,11 @@ export const DescriptionListWithLargeDisplaySizeAndCard: React.FunctionComponent
           name="toggle-display-size-with-card"
         />
       </div>
-      <DescriptionList displaySize={displaySize} columnModifier={{ lg: '2Col' }}>
+      <DescriptionList
+        displaySize={displaySize}
+        columnModifier={{ lg: '2Col' }}
+        aria-label="Description list with large display size and card"
+      >
         <Card component="div">
           <DescriptionListTerm>Name</DescriptionListTerm>
           <DescriptionListDescription>Example</DescriptionListDescription>
diff --git a/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx b/packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx
@@ -11,7 +11,7 @@ import {
 import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
 
 export const DescriptionListWithTermHelpText: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Term help text">
     <DescriptionListGroup>
       <DescriptionListTermHelpText>
         <Popover headerContent={<div>Name</div>} bodyContent={<div>Additional name info</div>}>
