Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(a11y): datagrid placeholder screen reader fix #1474

Merged
merged 8 commits into from
Jul 17, 2024
Merged
Original file line number Diff line number Diff line change
Expand Up @@ -58,11 +58,6 @@ export default function (): void {
it('projects content when there are no items', function () {
expect(context.clarityElement.textContent.trim()).toMatch('Hello world');
});

it('should have role attribute for accessibility', function () {
expect(context.clarityElement.querySelector('.datagrid-placeholder[role=row]')).not.toBeNull();
expect(context.clarityElement.querySelector('span[role=gridcell]')).not.toBeNull();
});
});
});
}
Expand Down
4 changes: 2 additions & 2 deletions projects/angular/src/data/datagrid/datagrid-placeholder.ts
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@ import { Items } from './providers/items';
@Component({
selector: 'clr-dg-placeholder',
template: `
<div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid" role="row">
<div class="datagrid-placeholder" [class.datagrid-empty]="emptyDatagrid">
<div class="datagrid-placeholder-image" *ngIf="emptyDatagrid"></div>
<span role="gridcell" class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
<span class="datagrid-placeholder-content"><ng-content *ngIf="emptyDatagrid"></ng-content></span>
</div>
`,
host: { '[class.datagrid-placeholder-container]': 'true' },
Expand Down
2 changes: 1 addition & 1 deletion projects/angular/src/data/datagrid/datagrid.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -823,7 +823,7 @@ export default function (): void {
const grid = context.clarityElement.querySelector('[role=grid]');
expect(grid).toBeDefined();
const cells = grid.querySelectorAll('[role=gridcell], [role=columnheader]');
expect(cells.length).toBe(13); // 3*2 data, 3 select radios, 3 headers and 1 placeholder
expect(cells.length).toBe(12); // 3*2 data, 3 select radios, 3 headers
// need to start with this cell exactly, because it has tabindex=0
cells[0].focus();
expect(document.activeElement).toEqual(cells[0]);
Expand Down
Loading