Calendar: Remove aria-readonly and apply the appropriate aria-label based on the readOnly option value (#27898)

Co-authored-by: ksercs <[email protected]>

Author: nikkithelegendarypokemonster

packages/devextreme/js/__internal/ui/calendar/m_calendar.ts

@@ -726,6 +726,7 @@ const Calendar = Editor.inherit({
     this._updateNavigatorLabels();
 
     this.setAria('role', 'application');
+    this._updateAriaLabelAndRole();
 
     this._moveToClosestAvailableDate();
   },
@@ -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() {
@@ -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':

packages/devextreme/js/localization/messages/ar.json

@@ -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": "أخضر",

packages/devextreme/js/localization/messages/ca.json

@@ -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",

packages/devextreme/js/localization/messages/cs.json

@@ -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á",

packages/devextreme/js/localization/messages/de.json

@@ -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",

packages/devextreme/js/localization/messages/el.json

@@ -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": "Πράσινο",

packages/devextreme/js/localization/messages/en.json

@@ -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",

packages/devextreme/js/localization/messages/es.json

@@ -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",

packages/devextreme/js/localization/messages/fa.json

@@ -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": "سبز",

packages/devextreme/js/localization/messages/fi.json

@@ -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ä",

packages/devextreme/js/localization/messages/fr.json

@@ -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",

packages/devextreme/js/localization/messages/hu.json

@@ -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",

packages/devextreme/js/localization/messages/it.json

@@ -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",

packages/devextreme/js/localization/messages/ja.json

@@ -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": "緑",

packages/devextreme/js/localization/messages/lt.json

@@ -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",

packages/devextreme/js/localization/messages/lv.json

@@ -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ļš",

packages/devextreme/js/localization/messages/nb.json

@@ -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",

packages/devextreme/js/localization/messages/nl.json

@@ -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",

packages/devextreme/js/localization/messages/pl.json

@@ -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",

packages/devextreme/js/localization/messages/pt.json

@@ -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",

packages/devextreme/js/localization/messages/ro.json

@@ -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",

packages/devextreme/js/localization/messages/ru.json

@@ -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": "Зеленый",

packages/devextreme/js/localization/messages/sl.json

@@ -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",

packages/devextreme/js/localization/messages/sv.json

@@ -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",

packages/devextreme/js/localization/messages/tr.json

@@ -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",

packages/devextreme/js/localization/messages/vi.json

@@ -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á",

packages/devextreme/js/localization/messages/zh-tw.json

@@ -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": "綠色",

packages/devextreme/js/localization/messages/zh.json

@@ -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": "绿色",

packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/calendar.tests.js

@@ -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;