Merge b527c08 into a0705a6

vaadin · Mar 17, 2019 · 3c486db · 3c486db
2 parents a0705a6 + b527c08
commit 3c486db
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 13 deletions.
diff --git a/src/vaadin-combo-box.html b/src/vaadin-combo-box.html
@@ -299,7 +299,8 @@
              */
             disabled: {
               type: Boolean,
-              value: false
+              value: false,
+              observer: '_disabledChanged'
             },
 
             /**
@@ -337,7 +338,8 @@
 
             readonly: {
               type: Boolean,
-              value: false
+              value: false,
+              observer: '_readonlyChanged'
             }
           };
         }
@@ -365,9 +367,9 @@
           this._toggleElement = this.$.toggleButton;
           this._clearElement = this.$.clearButton;
 
-          this._nativeInput.setAttribute('role', 'combobox');
-          this._nativeInput.setAttribute('aria-autocomplete', 'list');
+          this.setAttribute('role', 'combobox');
           this._updateAriaExpanded();
+          this._updateNativeInputAriaAutoComplete();
         }
 
         connectedCallback() {
@@ -385,12 +387,26 @@
         }
 
         _updateAriaExpanded() {
+          this.setAttribute('aria-expanded', this.opened);
+        }
+
+        _updateNativeInputAriaAutoComplete() {
           if (this._nativeInput) {
-            this._nativeInput.setAttribute('aria-expanded', this.opened);
-            this._toggleElement.setAttribute('aria-expanded', this.opened);
+            this.readonly || this.disabled ?
+              this._nativeInput.setAttribute('aria-autocomplete', 'none') :
+              this._nativeInput.setAttribute('aria-autocomplete', 'list');
           }
         }
 
+        _readonlyChanged() {
+          this._updateAriaExpanded();
+          this._updateNativeInputAriaAutoComplete();
+        }
+
+        _disabledChanged() {
+          this._updateNativeInputAriaAutoComplete();
+        }
+
         get inputElement() {
           return this.$.input;
         }

diff --git a/test/aria.html b/test/aria.html
@@ -57,14 +57,30 @@
     afterEach(() => comboBox.opened = false);
 
     describe('when combo-box is attached', () => {
-      it('should contain appropriate aria attributes', () => {
-        expect(getNativeInput().getAttribute('role')).to.equal('combobox');
-        expect(getNativeInput().getAttribute('aria-autocomplete')).to.equal('list');
+      const assertAriaAttributes = () => {
         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');
+        expect(comboBox.getAttribute('role')).to.equal('combobox');
+      };
+
+      it('should contain appropriate aria attributes', () => {
+        expect(getNativeInput().getAttribute('aria-autocomplete')).to.equal('list');
+        assertAriaAttributes();
+      });
+
+      it('should contain appropriate aria attributes for readonly input', () => {
+        comboBox.readonly = true;
+        expect(getNativeInput().getAttribute('aria-autocomplete')).to.equal('none');
+        assertAriaAttributes();
+      });
+
+      it('should contain appropriate aria attributes for disabled input', () => {
+        comboBox.disabled = true;
+        expect(getNativeInput().getAttribute('aria-autocomplete')).to.equal('none');
+        assertAriaAttributes();
       });
     });
 
@@ -77,15 +93,13 @@
       });
 
       it('should set aria-expanded attribute when opened', () => {
-        expect(getNativeInput().getAttribute('aria-expanded')).to.equal('true');
-        expect(getToggleIcon().getAttribute('aria-expanded')).to.equal('true');
+        expect(comboBox.getAttribute('aria-expanded')).to.equal('true');
       });
 
       it('should unset aria-expanded attribute when closed', () => {
         esc();
 
-        expect(getNativeInput().getAttribute('aria-expanded')).to.equal('false');
-        expect(getToggleIcon().getAttribute('aria-expanded')).to.equal('false');
+        expect(comboBox.getAttribute('aria-expanded')).to.equal('false');
       });
     });