Skip to content

feat(progress)!: port to pf-v6-progress element#3152

Open
zeroedin wants to merge 8 commits into
staging/pfv6from
feat/pf-v6-progress
Open

feat(progress)!: port to pf-v6-progress element#3152
zeroedin wants to merge 8 commits into
staging/pfv6from
feat/pf-v6-progress

Conversation

@zeroedin

@zeroedin zeroedin commented May 19, 2026

Copy link
Copy Markdown
Collaborator

Summary

  • Ports <pf-v5-progress> to <pf-v6-progress> web component for PatternFly v6
  • role="progressbar" via ElementInternals with ariaValueNow, ariaValueMin, ariaValueMax
  • description for visible title text, accessible-label for screen reader name, accessible-labelledby and accessible-describedby for cross-root ARIA via ElementInternals
  • Accessible name fallback chain: accessible-labelledby → accessible-label → description → "Progress status"
  • Supports size (sm/lg), measure-location (outside/inside/none), variant
    (success/warning/danger)
  • truncated boolean for CSS ellipsis overflow on description text
  • hide-status-icon to suppress variant icon while keeping variant bar color
  • value-text for custom aria-valuetext (finite step, step instruction)
  • helper-text slot for supplementary content below the bar
  • Singleline layout derived automatically when no description is set
  • Danger variant includes subtle jiggle animation with prefers-reduced-motion support
  • All CSS uses --pf-v6-c-progress--* design tokens with hex fallbacks
  • 20 demos, 33 unit tests

Intentional divergences from React

  • title → description attribute to avoid shadowing native HTML title
  • aria-label abstracted behind accessible-label attribute per ADVICE.md
  • aria-labelledby abstracted behind accessible-labelledby attribute, resolves IDs to ariaLabelledByElements via ElementInternals
  • aria-describedby abstracted behind accessible-describedby attribute, resolves IDs to ariaDescribedByElements via ElementInternals
  • isTitleTruncated → truncated boolean attribute
  • label (ReactNode) → value-text (string only)
  • measureLocation="top" is the default (no attribute needed)
  • helperText prop → helper-text slot for rich content
  • tooltipPosition not implemented (blocked on pf-v6-tooltip)
  • Status icons use FontAwesome SVGs; will switch to pf-v6-icon when available

Test plan

  • npm run test passes
  • Demos render correctly at localhost:8000 with ?rendering=chromeless
  • Visual parity with patternfly.org progress demos
  • Screen reader announces progressbar role with correct label
  • accessible-label sets aria-label without rendering visible text
  • accessible-labelledby resolves IDs and sets ariaLabelledByElements
  • accessible-describedby resolves IDs and sets ariaDescribedByElements
  • truncated truncates description with ellipsis
  • hide-status-icon suppresses variant icon while keeping bar color
  • Variant icons display for success, warning, and danger
  • prefers-reduced-motion disables danger jiggle animation
  • cem health score above 80%

Assisted-By: Claude noreply@anthropic.com

Testing Instructions

Notes to Reviewers

zeroedin added 6 commits May 15, 2026 12:40
@zeroedin
feat(progress): port pf-v5-progress to pf-v6-progress
ecc5a70 
Update progress bar element for PatternFly v6 with inline SVG status
icons, InternalsController, `helper-text` `@slot`, `value-text` and
`static-width` properties, `singleline` measure location, and v6
design tokens with CSS grid layout.

Closes #3031

Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
@zeroedin
fix(progress): address review findings from a11y, API, and demo audits
ac4e527 
Move progressbar role and all ARIA to host via InternalsController,
fix aria-valuemax to always be 100, remove unnecessary value reflection,
guard fade-in animation with prefers-reduced-motion, rename failure
demos to danger, and inline demo wrapper styles.

Assisted-By: Claude Opus 4.6 <noreply@anthropic.com>
@zeroedin
feat(progress): port pf-v5-progress to pf-v6-progress
2bf51c3
@zeroedin
fix(progress): singleline should be derived not an attribute
62cac9e
@zeroedin
fix(progress): correct missing hide-status-icon and correct info arou…
6fcf719 
…nd toolip
@zeroedin
fix(progress): handle describedby like labelledby
a4aca6c
@changeset-bot

changeset-bot Bot commented May 19, 2026 •
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 9d536fd

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@patternfly/elements Major

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions

github-actions Bot commented May 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

✅ Commitlint tests passed!

More Info 
{
  "valid": true,
  "errors": [],
  "warnings": [],
  "input": "feat(progress)!: port to pf-v6-progress element"
}

@github-actions github-actions Bot added the AT passed Automated testing has passed label May 19, 2026
@github-actions

github-actions Bot commented May 19, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

✅ Deploy Preview for patternfly-elements ready!

Name Link
🔨 Latest commit 8765622
😎 Deploy Preview https://deploy-preview-3152--patternfly-elements.netlify.app/

To edit notification comments on pull requests, go to your Netlify site settings.

@github-actions

github-actions Bot commented May 19, 2026

Copy link
Copy Markdown
Contributor

SSR Test Run for f73c140: Report

@zeroedin zeroedin marked this pull request as ready for review May 19, 2026 17:28
@github-actions

This comment has been minimized.

Sign in to view
bennypowers
bennypowers requested changes May 27, 2026
View reviewed changes

@bennypowers bennypowers left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please implement https://www.patternfly.org/components/progress#interactive-status-icon-and-measure-location demo (and all other missing demos from react site)

and rework the prose in the README tables - it's not clear what, if any, differences exist for e.g. the measureLocation prop.

Comment thread elements/pf-v6-progress/pf-v6-progress.ts
Comment on lines +94 to +97
@property({ attribute: 'accessible-labelledby' }) accessibleLabelledby?: string;

/** Space-separated ID(s) of elements that describe this progress bar. Resolves cross-root aria-describedby via ElementInternals. */
@property({ attribute: 'accessible-describedby' }) accessibleDescribedby?: string;

@bennypowers bennypowers May 27, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

these won't work, x-root aria.

cc @adamjohnson

@zeroedin zeroedin Jun 12, 2026

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe I misunderstood, but this uses the reflection api resolving IDs outward. ariaLabelledByElements, ariaDescribedByElements. That said if the ID doesn't exist in the lightdom, but a shadowroot of another component, then that is an issue for sure. If that is the suggestion in this comment, then we can remove it.

@zeroedin zeroedin changed the title feat(progress): port pf-v5-progress to pf-v6-progress element feat(progress)!: port to pf-v6-progress element Jun 12, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@bennypowers bennypowers bennypowers requested changes

Assignees

No one assigned

Labels

AT passed Automated testing has passed

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@zeroedin @bennypowers