fix(progress): handle describedby like labelledby

Author: zeroedin

elements/pf-v6-progress/README.md

@@ -37,7 +37,6 @@ With helper text:
 |---|---|
 | `label` | Use `value-text` for custom measure text. Rich content (ReactNode) not supported. |
 | `tooltipPosition` | Not implemented. |
-| `aria-describedby` | Not supported. Use the `helper-text` slot for supplementary text. |
 
 ### Changed API
 
@@ -52,6 +51,7 @@ With helper text:
 | `aria-label` | `accessible-label` attribute | Screen reader name only, set via ElementInternals. Falls back to `description`, then `"Progress status"`. |
 | `hideStatusIcon` | `hide-status-icon` attribute | Boolean. Hides the variant status icon while keeping variant coloring on the bar. |
 | `aria-labelledby` | `accessible-labelledby` attribute | Accepts space-separated element ID(s). Resolves cross-root `aria-labelledby` via `ariaLabelledByElements` on ElementInternals. Takes precedence over `accessible-label` and `description`. |
+| `aria-describedby` | `accessible-describedby` attribute | Accepts space-separated element ID(s). Resolves cross-root `aria-describedby` via `ariaDescribedByElements` on ElementInternals. |
 
 ### Added
 

elements/pf-v6-progress/pf-v6-progress.ts

@@ -92,6 +92,9 @@ export class PfV6Progress extends LitElement {
   /** Space-separated ID(s) of elements that label this progress bar. Resolves cross-root aria-labelledby via ElementInternals. */
   @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;
+
 
   #internals = InternalsController.of(this, { role: 'progressbar' });
 
@@ -136,6 +139,16 @@ export class PfV6Progress extends LitElement {
         this.#internals.ariaLabelledByElements = null;
       }
     }
+    if (changed.has('accessibleDescribedby')) {
+      if (!isServer && this.accessibleDescribedby) {
+        const elements = this.accessibleDescribedby.trim().split(/\s+/)
+            .map(id => document.getElementById(id))
+            .filter((el): el is Element => el != null);
+        this.#internals.ariaDescribedByElements = elements.length ? elements : null;
+      } else {
+        this.#internals.ariaDescribedByElements = null;
+      }
+    }
     if (changed.has('accessibleLabel') || changed.has('description') || !this.hasUpdated) {
       this.#internals.ariaLabel = this.accessibleLabel ?? this.description ?? 'Progress status';
     }