Merge 41622e1 into 1696df9

vaadin · Jan 15, 2020 · 33d1f73 · 33d1f73
2 parents 1696df9 + 41622e1
commit 33d1f73
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 2 deletions.
diff --git a/src/vaadin-radio-group.html b/src/vaadin-radio-group.html
@@ -262,17 +262,19 @@
           this.addEventListener('keydown', e => {
             // if e.target is vaadin-radio-group then assign to checkedRadioButton currently checked radio button
             var checkedRadioButton = (e.target == this) ? this._checkedButton : e.target;
+            const horizontalRTL = this.getAttribute('dir') === 'rtl'
+              && this.theme !== 'vertical';
 
             // LEFT, UP - select previous radio button
             if (e.keyCode === 37 || e.keyCode === 38) {
               e.preventDefault();
-              this._selectPreviousButton(checkedRadioButton);
+              this._selectIncButton(horizontalRTL, checkedRadioButton);
             }
 
             // RIGHT, DOWN - select next radio button
             if (e.keyCode === 39 || e.keyCode === 40) {
               e.preventDefault();
-              this._selectNextButton(checkedRadioButton);
+              this._selectIncButton(!horizontalRTL, checkedRadioButton);
             }
           });
 
@@ -286,6 +288,14 @@
           });
         }
 
+        _selectIncButton(next, checkedRadioButton) {
+          if (next) {
+            this._selectNextButton(checkedRadioButton);
+          } else {
+            this._selectPreviousButton(checkedRadioButton);
+          }
+        }
+
         _selectButton(element, setFocusRing) {
           if (this._containsFocus()) {
             element.focus();

diff --git a/test/vaadin-radio-group.html b/test/vaadin-radio-group.html
@@ -428,6 +428,74 @@
         expect(vaadinRadioButtonGroup.hasAttribute('focused')).to.be.false;
       });
 
+      describe('RTL mode', () => {
+
+        beforeEach(() => vaadinRadioButtonGroup.setAttribute('dir', 'rtl'));
+
+        it('previous/first radio button in the layout should be focused and checked after left', () => {
+          vaadinRadioButtonList[1].checked = true;
+
+          MockInteractions.keyDownOn(vaadinRadioButtonGroup, 37);
+          MockInteractions.keyUpOn(vaadinRadioButtonGroup, 37);
+
+          expect(vaadinRadioButtonList[2].checked).to.be.true;
+          expect(vaadinRadioButtonList[1].checked).to.be.false;
+        });
+
+        it('previous/first radio button in the layout should be focused and checked after up in horizontal', () => {
+          vaadinRadioButtonList[1].checked = true;
+
+          MockInteractions.keyDownOn(vaadinRadioButtonGroup, 38);
+          MockInteractions.keyUpOn(vaadinRadioButtonGroup, 38);
+
+          expect(vaadinRadioButtonList[2].checked).to.be.true;
+          expect(vaadinRadioButtonList[1].checked).to.be.false;
+        });
+
+        it('previous/first radio button should be focused and checked after up in vertical', () => {
+          vaadinRadioButtonGroup.setAttribute('theme', 'vertical');
+          vaadinRadioButtonList[1].checked = true;
+
+          MockInteractions.keyDownOn(vaadinRadioButtonGroup, 38);
+          MockInteractions.keyUpOn(vaadinRadioButtonGroup, 38);
+
+          expect(vaadinRadioButtonList[0].checked).to.be.true;
+          expect(vaadinRadioButtonList[1].checked).to.be.false;
+        });
+
+        it('next/last radio button in the layout should be focused and checked after right', () => {
+          vaadinRadioButtonList[1].checked = true;
+
+          MockInteractions.keyDownOn(vaadinRadioButtonGroup, 39);
+          MockInteractions.keyUpOn(vaadinRadioButtonGroup, 39);
+
+          expect(vaadinRadioButtonList[0].checked).to.be.true;
+          expect(vaadinRadioButtonList[1].checked).to.be.false;
+        });
+
+        it('next/last radio button in the layout should be focused and checked after down in horizontal', () => {
+          vaadinRadioButtonList[1].checked = true;
+
+          MockInteractions.keyDownOn(vaadinRadioButtonGroup, 40);
+          MockInteractions.keyUpOn(vaadinRadioButtonGroup, 40);
+
+          expect(vaadinRadioButtonList[0].checked).to.be.true;
+          expect(vaadinRadioButtonList[1].checked).to.be.false;
+        });
+
+        it('next/last radio button should be focused and checked after down in vertical', () => {
+          vaadinRadioButtonGroup.setAttribute('theme', 'vertical');
+          vaadinRadioButtonList[1].checked = true;
+
+          MockInteractions.keyDownOn(vaadinRadioButtonGroup, 40);
+          MockInteractions.keyUpOn(vaadinRadioButtonGroup, 40);
+
+          expect(vaadinRadioButtonList[2].checked).to.be.true;
+          expect(vaadinRadioButtonList[1].checked).to.be.false;
+        });
+
+      });
+
       describe('change event', () => {
         it('should fire on right/down', () => {
           vaadinRadioButtonList[1].focus();