From dabcbdcdbca7889b42e03eab6f25fe74c00de466 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 11 Nov 2022 20:34:53 +0100
Subject: [PATCH 1/4] refactor(progress): a11y optimizations

---
 .../src/components/db-progress/db-progress.tsx           | 9 +++++++--
 1 file changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-progress/db-progress.tsx b/packages/db-ui-elements-stencil/src/components/db-progress/db-progress.tsx
index f7aef9727..19360ada5 100644
--- a/packages/db-ui-elements-stencil/src/components/db-progress/db-progress.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-progress/db-progress.tsx
@@ -48,12 +48,17 @@ export class DbProgress {
               ? { ['--progress-conic']: `${this.value}` }
               : { ['']: '' }
           }
+          aria-describedby={this.htmlid + '-label'}
         />
         {!this.indeterminate && (
-          <output htmlFor={this.htmlid}>
+          <label
+            htmlFor={this.htmlid}
+            id={this.htmlid + '-label'}
+            aria-hidden="true"
+          >
             {this.value}
             {this.percentagesign}
-          </output>
+          </label>
         )}
       </div>
     );

From 9cb824d8b1eb2d0a578f490255dab165eb0b0807 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 11 Nov 2022 20:57:29 +0100
Subject: [PATCH 2/4] refactor(progress): adapted HTML for the testcase

---
 .../components/db-progress/__tests__/db-progress.spec.tsx   | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-progress/__tests__/db-progress.spec.tsx b/packages/db-ui-elements-stencil/src/components/db-progress/__tests__/db-progress.spec.tsx
index df45038fd..721bb6d01 100644
--- a/packages/db-ui-elements-stencil/src/components/db-progress/__tests__/db-progress.spec.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-progress/__tests__/db-progress.spec.tsx
@@ -10,8 +10,10 @@ describe('db-progress', () => {
     expect(page.root).toEqualHtml(`
       <db-progress htmlid="progress-label-01">
         <div class="elm-progress">
-          <progress id="progress-label-01"></progress>
-          <output htmlFor="progress-label-01">%</output>
+          <progress aria-describedby="progress-label-01-label" id="progress-label-01"></progress>
+          <label aria-hidden="true" htmlfor="progress-label-01" id="progress-label-01-label">
+            %
+          </label>
         </div>
       </db-progress>
     `);

From 330dba37d658ab4930a63dac60c07ef73869b067 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 11 Nov 2022 21:12:00 +0100
Subject: [PATCH 3/4] refactor(progress): adapted HTML for the testcase

---
 .../integration/99-1-showcases/showcases-other-elements.spec.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js b/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js
index af41eb77f..6a1c4a329 100644
--- a/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js
+++ b/e2e/cypress/integration/99-1-showcases/showcases-other-elements.spec.js
@@ -14,7 +14,7 @@ context('showcase', () => {
         .should('eq', 'account');
 
       // 2. DbProgress
-      cy.get('db-progress').eq(0).find('output').contains('60%');
+      cy.get('db-progress').eq(0).find('label').contains('60%');
       cy.get('db-progress')
         .eq(0)
         .find('progress')

From d1d5d5fe73f4625d0d2ef60809cd29d670589064 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Fri, 11 Nov 2022 21:59:08 +0100
Subject: [PATCH 4/4] refactor(progress): adapted HTML for the testcase

---
 e2e/cypress/integration/06-0-feedback/db-progress.spec.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/e2e/cypress/integration/06-0-feedback/db-progress.spec.js b/e2e/cypress/integration/06-0-feedback/db-progress.spec.js
index 3b5d6a944..67cf94c34 100644
--- a/e2e/cypress/integration/06-0-feedback/db-progress.spec.js
+++ b/e2e/cypress/integration/06-0-feedback/db-progress.spec.js
@@ -9,7 +9,7 @@ context('db-progress', () => {
   it('Progress should exist and be configurable', function () {
     const simpleProgress = [0, 1];
     simpleProgress.forEach((num) => {
-      cy.get('db-progress').eq(num).find('output').contains('60%');
+      cy.get('db-progress').eq(num).find('label').contains('60%');
       cy.get('db-progress')
         .eq(num)
         .find('progress')
@@ -23,6 +23,6 @@ context('db-progress', () => {
       .invoke('attr', 'indeterminate')
       .should('exist');
 
-    cy.get('db-progress').eq(3).find('output').contains('60 ❤️');
+    cy.get('db-progress').eq(3).find('label').contains('60 ❤️');
   });
 });