mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2026-04-16 22:24:49 +00:00
[ACS-10323] Fix not announced aria-label (#11553)
This commit is contained in:
committed by
GitHub
parent
0edb04eeb2
commit
b04e1ca081
@@ -82,14 +82,6 @@ describe('DataTableRowComponent', () => {
|
||||
expect(fixture.debugElement.nativeElement.getAttribute('aria-selected')).toBe('false');
|
||||
});
|
||||
|
||||
it('should set aria label', () => {
|
||||
spyOn(row, 'getValue').and.returnValue('some-name');
|
||||
component.row = row;
|
||||
fixture.detectChanges();
|
||||
|
||||
expect(fixture.debugElement.nativeElement.getAttribute('aria-label')).toBe('some-name');
|
||||
});
|
||||
|
||||
it('should set tabindex as non focusable by default (disabled propery is not passed)', () => {
|
||||
fixture.detectChanges();
|
||||
expect(fixture.debugElement.nativeElement.getAttribute('tabindex')).toBeNull();
|
||||
@@ -120,4 +112,72 @@ describe('DataTableRowComponent', () => {
|
||||
fixture.debugElement.nativeElement.dispatchEvent(event);
|
||||
expect(component.select.emit).toHaveBeenCalledWith(event);
|
||||
});
|
||||
|
||||
describe('ariaLabel getter', () => {
|
||||
it('should return null when row is null', () => {
|
||||
component.row = null;
|
||||
expect(component.ariaLabel).toBeNull();
|
||||
});
|
||||
|
||||
it('should return name when row has name value', () => {
|
||||
spyOn(row, 'getValue').and.returnValue('document-name');
|
||||
component.row = row;
|
||||
|
||||
expect(component.ariaLabel).toBe('document-name');
|
||||
});
|
||||
|
||||
it('should return title when row has no name but has title', () => {
|
||||
spyOn(row, 'getValue').and.callFake((key: string) => {
|
||||
if (key === 'name') {
|
||||
return null;
|
||||
}
|
||||
if (key === 'title') {
|
||||
return 'document-title';
|
||||
}
|
||||
return null;
|
||||
});
|
||||
component.row = row;
|
||||
|
||||
expect(component.ariaLabel).toBe('document-title');
|
||||
});
|
||||
|
||||
it('should return empty string when row has neither name nor title', () => {
|
||||
spyOn(row, 'getValue').and.returnValue(null);
|
||||
component.row = row;
|
||||
|
||||
expect(component.ariaLabel).toBe('');
|
||||
});
|
||||
|
||||
it('should append "selected" when row is selected and has name', () => {
|
||||
row.isSelected = true;
|
||||
spyOn(row, 'getValue').and.returnValue('document-name');
|
||||
component.row = row;
|
||||
|
||||
expect(component.ariaLabel).toBe('document-name selected');
|
||||
});
|
||||
|
||||
it('should append "selected" when row is selected and has title', () => {
|
||||
row.isSelected = true;
|
||||
spyOn(row, 'getValue').and.callFake((key: string) => {
|
||||
if (key === 'name') {
|
||||
return null;
|
||||
}
|
||||
if (key === 'title') {
|
||||
return 'document-title';
|
||||
}
|
||||
return null;
|
||||
});
|
||||
component.row = row;
|
||||
|
||||
expect(component.ariaLabel).toBe('document-title selected');
|
||||
});
|
||||
|
||||
it('should return empty string when row is selected but has no name or title', () => {
|
||||
row.isSelected = true;
|
||||
spyOn(row, 'getValue').and.returnValue(null);
|
||||
component.row = row;
|
||||
|
||||
expect(component.ariaLabel).toBe('');
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
@@ -57,11 +57,8 @@ export class DataTableRowComponent implements FocusableOption {
|
||||
if (!this.row) {
|
||||
return null;
|
||||
}
|
||||
if (this.row.isSelected) {
|
||||
return this.row.getValue('name') + ' selected' || '';
|
||||
} else {
|
||||
return this.row.getValue('name') || '';
|
||||
}
|
||||
const label = this.row.getValue('name') || this.row.getValue('title') || '';
|
||||
return this.row.isSelected && label ? `${label} selected` : label;
|
||||
}
|
||||
|
||||
@HostBinding('attr.tabindex')
|
||||
|
||||
Reference in New Issue
Block a user