Skip to content

Improve appointment accessibility #29649

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.

Sign up for GitHub

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

Merged
Ambrozy merged 6 commits into from
Apr 23, 2025
Merged

Improve appointment accessibility #29649

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
6d4d957
Improve appointment accessibility
Ambrozy Apr 18, 2025
ff05b9e
fix
Ambrozy Apr 21, 2025
7a59b4a
fix
Ambrozy Apr 21, 2025
2eeb300
fix
Ambrozy Apr 21, 2025
503bc1d
fix
Ambrozy Apr 23, 2025
9b040cd
fix
Ambrozy Apr 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 60 additions & 54 deletions e2e/testcafe-devextreme/tests/scheduler/common/a11y/appointment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,54 @@ import { checkOptions } from './axe_options';
fixture.disablePageReloads`a11y - appointment`
.page(url(__dirname, '../../../container.html'));

const appointmentItem = {
text: 'App 1',
startDate: Date.UTC(2021, 1, 1, 12),
endDate: Date.UTC(2021, 1, 1, 13),
};
const currentDate = Date.UTC(2021, 1, 1);

['month', 'week', 'day'].forEach((currentView) => {
test(`appointment should have correct aria-label without grouping (${currentView})`, async (t) => {
test(`appointment should have correct aria-label without description (${currentView})`, async (t) => {
const scheduler = new Scheduler('#container');
const appointment = scheduler.getAppointment('App 1');

await t
.expect(
scheduler.getAppointment('App 1').element.attributes['aria-label'],
)
.eql(undefined);
.expect(appointment.getAriaLabel())
.eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
.expect(await appointment.hasAriaDescription())
.notOk();

await a11yCheck(t, checkOptions, '#container');
}).before(async () => {
await createWidget('dxScheduler', {
dataSource: [{
text: 'App 1',
startDate: new Date(2021, 1, 1, 12),
endDate: new Date(2021, 1, 1, 13),
}],
timeZone: 'UTC',
dataSource: [appointmentItem],
currentView,
currentDate: new Date(2021, 1, 1),
currentDate,
});
});

test(`appointment should have correct aria-label with one group (${currentView})`, async (t) => {
const scheduler = new Scheduler('#container');

const attrs = await scheduler.getAppointment('App 1').element.attributes;
const appointment = scheduler.getAppointment('App 1');

await t
.expect(attrs['aria-roledescription'])
.eql('February 1, 2021, Group: resource1, ');
.expect(appointment.getAriaLabel())
.eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
.expect(await appointment.getAriaDescription())
.eql('Group: resource1; Group 1: resource1');

await a11yCheck(t, checkOptions, '#container');
}).before(async () => {
await createWidget('dxScheduler', {
timeZone: 'UTC',
dataSource: [{
text: 'App 1',
startDate: new Date(2021, 1, 1, 12),
endDate: new Date(2021, 1, 1, 13),
...appointmentItem,
groupId: 1,
}],
currentView,
currentDate: new Date(2021, 1, 1),
currentDate,
groups: ['groupId'],
resources: [
{
Expand All @@ -58,32 +63,33 @@ fixture.disablePageReloads`a11y - appointment`
text: 'resource1',
id: 1,
}],
label: 'Group 1',
},
],
});
});

test(`appointment should have correct aria-label with multiple group (${currentView})`, async (t) => {
const scheduler = new Scheduler('#container');

const attrs = await scheduler.getAppointment('App 1').element.attributes;
const appointment = scheduler.getAppointment('App 1');

await t
.expect(attrs['aria-roledescription'])
.eql('February 1, 2021, Group: resource11, resource21, ');
.expect(appointment.getAriaLabel())
.eql('App 1: February 1, 2021, 12:00 PM - 1:00 PM')
.expect(await appointment.getAriaDescription())
.eql('Group: resource11, resource21; Group 1: resource11; Group 2: resource21, resource22');

await a11yCheck(t, checkOptions, '#container');
}).before(async () => {
await createWidget('dxScheduler', {
timeZone: 'UTC',
dataSource: [{
text: 'App 1',
startDate: new Date(2021, 1, 1, 12),
endDate: new Date(2021, 1, 1, 13),
...appointmentItem,
groupId1: 1,
groupId2: 1,
groupId2: [1, 2],
}],
currentView,
currentDate: new Date(2021, 1, 1),
currentDate,
groups: ['groupId1', 'groupId2'],
resources: [
{
Expand All @@ -92,13 +98,18 @@ fixture.disablePageReloads`a11y - appointment`
text: 'resource11',
id: 1,
}],
label: 'Group 1',
},
{
fieldExpr: 'groupId2',
dataSource: [{
text: 'resource21',
id: 1,
}, {
text: 'resource22',
id: 2,
}],
label: 'Group 2',
},
],
});
Expand All @@ -125,23 +136,18 @@ fixture.disablePageReloads`a11y - appointment`
},
],
currentView,
currentDate: new Date(2021, 3, 29),
currentDate: new Date('2021-04-29T18:30:00.000Z'),
startDayHour: 9,
});
});

