SelectBox: Set "role" when fieldTemplate is rendered (T1230635) (DevE…

…xpress#27457)
jdvictoria · May 27, 2024 · b5b31d2 · b5b31d2
1 parent b3c8830
commit b5b31d2
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 3 deletions.
diff --git a/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.js b/packages/devextreme/js/ui/drop_down_editor/ui.drop_down_editor.js
@@ -252,7 +252,7 @@ const DropDownEditor = TextBox.inherit({
         this.$element()
             .addClass(DROP_DOWN_EDITOR_CLASS);
 
-        this.setAria('role', 'combobox');
+        this.setAria('role', this._getAriaRole());
     },
 
     _render: function() {
@@ -291,10 +291,15 @@ const DropDownEditor = TextBox.inherit({
         return 'none';
     },
 
+    _getAriaRole() {
+        return 'combobox';
+    },
+
     _setDefaultAria: function() {
         this.setAria({
             'haspopup': this._getAriaHasPopup(),
             'autocomplete': this._getAriaAutocomplete(),
+            'role': this._getAriaRole(),
         });
     },
 

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/dropDownEditor.tests.js
@@ -2169,6 +2169,33 @@ QUnit.module('aria accessibility', () => {
         assert.strictEqual($input.attr('aria-autocomplete'), 'none', 'aria-autocomplete attribute should retain to none after deleting');
     });
 
+    QUnit.test('component with fieldTemplate should have proper role attribute after interaction (T1230635)', function(assert) {
+        const $dropDownEditor = $('#dropDownEditorSecond').dxDropDownEditor({
+            dataSource: ['one', 'two', 'three'],
+            fieldTemplate: (data) => {
+                return $('<div>').dxTextBox({ value: data });
+            },
+            valueChangeEvent: 'keyup',
+        });
+        let $input = $dropDownEditor.find(`.${TEXT_EDITOR_INPUT_CLASS}`);
+
+        assert.strictEqual($input.attr('role'), 'combobox', 'initial render should have role attribute set to combobox');
+
+        keyboardMock($input)
+            .type('a');
+
+        $input = $dropDownEditor.find(`.${TEXT_EDITOR_INPUT_CLASS}`);
+
+        assert.strictEqual($input.attr('role'), 'combobox', 'role attribute should retain to combobox after typing');
+
+        keyboardMock($input)
+            .caret(1)
+            .press('backspace');
+
+        $input = $dropDownEditor.find(`.${TEXT_EDITOR_INPUT_CLASS}`);
+
+        assert.strictEqual($input.attr('role'), 'combobox', 'role attribute should remain assigned to the combobox after deleting');
+    });
 
     QUnit.module('aria-controls', {}, () => {
         const attrName = 'aria-controls';

diff --git a/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js b/packages/devextreme/testing/tests/DevExpress.ui.widgets.editors/selectBox.tests.js
@@ -3326,9 +3326,34 @@ QUnit.module('search', moduleSetup, () => {
 
         assert.strictEqual($input.attr('aria-required'), 'true', 'aria-required should stay true after search and selection');
 
-        assert.strictEqual($input.attr('aria-haspopup'), 'listbox', 'initial render should have aria-haspopuphaspopup attribute set to listbox');
+        assert.strictEqual($input.attr('aria-haspopup'), 'listbox', 'aria-haspopup should stay to listbox after search and selection');
 
-        assert.strictEqual($input.attr('aria-autocomplete'), 'list', 'initial render should have aria-autocomplete attribute set to list');
+        assert.strictEqual($input.attr('aria-autocomplete'), 'list', 'aria-autocomplete should stay to list after search and selection');
+    });
+
+    QUnit.test('component with fieldTemplate should have proper role attribute after search and selection (T1230635)', function(assert) {
+        const $selectBox = $('#selectBox').dxSelectBox({
+            dataSource: ['one', 'two', 'three'],
+            fieldTemplate: () => {
+                return $('<div>').dxTextBox({});
+            },
+            searchEnabled: true,
+        });
+        let $input = $selectBox.find(toSelector(TEXTEDITOR_INPUT_CLASS));
+
+        assert.strictEqual($input.attr('role'), 'combobox', 'initial render should have role attribute set to combobox');
+
+        const selectBox = $selectBox.dxSelectBox('instance');
+        const keyboard = keyboardMock($input);
+
+        keyboard.type('a');
+
+        const listItem = $(selectBox.content()).find(toSelector(LIST_ITEM_CLASS)).eq(1);
+        listItem.trigger('dxclick');
+
+        $input = $selectBox.find(toSelector(TEXTEDITOR_INPUT_CLASS));
+
+        assert.strictEqual($input.attr('role'), 'combobox', 'role should stay to combobox after search and selection');
     });
 
     [0, 1].forEach((value) => {