Skip to content

Commit e72bbb5

Browse files
MariaIDinevaInnaAtanasova
MariaIDineva
and
InnaAtanasova
authored
fix(core): adopt a11y changes for message strip (#13514)
* feat(core, platform): adopt styles breaking changes part two * fix(core): adopt a11y changes for message strip * fix(core): uncomment docs * fix(core): update translations * fix(core): fix lint * fix(core): use signals all the way * fix(core): use ngAfterContentChecked instead of ngAfterContentInit --------- Co-authored-by: Inna Atanasova <[email protected]>
1 parent f675e16 commit e72bbb5

File tree

84 files changed

+217
-130
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

84 files changed

+217
-130
lines changed

‎libs/core/message-strip/auto-dismiss-message-strip.directive.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,6 @@ export class AutoDismissMessageStripDirective {
5555
/** @hidden */
5656
open(): void {
5757
this.opened = true;
58-
this.elementRef.nativeElement.classList.remove('fd-has-display-block');
5958
this.elementRef.nativeElement.classList.remove('fd-has-display-none');
6059
this.stopAutoDismiss();
6160
if (this.autoDismiss && !this.dismissible && isDevMode()) {

‎libs/core/message-strip/message-strip.component.html‎

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,26 @@
1+
<span class="fd-message-strip__sr-only" id="{{ id() }}-hidden-text">{{ messageStripHiddenText$ | async }}</span>
12
@if (shouldShowIcon) {
23
<div class="fd-message-strip__icon-container" aria-hidden="true">
34
@if (icon) {
45
<ng-template [ngTemplateOutlet]="icon.templateRef"></ng-template>
56
} @else {
67
<fd-icon [glyph]="typeSpecificIconName" role="presentation" aria-hidden="true"></fd-icon>
7-
<span class="fd-message-strip__sr-only" id="{{ id }}-hidden-text">{{
8-
messageStripHiddenText$ | async
9-
}}</span>
108
}
119
</div>
1210
}
13-
<p class="fd-message-strip__text" id="{{ id }}-content-text">
11+
<p class="fd-message-strip__text" id="{{ id() }}-content-text">
1412
<ng-content></ng-content>
1513
</p>
16-
@if (dismissible) {
14+
@if (dismissible()) {
1715
<button
1816
class="fd-message-strip__close"
1917
fd-button
2018
glyph="decline"
2119
fdType="transparent"
2220
fdCompact
2321
(click)="dismiss()"
24-
[attr.aria-controls]="id"
25-
[attr.aria-label]="dismissBtnTitle || (defaultDismissButtonText$ | async)"
26-
[attr.title]="dismissBtnTitle || (defaultDismissButtonText$ | async)"
22+
[attr.aria-controls]="id()"
23+
[attr.aria-label]="dismissBtnTitle() || (defaultDismissButtonText$ | async)"
24+
[attr.title]="dismissBtnTitle() || (defaultDismissButtonText$ | async)"
2725
></button>
2826
}

‎libs/core/message-strip/message-strip.component.scss‎

Lines changed: 0 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,6 @@
44
display: block;
55
}
66

7-
.fd-has-display-block {
8-
display: block;
9-
}
10-
117
.fd-has-display-none {
128
display: none;
139
}
14-
15-
.fd-message-strip__sr-only {
16-
position: absolute;
17-
clip: rect(1px, 1px, 1px, 1px);
18-
user-select: none;
19-
left: -1000px;
20-
top: -1000px;
21-
pointer-events: none;
22-
font-size: 0px;
23-
}

‎libs/core/message-strip/message-strip.component.spec.ts‎

Lines changed: 29 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,20 @@
1-
import { Component, ViewChild } from '@angular/core';
21
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
32

43
import { MessageStripComponent } from './message-strip.component';
54

6-
@Component({
7-
template: ` <fd-message-strip> A dismissible normal message strip.</fd-message-strip> `,
8-
standalone: true,
9-
imports: [MessageStripComponent]
10-
})
11-
class TestMessageStripComponent {
12-
@ViewChild(MessageStripComponent, { static: true })
13-
messageStripComponent: MessageStripComponent;
14-
}
15-
165
describe('MessageStripComponent', () => {
176
let component: MessageStripComponent;
18-
let fixture: ComponentFixture<TestMessageStripComponent>;
7+
let fixture: ComponentFixture<MessageStripComponent>;
198

209
beforeEach(waitForAsync(() => {
2110
TestBed.configureTestingModule({
22-
imports: [TestMessageStripComponent]
11+
imports: [MessageStripComponent]
2312
}).compileComponents();
2413
}));
2514

2615
beforeEach(() => {
27-
fixture = TestBed.createComponent(TestMessageStripComponent);
28-
component = fixture.componentInstance.messageStripComponent;
16+
fixture = TestBed.createComponent(MessageStripComponent);
17+
component = fixture.componentInstance;
2918
fixture.detectChanges();
3019
});
3120

@@ -34,14 +23,14 @@ describe('MessageStripComponent', () => {
3423
});
3524

3625
it('should Add no-icon modifier class', () => {
37-
component.noIcon = true;
26+
fixture.componentRef.setInput('noIcon', 'true');
3827
component.buildComponentCssClass();
3928
fixture.detectChanges();
4029
expect(component.elementRef.nativeElement.classList.contains('fd-message-strip--no-icon')).toBe(true);
4130
});
4231

4332
it('should apply a type', () => {
44-
component.type = 'success';
33+
fixture.componentRef.setInput('type', 'success');
4534
component.buildComponentCssClass();
4635
fixture.detectChanges();
4736
expect(component.elementRef.nativeElement.classList.contains('fd-message-strip--success')).toBe(true);
@@ -54,64 +43,60 @@ describe('MessageStripComponent', () => {
5443
});
5544

5645
it('should set aria-label attribute if provided', () => {
57-
component.ariaLabel = 'Test label';
46+
fixture.componentRef.setInput('ariaLabel', 'Test label');
5847
fixture.detectChanges();
59-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
60-
expect(hostElement.getAttribute('aria-label')).toBe('Test label');
48+
expect(component.elementRef.nativeElement.getAttribute('aria-label')).toBe('Test label');
6149
});
6250

6351
it('should set width style if provided', () => {
64-
component.width = '200px';
52+
fixture.componentRef.setInput('width', '200px');
6553
fixture.detectChanges();
66-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
67-
expect(hostElement.style.width).toBe('200px');
54+
expect(component.elementRef.nativeElement.style.width).toBe('200px');
6855
});
6956

7057
it('should set min-width style if provided', () => {
71-
component.minWidth = '500px';
58+
fixture.componentRef.setInput('minWidth', '500px');
7259
fixture.detectChanges();
73-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
74-
expect(hostElement.style.minWidth).toBe('500px');
60+
expect(component.elementRef.nativeElement.style.minWidth).toBe('500px');
7561
});
7662

7763
it('should set margin-bottom style if provided', () => {
78-
component.marginBottom = '10px';
64+
fixture.componentRef.setInput('marginBottom', '10px');
7965
fixture.detectChanges();
80-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
81-
expect(hostElement.style.marginBottom).toBe('10px');
66+
expect(component.elementRef.nativeElement.style.marginBottom).toBe('10px');
8267
});
8368

8469
it('should set id attribute if provided', () => {
85-
component.id = 'test-id';
70+
fixture.componentRef.setInput('id', 'test-id');
8671
fixture.detectChanges();
87-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
88-
expect(hostElement.getAttribute('id')).toBe('test-id');
72+
expect(component.elementRef.nativeElement.getAttribute('id')).toBe('test-id');
8973
});
9074

9175
it('should set role="note" on the host element', () => {
92-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
93-
expect(hostElement.getAttribute('role')).toBe('note');
76+
expect(component.elementRef.nativeElement.getAttribute('role')).toBe('note');
9477
});
9578

9679
it('should set aria-labelledby attribute on the host element', () => {
97-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
98-
expect(hostElement.hasAttribute('aria-labelledby')).toBe(true);
99-
expect(hostElement.getAttribute('aria-labelledby')).toBe(
100-
`${component.id}-hidden-text ${component.id}-content-text`
80+
expect(component.elementRef.nativeElement.getAttribute('aria-labelledby')).toBe(
81+
`${component.id()}-hidden-text ${component.id()}-content-text`
82+
);
83+
expect(component.elementRef.nativeElement.hasAttribute('aria-labelledby')).toBe(true);
84+
expect(component.elementRef.nativeElement.getAttribute('aria-labelledby')).toBe(
85+
`${component.id()}-hidden-text ${component.id()}-content-text`
10186
);
10287
});
10388

10489
it('should set custom aria-labelledby attribute on the host element if ariaLabelledBy input provided', () => {
105-
component.ariaLabelledBy = 'custom-id';
90+
fixture.componentRef.setInput('ariaLabelledBy', 'custom-id');
10691
fixture.detectChanges();
107-
const hostElement = fixture.nativeElement.querySelector('fd-message-strip');
108-
expect(hostElement.hasAttribute('aria-labelledby')).toBe(true);
109-
expect(hostElement.getAttribute('aria-labelledby')).toBe(component.ariaLabelledBy);
92+
expect(component.elementRef.nativeElement.hasAttribute('aria-labelledby')).toBe(true);
93+
expect(component.elementRef.nativeElement.getAttribute('aria-labelledby')).toBe(component.ariaLabelledBy());
11094
});
11195

11296
it('should set an id attribute on the message strip text container', () => {
11397
fixture.detectChanges();
114-
const contentText = component.elementRef.nativeElement.querySelector('.fd-message-strip__text');
115-
expect(contentText.getAttribute('id')).toBe(`${component.id}-content-text`);
98+
expect(component.elementRef.nativeElement.querySelector('.fd-message-strip__text').getAttribute('id')).toBe(
99+
`${component.id()}-content-text`
100+
);
116101
});
117102
});

0 commit comments

Comments
 (0)