fix(consumption): Added ariaLabelProgress to the consumption.

In order to fulfil accessibility requirements, the progress-bar inside the consumption needs the ability to pass an aria-label to it.
dynatrace-oss · Dec 10, 2020 · 5a10dc0 · 5a10dc0
1 parent 6d954fd
commit 5a10dc0
Show file tree

Hide file tree

Showing 5 changed files with 37 additions and 43 deletions.
diff --git a/libs/barista-components/consumption/src/consumption.html b/libs/barista-components/consumption/src/consumption.html
@@ -17,6 +17,7 @@
   [max]="max"
   [color]="color"
   class="dt-consumption-progress-bar"
+  [attr.aria-label]="ariaLabelProgress"
 ></dt-progress-bar>
 
 <ng-content

diff --git a/libs/barista-components/consumption/src/consumption.ts b/libs/barista-components/consumption/src/consumption.ts
@@ -96,7 +96,8 @@ const KEY_RETURN = 13;
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.Emulated,
 })
-export class DtConsumption extends _DtConsumption
+export class DtConsumption
+  extends _DtConsumption
   implements AfterViewInit, OnDestroy {
   /** Largest possible {@link value} for this consumption component instance. */
   @Input()
@@ -130,6 +131,10 @@ export class DtConsumption extends _DtConsumption
     }
   }
 
+  /** Defines the aria-label on the progress element. */
+  @Input()
+  ariaLabelProgress: string;
+
   /** @internal Tab index */
   _tabIndex = -1;
 

diff --git a/libs/examples/src/consumption/consumption-default-example/consumption-default-example.html b/libs/examples/src/consumption/consumption-default-example/consumption-default-example.html
@@ -1,27 +1,23 @@
-<dt-consumption [max]="max" [value]="value">
+<dt-consumption
+  [max]="max"
+  [value]="value"
+  ariaLabelProgress="Host unit consumption"
+>
   <dt-consumption-icon aria-label="Host">
     <dt-icon name="host"></dt-icon>
   </dt-consumption-icon>
-  <dt-consumption-title>
-    Host units
-  </dt-consumption-title>
+  <dt-consumption-title> Host units </dt-consumption-title>
 
   <dt-consumption-count>
     {{ value | dtCount }}/{{ max | dtCount }}
   </dt-consumption-count>
 
-  <dt-consumption-label>
-    Restricted host unit hours
-  </dt-consumption-label>
+  <dt-consumption-label> Restricted host unit hours </dt-consumption-label>
 
   <dt-consumption-overlay>
     <dt-consumption [max]="max" [value]="value" class="overlay-value-panel">
-      <dt-consumption-title>
-        Host units
-      </dt-consumption-title>
-      <dt-consumption-subtitle>
-        Quota
-      </dt-consumption-subtitle>
+      <dt-consumption-title> Host units </dt-consumption-title>
+      <dt-consumption-subtitle> Quota </dt-consumption-subtitle>
       <dt-consumption-count>
         {{ value | dtCount }}/{{ max | dtCount }}
       </dt-consumption-count>

diff --git a/libs/examples/src/consumption/consumption-error-example/consumption-error-example.html b/libs/examples/src/consumption/consumption-error-example/consumption-error-example.html
@@ -1,27 +1,24 @@
-<dt-consumption [max]="max" [value]="value" color="error">
+<dt-consumption
+  [max]="max"
+  [value]="value"
+  color="error"
+  ariaLabelProgress="Log analytics storage progress"
+>
   <dt-consumption-icon aria-label="Log file">
     <dt-icon name="logfile"></dt-icon>
   </dt-consumption-icon>
-  <dt-consumption-title>
-    Log analytics
-  </dt-consumption-title>
+  <dt-consumption-title> Log analytics </dt-consumption-title>
 
   <dt-consumption-count>
     {{ value | dtMegabytes }}/{{ max | dtMegabytes }}
   </dt-consumption-count>
 
-  <dt-consumption-label>
-    Restricted overages
-  </dt-consumption-label>
+  <dt-consumption-label> Restricted overages </dt-consumption-label>
 
   <dt-consumption-overlay>
     <dt-consumption [max]="max" [value]="value" color="error">
-      <dt-consumption-title>
-        Log analytics
-      </dt-consumption-title>
-      <dt-consumption-subtitle>
-        Quota
-      </dt-consumption-subtitle>
+      <dt-consumption-title> Log analytics </dt-consumption-title>
+      <dt-consumption-subtitle> Quota </dt-consumption-subtitle>
       <dt-consumption-count>
         {{ value | dtMegabytes }}/{{ max | dtMegabytes }}
       </dt-consumption-count>

diff --git a/libs/examples/src/consumption/consumption-warning-example/consumption-warning-example.html b/libs/examples/src/consumption/consumption-warning-example/consumption-warning-example.html
@@ -1,18 +1,19 @@
-<dt-consumption [max]="max" [value]="value" color="warning">
+<dt-consumption
+  [max]="max"
+  [value]="value"
+  color="warning"
+  ariaLabelProgress="DEM unit consumption progress"
+>
   <dt-consumption-icon aria-label="User Group">
     <dt-icon name="usergroup"></dt-icon>
   </dt-consumption-icon>
-  <dt-consumption-title>
-    DEM units
-  </dt-consumption-title>
+  <dt-consumption-title> DEM units </dt-consumption-title>
 
   <dt-consumption-count>
     {{ value | dtCount }}/{{ max | dtCount }}
   </dt-consumption-count>
 
-  <dt-consumption-label>
-    Flexible overages
-  </dt-consumption-label>
+  <dt-consumption-label> Flexible overages </dt-consumption-label>
 
   <dt-consumption-overlay>
     <dt-consumption
@@ -21,12 +22,8 @@
       color="warning"
       class="overlay-value-panel"
     >
-      <dt-consumption-title>
-        DEM units
-      </dt-consumption-title>
-      <dt-consumption-subtitle>
-        Quota
-      </dt-consumption-subtitle>
+      <dt-consumption-title> DEM units </dt-consumption-title>
+      <dt-consumption-subtitle> Quota </dt-consumption-subtitle>
       <dt-consumption-count>
         {{ quota | dtCount }}/{{ quota | dtCount }}
       </dt-consumption-count>
@@ -38,9 +35,7 @@
       color="warning"
       class="overlay-value-panel"
     >
-      <dt-consumption-subtitle>
-        Flexible overages
-      </dt-consumption-subtitle>
+      <dt-consumption-subtitle> Flexible overages </dt-consumption-subtitle>
       <dt-consumption-count>
         {{ flexibleOverages | dtCount }}/unlimited
       </dt-consumption-count>