test('appointments should have right role', async (t) => {
const scheduler = new Scheduler('#container');
const appt = scheduler.getAppointment('Website Re-Design Plan');
const contentId = await appt.element.find('.dx-scheduler-appointment-content').getAttribute('id');

await t
.expect(appt.element.getAttribute('role'))
.eql('application');

await t
.expect(appt.element.getAttribute('aria-describedby'))
.eql(contentId);
.eql('button');

await t
.expect(appt.element.getAttribute('aria-activedescendant'))
Expand All @@ -159,7 +165,7 @@ fixture.disablePageReloads`a11y - appointment`
},
],
currentView,
currentDate: new Date(2021, 3, 29),
currentDate: new Date('2021-04-29T18:30:00.000Z'),
startDayHour: 9,
});
});
Expand All @@ -168,22 +174,22 @@ fixture.disablePageReloads`a11y - appointment`
[
{
currentView: 'week',
startDate: new Date(2021, 1, 1, 12),
endDate: new Date(2021, 1, 3, 13),
startDate: Date.UTC(2021, 1, 1, 12),
endDate: Date.UTC(2021, 1, 3, 13),
labels: [
'February 1, 2021 - February 3, 2021 (1/3), ',
'February 1, 2021 - February 3, 2021 (2/3), ',
'February 1, 2021 - February 3, 2021 (3/3), ',
'App 1: February 1, 2021, 12:00 PM - February 3, 2021, 1:00 PM (1/3)',
'App 1: February 1, 2021, 12:00 PM - February 3, 2021, 1:00 PM (2/3)',
'App 1: February 1, 2021, 12:00 PM - February 3, 2021, 1:00 PM (3/3)',
],
},
{
currentView: 'month',
startDate: new Date(2021, 1, 1, 12),
endDate: new Date(2021, 1, 17, 13),
startDate: Date.UTC(2021, 1, 1, 12),
endDate: Date.UTC(2021, 1, 17, 13),
labels: [
'February 1, 2021 - February 17, 2021 (1/3), ',
'February 1, 2021 - February 17, 2021 (2/3), ',
'February 1, 2021 - February 17, 2021 (3/3), ',
'App 1: February 1, 2021, 12:00 PM - February 17, 2021, 1:00 PM (1/3)',
'App 1: February 1, 2021, 12:00 PM - February 17, 2021, 1:00 PM (2/3)',
'App 1: February 1, 2021, 12:00 PM - February 17, 2021, 1:00 PM (3/3)',
],
},
].forEach(({
Expand All @@ -193,10 +199,9 @@ fixture.disablePageReloads`a11y - appointment`
const scheduler = new Scheduler('#container');

const apptLabels = await Promise.all([0, 1, 2].map(
async (i) => {
const appt = scheduler.getAppointment('App 1', i);
const attrs = await appt.element.attributes;
return attrs['aria-roledescription'];
(i) => {
const appointment = scheduler.getAppointment('App 1', i);
return appointment.getAriaLabel();
},
));

Expand All @@ -207,14 +212,15 @@ fixture.disablePageReloads`a11y - appointment`
await a11yCheck(t, checkOptions, '#container');
}).before(async () => {
await createWidget('dxScheduler', {
timeZone: 'UTC',
dataSource: [{
text: 'App 1',
startDate,
endDate,
}],
allDayPanelMode: 'hidden',
currentView,
currentDate: new Date(2021, 1, 1),
currentDate: Date.UTC(2021, 1, 1),
});
});
});
Expand Down Expand Up @@ -409,11 +415,11 @@ test('Scheduler a11y: Appointment collector button doesn\'t have info about date

test('appointment aria label should contain date with right timezone', async (t) => {
const scheduler = new Scheduler('#container');
const appt = scheduler.getAppointmentByIndex(0);
const appointment = scheduler.getAppointmentByIndex(0);

await t
.expect(appt.element.getAttribute('aria-roledescription'))
.eql('March 29, 2021, ');
.expect(appointment.getAriaLabel())
.eql('Install New Router in Dev Room: March 29, 2021, 2:30 PM - 3:30 PM');

await a11yCheck(t, checkOptions, '#container');
}).before(async () => {
Expand Down
Loading
Loading