Merge pull request #1325 from dxc-technology/gomezivann-fix-1324

Replace `"Space"` key by `" "`
dxc-technology · Oct 6, 2022 · 8f4e799 · 8f4e799
2 parents 1b3d457 + 46eef37
commit 8f4e799
Show file tree

Hide file tree

Showing 5 changed files with 6 additions and 7 deletions.
diff --git a/lib/src/checkbox/Checkbox.tsx b/lib/src/checkbox/Checkbox.tsx
@@ -47,7 +47,6 @@ const DxcCheckbox = ({
   const handleKeyboard = (event) => {
     switch (event.key) {
       case " ":
-      case "Space":
         event.preventDefault();
         handleCheckboxChange();
     }

diff --git a/lib/src/dropdown/Dropdown.test.js b/lib/src/dropdown/Dropdown.test.js
@@ -151,7 +151,7 @@ describe("Dropdown component tests", () => {
     const { getByRole } = render(<DxcDropdown options={options} label="dropdown-test" />);
     const dropdown = getByRole("button");
 
-    fireEvent.keyDown(dropdown, { key: "Space", code: "Space", keyCode: 32, charCode: 32 });
+    fireEvent.keyDown(dropdown, { key: " ", code: "Space", keyCode: 32, charCode: 32 });
     const menu = getByRole("menu");
     expect(menu).toBeTruthy();
     expect(document.activeElement === menu).toBeTruthy();

diff --git a/lib/src/dropdown/Dropdown.tsx b/lib/src/dropdown/Dropdown.tsx
@@ -77,7 +77,7 @@ const DxcDropdown = ({
         setVisualFocusIndex(options.length - 1);
         handleOnOpenMenu();
         break;
-      case "Space":
+      case " ":
       case "Down":
       case "ArrowDown":
       case "Enter":
@@ -112,7 +112,7 @@ const DxcDropdown = ({
           event.preventDefault();
           setNextIndexFocus();
           break;
-        case "Space":
+        case " ":
         case "Enter":
           event.preventDefault();
           handleMenuItemOnClick(options[visualFocusIndex].value);

diff --git a/lib/src/dropdown/DropdownMenuItem.tsx b/lib/src/dropdown/DropdownMenuItem.tsx
@@ -52,10 +52,10 @@ const DropdownMenuItemContainer = styled.li<{ visuallyFocused: boolean }>`
   cursor: pointer;
 
   ${(props) => props.visuallyFocused && `outline: ${props.theme.focusColor} solid 2px; outline-offset: -2px;`}
-  :hover {
+  &:hover {
     background-color: ${(props) => props.theme.hoverOptionBackgroundColor};
   }
-  :active {
+  &:active {
     background-color: ${(props) => props.theme.activeOptionBackgroundColor};
   }
 `;

diff --git a/lib/src/tabs-nav/Tab.tsx b/lib/src/tabs-nav/Tab.tsx
@@ -19,8 +19,8 @@ const DxcTab = forwardRef(
 
     const handleOnKeyDown = (event: React.KeyboardEvent<HTMLAnchorElement>) => {
       switch (event.key) {
+        case " ":
         case "Enter":
-        case "Space":
           tabRef?.current?.click();
           event.preventDefault();
           break;