refactor(progress): replaced output by label due to a11y testing (#165)

refactor(progress): replaced output by label due to a11y testing feedback

Author: mfranzke

source/_patterns/01-elements/progress/progress.hbs

@@ -1,5 +1,18 @@
 <div class="elm-progress">
-	<progress {{#if value}}value="{{ value }}" {{#if maximalvalue }} max="{{ maximalvalue }}" {{/if}}{{#if conic}}
-		style="--progress-conic: {{ value }}" {{/if}}{{/if}} id="{{ id }}"{{#if type}} data-type="{{type}}"{{/if }}></progress>
-	{{#if_eq type 'loader'}}{{#if value}}<output for="{{ id }}">{{ value }}{{ unit }}</output>{{/if}}{{/if_eq}}
+	<progress
+		{{#if value}}
+			value="{{ value }}"
+			{{#if maximalvalue }} max="{{ maximalvalue }}"{{/if}}
+			{{#if conic}} style="--progress-conic: {{ value }}"{{/if}}
+		{{/if}}
+		id="{{ id }}"
+		{{#if type}} data-type="{{type}}"{{/if }}
+		aria-describedby="{{ id }}-label"></progress>
+	{{#if_eq type 'loader'}}
+		{{#if value}}<label
+			for="{{ id }}"
+			id="{{ id }}-label"
+			aria-hidden="true">{{ value }}{{ unit }}</label>
+		{{/if}}
+	{{/if_eq}}
 </div>

source/_patterns/01-elements/progress/progress.json

@@ -2,6 +2,6 @@
 	"value": "68",
 	"maximalvalue": "100",
 	"unit": "%",
-	"id": "progress-label-01",
+	"id": "progress-01",
 	"type": "loader"
 }

source/_patterns/01-elements/progress/progress.scss

@@ -96,7 +96,8 @@
 					background: none;
 				}
 
-				& + output {
+				& + output, // legacy; TODO: remove with the next major release
+				& + label {
 					align-items: center;
 					background: $progress-conic-inner-backgroundColor; // * TODO: possibly rework variable naming
 					border-radius: 50%;

source/_patterns/01-elements/progress/progress~circular-loader-dark-background.json

@@ -1,4 +1,4 @@
 {
-	"id": "progress-label-06",
+	"id": "progress-06",
 	"conic": true
 }

source/_patterns/01-elements/progress/progress~circular-loader.json

@@ -1,4 +1,4 @@
 {
-	"id": "progress-label-04",
+	"id": "progress-04",
 	"conic": true
 }

source/_patterns/01-elements/progress/progress~dark-background.json

@@ -1,3 +1,3 @@
 {
-	"id": "progress-label-03"
+	"id": "progress-03"
 }

source/_patterns/01-elements/progress/progress~linear-spinner-indeterminate.json

@@ -1,5 +1,5 @@
 {
 	"value": "",
-	"id": "progress-label-08",
+	"id": "progress-08",
 	"type": "spinner"
 }

source/_patterns/01-elements/progress/progress~linear-spinner.json

@@ -1,5 +1,5 @@
 {
 	"value": "68",
-	"id": "progress-label-07",
+	"id": "progress-07",
 	"type": "spinner"
 }