fix: Migrate object status to 0.12.0 (#3381)

* fix: Add template to object status * Fix A11y
SAP · Sep 25, 2020 · 6859aa2 · 6859aa2
1 parent fcaa80a
commit 6859aa2
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 14 deletions.
diff --git a/...p/core/component-docs/object-status/examples/object-status-default-example.component.html b/...p/core/component-docs/object-status/examples/object-status-default-example.component.html
@@ -1,5 +1,5 @@
-<span fd-object-status [glyph]="'to-be-reviewed'"></span>
-<span fd-object-status [status]="'negative'" [glyph]="'status-negative'"></span>
-<span fd-object-status [status]="'critical'" [glyph]="'status-critical'"></span>
-<span fd-object-status [status]="'positive'" [glyph]="'status-positive'"></span>
-<span fd-object-status [status]="'informative'" [glyph]="'hint'"></span>
+<span fd-object-status glyph="to-be-reviewed" glyphAriaLabel="Check for review"></span>
+<span fd-object-status status="negative" glyph="status-negative" glyphAriaLabel="Negative"></span>
+<span fd-object-status status="critical" glyph="status-critical" glyphAriaLabel="Critical"></span>
+<span fd-object-status status="positive" glyph="status-positive" glyphAriaLabel="Positive"></span>
+<span fd-object-status status="informative" glyph="hint" glyphAriaLabel="Show More"></span>
diff --git a/libs/core/src/lib/object-status/object-status.component.spec.ts b/libs/core/src/lib/object-status/object-status.component.spec.ts
@@ -39,13 +39,6 @@ describe('ObjectStatusComponent', () => {
         expect(component.elementRef().nativeElement.classList.contains('fd-object-status--positive')).toBe(true);
     });
 
-    it('Should Add Glyph', () => {
-        component.glyph = 'status-negative';
-        component.buildComponentCssClass();
-        fixture.detectChanges();
-        expect(component.elementRef().nativeElement.classList.contains('sap-icon--status-negative')).toBe(true);
-    });
-
     it('Should Add Indication Color', () => {
         component.indicationColor = 2;
         component.buildComponentCssClass();

diff --git a/libs/core/src/lib/object-status/object-status.component.ts b/libs/core/src/lib/object-status/object-status.component.ts
@@ -14,7 +14,16 @@ export type ObjectStatus = 'negative' | 'critical' | 'positive' | 'informative';
 @Component({
     // tslint:disable-next-line:component-selector
     selector: '[fd-object-status]',
-    template: `<ng-content></ng-content>`,
+    template: `
+        <i class="fd-object-status__icon"
+           *ngIf="glyph"
+           [ngClass]="'sap-icon--' + glyph"
+           [attr.role]="glyphAriaLabel ? 'presentation': ''"
+           [attr.aria-label]="glyphAriaLabel"></i>
+        <span class="fd-object-status__text">
+            <ng-content></ng-content>
+        </span>
+    `,
     styleUrls: ['./object-status.component.scss'],
     encapsulation: ViewEncapsulation.None,
     changeDetection: ChangeDetectionStrategy.OnPush
@@ -38,6 +47,12 @@ export class ObjectStatusComponent implements OnChanges, OnInit, CssClassBuilder
     @Input()
     glyph: string;
 
+    /**
+     * Label applied to glyph element, should be used when there is not text included
+     */
+    @Input()
+    glyphAriaLabel: string;
+
     /**
      * A number representing the indication color.
      * Option includes numbers from 1 to 8
@@ -81,7 +96,6 @@ export class ObjectStatusComponent implements OnChanges, OnInit, CssClassBuilder
             this.inverted ? 'fd-object-status--inverted' : '',
             this.large ? 'fd-object-status--large' : '',
             this.status ? `fd-object-status--${this.status}` : '',
-            this.glyph ? `sap-icon--${this.glyph}` : '',
             this.indicationColor ? `fd-object-status--indication-${this.indicationColor}` : '',
             this.clickable ? 'fd-object-status--link' : '',
             this.class