refactor(progress): a11y optimizations (#535)

* refactor(progress): a11y optimizations

* refactor(progress): adapted HTML for the testcase

* refactor(progress): adapted HTML for the testcase

* refactor(progress): adapted HTML for the testcase

Author: mfranzke

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 ❤️');
   });
 });

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')

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>
     `);

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>
     );