From 0243c85c38374c9a5122c37f2fa2ef00e5371c30 Mon Sep 17 00:00:00 2001
From: wsuwt <wasuwat.limsuparhat@refinitiv.com>
Date: Tue, 11 Jan 2022 19:13:48 +0700
Subject: [PATCH] fix(radio-button): add IE11 arrow keys navigation support

---
 .../elements/src/radio-button/__test__/radio-button.test.js  | 4 ++--
 packages/elements/src/radio-button/index.ts                  | 5 +++++
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/elements/src/radio-button/__test__/radio-button.test.js b/packages/elements/src/radio-button/__test__/radio-button.test.js
index b9803086f6..85b31608af 100644
--- a/packages/elements/src/radio-button/__test__/radio-button.test.js
+++ b/packages/elements/src/radio-button/__test__/radio-button.test.js
@@ -4,8 +4,8 @@ import '@refinitiv-ui/elemental-theme/light/ef-radio-button';
 
 const createEnterKeyboardEvent = () => keyboardEvent('keydown', { key: 'Enter' });
 const createSpacebarKeyboardEvent = () => keyboardEvent('keydown', { key: isIE() ? 'Spacebar' : ' ' });
-const keyArrowLeft = () => keyboardEvent('keydown', { key: 'ArrowLeft'});
-const keyArrowRight = () => keyboardEvent('keydown', { key: 'ArrowRight'});
+const keyArrowLeft = () => keyboardEvent('keydown', { key: isIE() ? 'Left' : 'ArrowLeft'});
+const keyArrowRight = () => keyboardEvent('keydown', { key: isIE() ? 'Right' : 'ArrowRight'});
 
 const updateGroup = async (group) => {
   for (let i = 0; i < group.length; i += 1) {
diff --git a/packages/elements/src/radio-button/index.ts b/packages/elements/src/radio-button/index.ts
index 4c6839acac..979f1d5793 100644
--- a/packages/elements/src/radio-button/index.ts
+++ b/packages/elements/src/radio-button/index.ts
@@ -207,6 +207,7 @@ export class RadioButton extends ControlElement {
     if (this.disabled || event.defaultPrevented) {
       return;
     }
+
     switch (event.key) {
       case 'Enter':
       case ' ':
@@ -216,10 +217,14 @@ export class RadioButton extends ControlElement {
         }
         this.handleChangeChecked();
         break;
+      case 'Right':
+      case 'Down':
       case 'ArrowRight':
       case 'ArrowDown':
         this.navigateToSibling('next');
         break;
+      case 'Left':
+      case 'Up':
       case 'ArrowLeft':
       case 'ArrowUp':
         this.navigateToSibling('previous');