fix: add missing focused attribute to checkbox-group

vaadin · May 24, 2019 · 7c02ece · 7c02ece
1 parent e2ed548
commit 7c02ece
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/src/vaadin-checkbox-group.html b/src/vaadin-checkbox-group.html
@@ -80,6 +80,7 @@
        * Attribute  | Description | Part name
        * -----------|-------------|------------
        * `disabled`   | Set when the checkbox group and its children are disabled. | :host
+       * `focused` | Set when the checkbox group contains focus | :host
        * `has-label` | Set when the element has a label | :host
        * `has-value` | Set when the element has a value | :host
        * `required` | Set when the element is required | :host
@@ -167,10 +168,13 @@
         ready() {
           super.ready();
 
+          this.addEventListener('focusin', () => this._setFocused(this._containsFocus()));
+
           this.addEventListener('focusout', e => {
             // validate when stepping out of the checkbox group
             if (!this._checkboxes.some(checkbox => e.relatedTarget === checkbox || checkbox.shadowRoot.contains(e.relatedTarget))) {
               this.validate();
+              this._setFocused(false);
             }
           });
 
@@ -289,6 +293,21 @@
         _getErrorMessageAriaHidden(invalid, errorMessage) {
           return (!errorMessage || !invalid).toString();
         }
+
+        _containsFocus() {
+          const root = this.getRootNode();
+          // Safari 9 needs polyfilled `_activeElement` to return correct node
+          const activeElement = root._activeElement !== undefined ? root._activeElement : root.activeElement;
+          return this.contains(activeElement);
+        }
+
+        _setFocused(focused) {
+          if (focused) {
+            this.setAttribute('focused', '');
+          } else {
+            this.removeAttribute('focused');
+          }
+        }
       }
 
       customElements.define(CheckboxGroupElement.is, CheckboxGroupElement);

diff --git a/test/vaadin-checkbox-group_test.html b/test/vaadin-checkbox-group_test.html
@@ -181,6 +181,29 @@
       expect(vaadinCheckboxList[2].checked).to.be.false;
     });
 
+    it('should set focused attribute on focusin event dispatched', () => {
+      vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
+      expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.true;
+    });
+
+    it('should not set focused attribute on focusin event dispatched when disabled', () => {
+      vaadinCheckboxGroup.disabled = true;
+      vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
+      expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.false;
+    });
+
+    it('should remove focused attribute on checkbox focusout', () => {
+      vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
+      vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusout', {composed: true, bubbles: true}));
+      expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.false;
+    });
+
+    it('should remove focused attribute on checkbox-group focusout', () => {
+      vaadinCheckboxList[0].dispatchEvent(new CustomEvent('focusin', {composed: true, bubbles: true}));
+      vaadinCheckboxGroup.dispatchEvent(new CustomEvent('focusout', {composed: true, bubbles: true}));
+      expect(vaadinCheckboxGroup.hasAttribute('focused')).to.be.false;
+    });
+
     it('should NOT steal focus from currently focused element', () => {
       const focusInput = document.createElement('input');
       document.body.appendChild(focusInput);