Fix readonly state's a11y

vaadin · Feb 13, 2020 · ccbd03c · ccbd03c
1 parent c4be7b3
commit ccbd03c
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
@@ -292,7 +292,8 @@
              */
             disabled: {
               type: Boolean,
-              value: false
+              value: false,
+              observer: '_disabledChanged'
             },
 
             /**
@@ -330,7 +331,8 @@
 
             readonly: {
               type: Boolean,
-              value: false
+              value: false,
+              observer: '_readonlyChanged'
             },
 
             /**
@@ -381,9 +383,9 @@
             }
           }, true);
 
-          this._nativeInput.setAttribute('role', 'combobox');
-          this._nativeInput.setAttribute('aria-autocomplete', 'list');
+          this.setAttribute('role', 'combobox');
           this._updateAriaExpanded();
+          this._updateNativeInputAriaAutoComplete();
         }
 
         connectedCallback() {
@@ -401,12 +403,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
@@ -54,12 +54,28 @@
     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(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();
       });
     });
 
@@ -72,15 +88,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');
       });
     });