fix: remove ARIA attributes when time-picker has no dropdown (#7560)

vaadin · Jul 18, 2024 · 8a558b9 · 8a558b9
1 parent fab9459
commit 8a558b9
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 1 deletion.
diff --git a/packages/time-picker/src/vaadin-time-picker.js b/packages/time-picker/src/vaadin-time-picker.js
@@ -355,7 +355,10 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
   }
 
   static get observers() {
-    return ['__updateDropdownItems(i18n.*, min, max, step)'];
+    return [
+      '__updateAriaAttributes(__dropdownItems, opened, inputElement)',
+      '__updateDropdownItems(i18n.*, min, max, step)',
+    ];
   }
 
   static get constraints() {
@@ -631,6 +634,21 @@ class TimePicker extends PatternMixin(InputControlMixin(ThemableMixin(ElementMix
     }
   }
 
+  /** @private */
+  __updateAriaAttributes(items, opened, input) {
+    if (items === undefined || input === undefined) {
+      return;
+    }
+
+    if (items.length === 0) {
+      input.removeAttribute('role');
+      input.removeAttribute('aria-expanded');
+    } else {
+      input.setAttribute('role', 'combobox');
+      input.setAttribute('aria-expanded', !!opened);
+    }
+  }
+
   /** @private */
   __generateDropdownList(minSec, maxSec, step) {
     if (step < 15 * 60 || !this.__validDayDivisor(step)) {

diff --git a/packages/time-picker/test/aria.test.js b/packages/time-picker/test/aria.test.js
@@ -51,4 +51,30 @@ describe('ARIA', () => {
       expect(items[1].getAttribute('aria-selected')).to.equal('true');
     });
   });
+
+  describe('step', () => {
+    it('should not set role to combo-box when step is less than 900 seconds', () => {
+      timePicker.step = 600;
+      expect(input.hasAttribute('role')).to.be.false;
+    });
+
+    it('should restore role to combo-box when step is set back to bigger value', () => {
+      timePicker.step = 600;
+
+      timePicker.step = 900;
+      expect(input.getAttribute('role')).to.be.equal('combobox');
+    });
+
+    it('should remove aria-expanded attribute when step is less than 900 seconds', () => {
+      timePicker.step = 600;
+      expect(input.hasAttribute('aria-expanded')).to.be.false;
+    });
+
+    it('should restore aria-expanded attribute when step is set back to bigger value', () => {
+      timePicker.step = 600;
+
+      timePicker.step = 900;
+      expect(input.getAttribute('aria-expanded')).to.be.equal('false');
+    });
+  });
 });