Skip to content

chore(descriptionList): add unique aria-labels to examples and demos #7706

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
rebeccaalpert merged 5 commits into from
Aug 5, 2025
Merged

chore(descriptionList): add unique aria-labels to examples and demos #7706

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ea094b9
chore(descriptionList): add unique aria-labels to examples and demos
rebeccaalpert Jul 30, 2025
55f8212
Update src/patternfly/components/DescriptionList/description-list.hbs
rebeccaalpert Jul 31, 2025
5cdc6ac
chore(descriptionList): remove title and use description-list--aria-l…
rebeccaalpert Jul 31, 2025
9a1d444
chore(card/tabs/dashboard): add aria-labels for description lists
rebeccaalpert Jul 31, 2025
a12c2d5
chore(descriptionList/tabs): update from attribute to aria-label
rebeccaalpert Jul 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions src/patternfly/components/DescriptionList/description-list.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
<dl class="{{pfv}}description-list{{#if description-list--modifier}} {{description-list--modifier}}{{/if}}"
{{#if description-list--aria-label}}
aria-label="{{description-list--aria-label}}"
{{/if}}
{{#if description-list--attribute}}
{{{description-list--attribute}}}
{{/if}}>
Expand Down
59 changes: 30 additions & 29 deletions src/patternfly/components/DescriptionList/examples/DescriptionList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,118 +8,118 @@ cssPrefix: pf-v6-c-description-list

### Default
```hbs
{{> description-list__example description-list--title="Default DL"}}
{{> description-list__example description-list--aria-label="Default example"}}
```

### Term help text
```hbs
{{> description-list__example description-list--title="Term help text" description-list-term--IsHelp="true"}}
{{> description-list__example description-list--aria-label="Term help text example" description-list-term--IsHelp="true"}}
```

### Default, two column
```hbs
{{> description-list__example description-list--title="Default 2 column DL" description-list--modifier="pf-m-2-col" description-list--IsLongDescription="true"}}
{{> description-list__example description-list--aria-label="Default, two column example" description-list--modifier="pf-m-2-col" description-list--IsLongDescription="true"}}
```

### Default, three column on lg breakpoint
```hbs
{{> description-list__example description-list--title="Default 3 column DL" description-list--modifier="pf-m-3-col-on-lg"}}
{{> description-list__example description-list--aria-label="Default, three column on lg breakpoint example" description-list--modifier="pf-m-3-col-on-lg"}}
```

### Horizontal
```hbs
{{> description-list__example description-list--title="Horizontal DL" description-list--modifier="pf-m-horizontal"}}
{{> description-list__example description-list--aria-label="Horizontal example" description-list--modifier="pf-m-horizontal"}}
```

### Horizontal, two column
```hbs
{{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-2-col"}}
{{> description-list__example description-list--aria-label="Horizontal, two column example" description-list--modifier="pf-m-horizontal pf-m-2-col"}}
```

### Horizontal, three column on lg breakpoint
```hbs
{{> description-list__example description-list--title="Horizontal 3 column DL" description-list--modifier="pf-m-horizontal pf-m-3-col-on-lg"}}
{{> description-list__example description-list--aria-label="Horizontal, three column on lg breakpoint example" description-list--modifier="pf-m-horizontal pf-m-3-col-on-lg"}}
```

### Compact
```hbs
{{> description-list__example description-list--title="Compact DL" description-list--modifier="pf-m-compact"}}
{{> description-list__example description-list--aria-label="Compact example" description-list--modifier="pf-m-compact"}}
```

### Compact horizontal
```hbs
{{> description-list__example description-list--title="Compact DL" description-list--modifier="pf-m-compact pf-m-horizontal pf-m-2-col"}}
{{> description-list__example description-list--aria-label="Compact horizontal example" description-list--modifier="pf-m-compact pf-m-horizontal pf-m-2-col"}}
```

### Fluid horizontal
```hbs
{{> description-list__example description-list--title="Fluid DL" description-list--modifier="pf-m-horizontal pf-m-fluid pf-m-2-col"}}
{{> description-list__example description-list--aria-label="Fluid horizontal example" description-list--modifier="pf-m-horizontal pf-m-fluid pf-m-2-col"}}
```

### Column fill

Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. **Note:** using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.

```hbs
{{> description-list__example description-list--title="Column fill" description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg" description-list--IsLongDescription="true"}}
{{> description-list__example description-list--aria-label="Column fill example" description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg" description-list--IsLongDescription="true"}}
```

## Auto fit

### Auto-fit basic
```hbs
{{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}}
{{> description-list__example description-list--aria-label="Auto-fit basic example" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}}
```

### Auto-fit, min width modified, grid template columns
```hbs
{{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"'}}
{{> description-list__example description-list--aria-label="Auto-fit, min width modified, grid template columns example" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min: 200px;"' description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}}
```

### Auto-fit, min width modified, responsive grid template columns
```hbs
{{> description-list__example description-list--title="Auto-fit" description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"'}}
{{> description-list__example description-list--aria-label="Auto-fit, min width modified, responsive grid template columns example" description-list--attribute='style="--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;"' description-list--header="Auto fit" description-list--modifier="pf-m-auto-fit"}}
```

## Responsive column definitions

### Default, responsive columns
```hbs
{{> description-list__example description-list--title="Default responsive DL" description-list--modifier="pf-m-2-col-on-lg pf-m-3-col-on-xl"}}
{{> description-list__example description-list--aria-label="Default, responsive columns example" description-list--modifier="pf-m-2-col-on-lg pf-m-3-col-on-xl"}}
```

### Horizontal, responsive columns
```hbs
{{> description-list__example description-list--title="Horizontal responsive DL columns" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"}}
{{> description-list__example description-list--aria-label="Horizontal, responsive columns example" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl"}}
```

### Responsive, horizontal, vertical group layout
```hbs
{{> description-list__example description-list--title="Horizontal responsive DL groups" description-list--modifier="pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"}}
{{> description-list__example description-list--aria-label="Responsive, horizontal, vertical group layout example" description-list--modifier="pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl"}}
```

## Auto-column-width

### Default, auto columns width
```hbs
{{> description-list__example description-list--title="Auto column width DL" description-list--modifier="pf-m-auto-column-widths pf-m-3-col"}}
{{> description-list__example description-list--aria-label="Default, auto columns width example" description-list--modifier="pf-m-auto-column-widths pf-m-3-col"}}
```

### Horizontal, auto column width
```hbs
{{> description-list__example description-list--title="Horizontal ato-fit DL" description-list--modifier="pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"}}
{{> description-list__example description-list--aria-label="Horizontal, auto column width example" description-list--modifier="pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg"}}
```

## Inline grid

### Default, inline grid
```hbs
{{> description-list__example description-list--title="Default inline grid" description-list--modifier="pf-m-3-col pf-m-inline-grid"}}
{{> description-list__example description-list--aria-label="Default, inline grid example" description-list--modifier="pf-m-3-col pf-m-inline-grid"}}
```

### Display variant
```hbs
{{> description-list__example description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg" description-list--title="Card DL"}}
{{> description-list__example description-list--aria-label="Display variant example" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg"}}
```

## Card variants
Expand All @@ -128,41 +128,42 @@ Cards can be used as description list group wrappers. Using cards in this way ap

### Description list group wrapper as card
```hbs
{{> description-list__example description-list--modifier="pf-m-2-col-on-lg" description-list-group--IsCard="true" description-list--title="Card DL"}}
{{> description-list__example description-list--aria-label="Description list group wrapper as card example" description-list--modifier="pf-m-2-col-on-lg" description-list-group--IsCard="true"}}
```

### Display lg and card variant
```hbs
{{> description-list__example description-list-group--IsCard="true" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg" description-list--title="Card DL"}}
{{> description-list__example description-list--aria-label="Display lg and card variant example" description-list-group--IsCard="true" description-list--modifier="pf-m-display-lg pf-m-2-col-on-lg"}}
```

### Display 2xl and card variant
```hbs
{{> description-list__example description-list-group--IsCard="true" description-list--modifier="pf-m-display-2xl pf-m-2-col-on-lg" description-list--title="Card DL"}}
{{> description-list__example description-list--aria-label="Display 2xl and card variant example" description-list-group--IsCard="true" description-list--modifier="pf-m-display-2xl pf-m-2-col-on-lg"}}
```

### Display and card variant, three column on lg breakpoint
```hbs
{{> description-list__example description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-3-col-on-lg pf-m-display-lg" description-list--title="Card DL"}}
{{> description-list__example description-list--aria-label="Display and card variant, three column on lg breakpoint example" description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-3-col-on-lg pf-m-display-lg"}}
```

### Display and card variant, horizontal, modified term width
```hbs
{{> description-list__example description-list--attribute='style="--pf-v6-c-description-list__term--width: 10ch;"' description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal" description-list--title="Card DL"}}
{{> description-list__example description-list--aria-label="Display and card variant, horizontal, modified term width example" description-list--attribute='style="--pf-v6-c-description-list__term--width: 10ch;"' description-list__example--IsShort="true" description-list-group--IsCard="true" description-list--modifier="pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal"}}
```

<!-- ## Auto term with is only supported in FF currently

### Horizontal 2 col auto term width
```hbs
{{> description-list__example description-list--title="Horizontal 2 column DL" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
{{> description-list__example
description-list--aria-label="Horizontal 2 column auto term width example" description-list--modifier="pf-m-horizontal pf-m-auto-term-widths pf-m-2-col"}}
``` -->

## With icons

### Icons on terms
```hbs
{{> description-list__example-with-icons description-list--title="With icon"}}
{{> description-list__example-with-icons description-list--aria-label="Icons on terms example"}}
```

## Documentation
Expand All @@ -171,7 +172,7 @@ Cards can be used as description list group wrappers. Using cards in this way ap

| Attribute | Applied to | Outcome |
| -- | -- | -- |
| `title` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
| `aria-label` | `.pf-v6-c-description-list` | Provides an accessible title for the description list. **Required** |
| `tabindex="0"` | `.pf-v6-c-description-list__text.pf-m-help-text` | Inserts the `.pf-v6-c-description-list__text` into the tab order of the page so that it is focusable. **Required when the element is clickable** |

### Usage
Expand Down
11 changes: 6 additions & 5 deletions src/patternfly/demos/Card/examples/Card.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -177,7 +177,7 @@ import './Card.css'
{{/title}}
{{/card-title}}
{{#> card-body}}
{{#> description-list}}
{{#> description-list description-list--aria-label="API 1"}}
{{#> description-list-group}}
{{#> description-list-term}}
Cluster API Address
Expand Down Expand Up @@ -232,7 +232,7 @@ import './Card.css'
{{/title}}
{{/card-title}}
{{#> card-body}}
{{#> description-list}}
{{#> description-list description-list--aria-label="API 2" }}
{{#> description-list-group}}
{{#> description-list-term}}
Cluster API Address
Expand Down Expand Up @@ -547,7 +547,8 @@ import './Card.css'
{{/card-body}}
{{#> card-body}}
{{#> tab-content tab-content--IsActive="true" tab-content--attribute=(concat 'id="' primary-detail-template--id '-tab1-panel"')}}
{{#> description-list description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg"}}
{{#> description-list
description-list--aria-label="Status" description-list--modifier="pf-m-horizontal pf-m-2-col-on-lg"}}
{{#> description-list-group}}
{{#> description-list-term}}
{{#> description-list-text}}
Expand Down Expand Up @@ -1029,7 +1030,7 @@ import './Card.css'
{{/card-header-main}}
{{/card-header}}
{{#> card-body}}
{{#> description-list}}
{{#> description-list description-list--aria-label="Activity" }}
{{#> description-list-group}}
{{#> description-list-term}}
Readiness probe failed
Expand Down Expand Up @@ -1119,7 +1120,7 @@ import './Card.css'
{{/card-header-main}}
{{/card-header}}
{{#> card-body}}
{{#> description-list}}
{{#> description-list description-list--aria-label="Events" }}
{{#> description-list-group}}
{{#> description-list-term}}
{{#> l-flex l-flex--modifier="pf-m-nowrap pf-m-space-items-sm"}}
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/demos/Card/templates/card-template-details.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
{{/title}}
{{/card-title}}
{{#> card-body}}
{{#> description-list}}
{{#> description-list description-list--aria-label="Details"}}
{{#> description-list-group}}
{{#> description-list-term}}
Cluster API Address
Expand Down
2 changes: 1 addition & 1 deletion src/patternfly/demos/Card/templates/card-template-events.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
{{/card-title}}
{{/card-header}}
{{#> card-body}}
{{#> description-list description-list--modifier="pf-m-compact"}}
{{#> description-list description-list--aria-label="Events" description-list--modifier="pf-m-compact"}}
{{#> description-list-group}}
{{#> description-list-term}}
{{#> l-flex l-flex--modifier="pf-m-nowrap"}}
Expand Down
9 changes: 5 additions & 4 deletions src/patternfly/demos/DescriptionList/examples/DescriptionList.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,8 @@ cssPrefix: pf-d-description-list
{{/card-header}}
{{> divider}}
{{#> card-body}}
{{> description-list-template description-list--modifier="pf-m-auto-fit"}}
{{> description-list-template description-list--modifier="pf-m-auto-fit"
description-list--aria-label="Details"}}
{{/card-body}}
{{/card}}
{{/page-main-section}}
Expand All @@ -34,7 +35,7 @@ cssPrefix: pf-d-description-list
{{> page-template page-template--id="description-list-in-drawer-example" page-template--IsDrawer="true" page-template--drawer-panel--IsOpen="true"}}

{{#*inline "page-template-drawer-panel-tab-content"}}
{{#> description-list description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-compact"}}
{{#> description-list description-list--aria-label="Overview" description-list--modifier="pf-m-fill-columns pf-m-2-col pf-m-compact"}}
{{#> description-list-group}}
{{#> description-list-term}}
{{#> description-list-text}}
Expand Down Expand Up @@ -283,7 +284,7 @@ cssPrefix: pf-d-description-list
{{/title}}
{{/grid-item}}
{{#> grid-item}}
{{#> description-list description-list--modifier="pf-m-2-col-on-xl"}}
{{#> description-list description-list--aria-label="Service overview" description-list--modifier="pf-m-2-col-on-xl"}}
{{#> description-list-group}}
{{#> description-list-term}}
{{#> description-list-text}}
Expand Down Expand Up @@ -386,7 +387,7 @@ cssPrefix: pf-d-description-list
{{/title}}
{{/grid-item}}
{{#> grid-item}}
{{#> description-list}}
{{#> description-list description-list--aria-label="Service routing"}}
{{#> description-list-group}}
{{#> description-list-term}}
{{#> description-list-text}}
Expand Down
7 changes: 5 additions & 2 deletions src/patternfly/demos/Tabs/examples/Tabs.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ section: components
{{> title titleType="h2" title--modifier="pf-m-lg pf-v6-u-mt-sm" title--text="Pod details" title--attribute=(concat 'id="' tabs-template-pod-tab-content--id '-details-title"')}}
{{/l-flex-item}}
{{#> l-flex-item}}
{{#> description-list description-list--modifier="pf-m-2-col-on-lg" description-list--attribute=(concat 'aria-labelledby="' tabs-template-pod-tab-content--id '-details-title"')}}
{{#> description-list
description-list--aria-label="API 1" description-list--modifier="pf-m-2-col-on-lg" description-list--attribute=(concat 'aria-labelledby="' tabs-template-pod-tab-content--id '-details-title"')}}
{{#> description-list-group}}
{{#> description-list-term}}
Name
Expand Down Expand Up @@ -169,7 +170,9 @@ section: components
{{#> tabs-template-pod-tab-content tab-content-body--modifier=reset tabs--id=(concat tabs-template--id '-secondary') tabs-template-pod-tab-content--IsSecondary="true"}}
{{#> l-flex l-flex--modifier="pf-m-column"}}
{{#> l-flex-item}}
{{#> description-list description-list--modifier="pf-m-2-col-on-lg" description-list--attribute='aria-label="Pod information list"'}}
{{#> description-list
description-list--aria-label="API 2" description-list--modifier="pf-m-2-col-on-lg"
description-list--aria-label="Pod information list" }}
{{#> description-list-group}}
{{#> description-list-term}}
Name
Expand Down