Merge eae5332 into a0705a6

vaadin · Mar 17, 2019 · 52b367e · 52b367e
2 parents a0705a6 + eae5332
commit 52b367e
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/src/vaadin-combo-box.html b/src/vaadin-combo-box.html
@@ -337,7 +337,8 @@
 
             readonly: {
               type: Boolean,
-              value: false
+              value: false,
+              observer: '_readonlyChanged'
             }
           };
         }
@@ -365,7 +366,7 @@
           this._toggleElement = this.$.toggleButton;
           this._clearElement = this.$.clearButton;
 
-          this._nativeInput.setAttribute('role', 'combobox');
+          this._updateNativeInputRole();
           this._nativeInput.setAttribute('aria-autocomplete', 'list');
           this._updateAriaExpanded();
         }
@@ -380,17 +381,35 @@
           this._restoreInputBlur();
         }
 
+        _updateNativeInputRole() {
+          if (this._nativeInput) {
+            this.readonly ?
+              this._nativeInput.removeAttribute('role') :
+              this._nativeInput.setAttribute('role', 'combobox');
+          }
+        }
+
         _getPositionTarget() {
           return this.$.input;
         }
 
         _updateAriaExpanded() {
           if (this._nativeInput) {
-            this._nativeInput.setAttribute('aria-expanded', this.opened);
-            this._toggleElement.setAttribute('aria-expanded', this.opened);
+            if (this.readonly) {
+              this._nativeInput.removeAttribute('aria-expanded');
+              this._toggleElement.removeAttribute('aria-expanded');
+            } else {
+              this._nativeInput.setAttribute('aria-expanded', this.opened);
+              this._toggleElement.setAttribute('aria-expanded', this.opened);
+            }
           }
         }
 
+        _readonlyChanged() {
+          this._updateNativeInputRole();
+          this._updateAriaExpanded();
+        }
+
         get inputElement() {
           return this.$.input;
         }

diff --git a/test/aria.html b/test/aria.html
@@ -57,14 +57,24 @@
     afterEach(() => comboBox.opened = false);
 
     describe('when combo-box is attached', () => {
-      it('should contain appropriate aria attributes', () => {
-        expect(getNativeInput().getAttribute('role')).to.equal('combobox');
+      const assertAriaAttributes = () => {
         expect(getNativeInput().getAttribute('aria-autocomplete')).to.equal('list');
         expect(getNativeInput().hasAttribute('aria-labelledby')).to.be.true;
         expect(getToggleIcon().getAttribute('role')).to.equal('button');
         expect(getToggleIcon().getAttribute('aria-label')).to.equal('Toggle');
         expect(getClearIcon().getAttribute('role')).to.equal('button');
         expect(getClearIcon().getAttribute('aria-label')).to.equal('Clear');
+      };
+
+      it('should contain appropriate aria attributes', () => {
+        expect(getNativeInput().getAttribute('role')).to.equal('combobox');
+        assertAriaAttributes();
+      });
+
+      it('should contain appropriate aria attributes for readonly input', () => {
+        comboBox.readonly = true;
+        expect(getNativeInput().getAttribute('role')).to.equal(null);
+        assertAriaAttributes();
       });
     });