* Add new color variables to meet WCAG level AA color contrast for info cards and cluster health label
* Increase font size of cluster health label for better legibility with updated color
* Apply darker warning color for logs summary description and increase their font size and font-weight
* Add accessible names for info group icons
* Replace health status labels HEALTH_OK, HEALTH_WARN and HEALTH_ERR with OK, WARNING and ERROR
Fixes: https://tracker.ceph.com/issues/55867
Signed-off-by: nsedrickm <nsedrick101@gmail.com>
(cherry picked from commit
0bd10c0e122e463d9621a26f4c3a73deea2a9c40)
<ng-container *ngTemplateOutlet="logsLink"></ng-container>
<ul>
<li *ngFor="let check of healthData.health.checks">
- <span [ngStyle]="check.severity | healthColor">{{ check.type }}</span>: {{ check.summary.message }}
+ <span [ngStyle]="check.severity | healthColor"
+ [class.health-warn-description]="check.severity === 'HEALTH_WARN'">
+ {{ check.type }}</span>: {{ check.summary.message }}
</li>
</ul>
</ng-template>
[ngStyle]="healthData.health.status | healthColor"
[ngbPopover]="healthChecks"
popoverClass="info-card-popover-cluster-status">
- {{ healthData.health.status }} <i *ngIf="healthData.health?.status != 'HEALTH_OK'"
- class="fa fa-exclamation-triangle"></i>
+ {{ healthData.health.status | healthLabel | uppercase }}
+ <i *ngIf="healthData.health?.status != 'HEALTH_OK'"
+ class="fa fa-exclamation-triangle"></i>
</div>
</ng-container>
<ng-container *ngIf="!healthData.health?.checks?.length">
<div [ngStyle]="healthData.health.status | healthColor">
- {{ healthData.health.status }}
+ {{ healthData.health.status | healthLabel | uppercase }}
</div>
</ng-container>
</cd-info-card>
.logs-link {
text-align: center;
+
+ a {
+ color: vv.$primary-wcag-aa-large-text;
+ }
}
.card-text-error {
);
const clickableContent = clusterStatusCard.query(By.css('.info-card-content-clickable'));
expect(clickableContent).toBeNull();
- expect(clusterStatusCard.nativeElement.textContent).toEqual(` ${healthPayload.health.status} `);
+ expect(clusterStatusCard.nativeElement.textContent).toEqual(' OK ');
});
it('should render "Cluster Status" card text that is clickable (popover)', () => {
By.css('cd-info-card[cardTitle="Cluster Status"]')
);
const clickableContent = clusterStatusCard.query(By.css('.info-card-content-clickable'));
- expect(clickableContent.nativeElement.textContent).toEqual(` ${payload.health.status} `);
+ expect(clickableContent.nativeElement.textContent).toEqual(' WARNING ');
});
it('event binding "prepareReadWriteRatio" is called', () => {
max-height: 19vh;
max-width: 100%;
overflow: auto;
+
+ li {
+ span {
+ font-size: 1.1em;
+ font-weight: bold;
+ }
+
+ span.health-warn-description {
+ color: vv.$health-color-warning-wcag-aa-regular-text !important;
+ }
+ }
}
}
border: 1px solid vv.$gray-200;
border-radius: 3px;
cursor: pointer;
+ font-size: 1.25em;
padding: 7px;
}
position: absolute;
top: -0.3rem;
}
+
+ .card-title > a {
+ color: vv.$primary-wcag-aa-large-text;
+ }
}
}
<span>{{ groupTitle }}</span>
<button type="button"
class="popover-icon btn btn-link p-0"
- (click)="popInfo.toggle()">
+ (click)="popInfo.toggle()"
+ aria-label="learn more"
+ i18n-aria-label>
<i [ngClass]="[icons.infoCircle, icons.large]"></i>
</button>
</div>
+@use './src/styles/vendor/variables' as vv;
+
.info-group-title {
font-size: 1.75rem;
margin: 0 0 0.5vw 0.5vw;
}
+.popover-icon {
+ color: vv.$primary-wcag-aa-large-text;
+}
+
.popover-icon:focus {
box-shadow: none;
}
@use './src/styles/vendor/variables' as vv;
.no-margin-bottom {
+ font-size: 0.875rem;
margin-bottom: 0;
}
color: vv.$gray-700;
font-weight: bold;
}
+
+a {
+ color: darken(vv.$primary-wcag-aa-large-text, 10);
+ font-weight: bold;
+}
export enum HealthColor {
HEALTH_ERR = 'health-color-error',
- HEALTH_WARN = 'health-color-warning',
+ HEALTH_WARN = 'health-color-warning-wcag-aa-large-text',
HEALTH_OK = 'health-color-healthy'
}
--- /dev/null
+export enum HealthLabel {
+ HEALTH_ERR = 'error',
+ HEALTH_WARN = 'warning',
+ HEALTH_OK = 'ok'
+}
if (propertyName === 'health-color-healthy') {
return 'fakeGreen';
}
- if (propertyName === 'health-color-warning') {
+ if (propertyName === 'health-color-warning-wcag-aa-large-text') {
return 'fakeOrange';
}
if (propertyName === 'health-color-error') {
--- /dev/null
+import { HealthLabelPipe } from './health-label.pipe';
+
+describe('HealthLabelPipe', () => {
+ const pipe = new HealthLabelPipe();
+ it('create an instance', () => {
+ expect(pipe).toBeTruthy();
+ });
+
+ it('transforms "HEALTH_OK"', () => {
+ expect(pipe.transform('HEALTH_OK')).toEqual('ok');
+ });
+
+ it('transforms "HEALTH_WARN"', () => {
+ expect(pipe.transform('HEALTH_WARN')).toEqual('warning');
+ });
+
+ it('transforms "HEALTH_ERR"', () => {
+ expect(pipe.transform('HEALTH_ERR')).toEqual('error');
+ });
+
+ it('transforms others', () => {
+ expect(pipe.transform('abc')).toBe(null);
+ });
+});
--- /dev/null
+import { Pipe, PipeTransform } from '@angular/core';
+
+import { HealthLabel } from '~/app/shared/enum/health-label.enum';
+
+@Pipe({
+ name: 'healthLabel'
+})
+export class HealthLabelPipe implements PipeTransform {
+ transform(value: any): any {
+ return Object.keys(HealthLabel).includes(value as HealthLabel) ? HealthLabel[value] : null;
+ }
+}
import { EncodeUriPipe } from './encode-uri.pipe';
import { FilterPipe } from './filter.pipe';
import { HealthColorPipe } from './health-color.pipe';
+import { HealthLabelPipe } from './health-label.pipe';
import { IopsPipe } from './iops.pipe';
import { IscsiBackstorePipe } from './iscsi-backstore.pipe';
import { JoinPipe } from './join.pipe';
DimlessBinaryPipe,
DimlessBinaryPerSecondPipe,
HealthColorPipe,
+ HealthLabelPipe,
DimlessPipe,
CephShortVersionPipe,
CephReleaseNamePipe,
DimlessBinaryPipe,
DimlessBinaryPerSecondPipe,
HealthColorPipe,
+ HealthLabelPipe,
DimlessPipe,
CephShortVersionPipe,
CephReleaseNamePipe,
$health-color-error: #f00 !default;
$health-color-healthy: $green !default;
$health-color-warning: #ffa500 !default;
+$health-color-warning-wcag-aa-large-text: #d48200 !default;
+$health-color-warning-wcag-aa-regular-text: #ae6200 !default;
// Chart colors.
$chart-color-red: #c9190b !default;
projects / ceph.git / commitdiff