Skip to content

Commit

Permalink
Calendar: Remove aria-readonly and apply the appropriate aria-label b…
Browse files Browse the repository at this point in the history
…ased on the readOnly option value (#27898)

Co-authored-by: ksercs <[email protected]>
  • Loading branch information
nikkithelegendarypokemonster and ksercs authored Aug 15, 2024
1 parent 7043993 commit 12b883d
Show file tree
Hide file tree
Showing 29 changed files with 105 additions and 0 deletions.
17 changes: 17 additions & 0 deletions packages/devextreme/js/__internal/ui/calendar/m_calendar.ts
Original file line number Diff line number Diff line change
Expand Up @@ -726,6 +726,7 @@ const Calendar = Editor.inherit({
this._updateNavigatorLabels();

this.setAria('role', 'application');
this._updateAriaLabelAndRole();

this._moveToClosestAvailableDate();
},
Expand All @@ -744,6 +745,18 @@ const Calendar = Editor.inherit({
}
},

_updateAriaLabelAndRole() {
const readOnly = this.option('readOnly');
const $element = this.$element();

const aria = {
role: readOnly ? 'group' : undefined,
label: readOnly ? messageLocalization.format('dxCalendar-readOnlyLabel') : undefined,
};

this.setAria(aria, $element);
},

_setAriaReadonly: noop,

_getKeyboardListeners() {
Expand Down Expand Up @@ -1542,6 +1555,10 @@ const Calendar = Editor.inherit({
case 'showTodayButton':
this._invalidate();
break;
case 'readOnly':
this.callBase(args);
this._updateAriaLabelAndRole();
break;
case 'skipFocusCheck':
break;
case '_todayDate':
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/ar.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "أحمر",
"dxColorView-ariaGreen": "أخضر",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/ca.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Vermell",
"dxColorView-ariaGreen": "Verd",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/cs.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Červená",
"dxColorView-ariaGreen": "Zelená",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rot",
"dxColorView-ariaGreen": "Grün",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/el.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Κόκκινο",
"dxColorView-ariaGreen": "Πράσινο",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Red",
"dxColorView-ariaGreen": "Green",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rojo",
"dxColorView-ariaGreen": "Verde",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/fa.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "قرمز",
"dxColorView-ariaGreen": "سبز",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/fi.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Punainen",
"dxColorView-ariaGreen": "Vihreä",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rouge",
"dxColorView-ariaGreen": "Vert",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/hu.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Piros",
"dxColorView-ariaGreen": "Zöld",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/it.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rosso",
"dxColorView-ariaGreen": "Verde",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/ja.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "",
"dxColorView-ariaGreen": "",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/lt.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Raudona",
"dxColorView-ariaGreen": "Žalia",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/lv.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Sarkans",
"dxColorView-ariaGreen": "Zaļš",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/nb.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rød",
"dxColorView-ariaGreen": "Grønn",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/nl.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rood",
"dxColorView-ariaGreen": "Groen",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "czerwony",
"dxColorView-ariaGreen": "zielony",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/pt.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Vermelho",
"dxColorView-ariaGreen": "Verde",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/ro.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Roșu",
"dxColorView-ariaGreen": "Verde",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/ru.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Красный",
"dxColorView-ariaGreen": "Зеленый",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/sl.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Rdeča",
"dxColorView-ariaGreen": "Zelena",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/sv.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Röd",
"dxColorView-ariaGreen": "Grön",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/tr.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Kırmızı",
"dxColorView-ariaGreen": "Yeşil",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/vi.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "Đỏ",
"dxColorView-ariaGreen": "Xanh lá",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/zh-tw.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "紅色",
"dxColorView-ariaGreen": "綠色",
Expand Down
1 change: 1 addition & 0 deletions packages/devextreme/js/localization/messages/zh.json
Original file line number Diff line number Diff line change
Expand Up @@ -311,6 +311,7 @@
"dxCalendar-captionCenturyLabel": "Century selection",
"dxCalendar-selectedDate": "The selected date is {0}",
"dxCalendar-selectedDateRange": "The selected date range is from {0} to {1}",
"dxCalendar-readOnlyLabel": "Read-only calendar",

"dxColorView-ariaRed": "红色",
"dxColorView-ariaGreen": "绿色",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4617,6 +4617,67 @@ QUnit.module('Aria accessibility', {
fx.off = false;
}
}, () => {
QUnit.test('aria-label should be "Read-only calendar" and role = group when readOnly option is true', function(assert) {
const $element = this.$element;

$element.dxCalendar({
readOnly: true
}).dxCalendar('instance');

assert.strictEqual($element.attr('aria-label'), 'Read-only calendar', 'aria-label is set correctly');
assert.strictEqual($element.attr('role'), 'group', 'role is set correctly');
});

QUnit.test('aria-label and role should be removed when readOnly option is false', function(assert) {
const $element = this.$element;

$element.dxCalendar({
readOnly: false
}).dxCalendar('instance');

assert.notOk($element.attr('aria-label'), 'aria-label is not set');
assert.notOk($element.attr('role'), 'role is not set');
});

QUnit.test('aria-label and role should be removed when readOnly option is set to false on runtime', function(assert) {
const $element = this.$element;

const calendar = $element.dxCalendar({
readOnly: true
}).dxCalendar('instance');

calendar.option('readOnly', false);

assert.notOk($element.attr('aria-label'), 'aria-label is removed');
assert.notOk($element.attr('role'), 'role is removed');
});

QUnit.test('aria-label and role should be setted when readOnly option is set to true on runtime', function(assert) {
const $element = this.$element;

const calendar = $element.dxCalendar({
readOnly: false
}).dxCalendar('instance');

calendar.option('readOnly', true);

assert.strictEqual($element.attr('aria-label'), 'Read-only calendar', 'aria-label is set correctly');
assert.strictEqual($element.attr('role'), 'group', 'role is set correctly');
});

QUnit.test('aria-label attribute should be equal to custom localized text', function(assert) {
const localizedText = 'For Testing';
localization.loadMessages({ 'en': { 'dxCalendar-readOnlyLabel': localizedText } });

const $element = this.$element;

$element.dxCalendar({
readOnly: true
});

assert.strictEqual($element.attr('aria-label'), localizedText, 'aria-label is set correctly');
});

QUnit.test('aria-activedescendant on views wrapper should point to the focused cell', function(assert) {
const $element = this.$element;

Expand Down

0 comments on commit 12b883d

Please sign in to comment.