Merge pull request #1595 from dxc-technology/gomezivann-fix-focuslock

Fix Focus Lock issue

Author: aidamag

lib/src/button/Button.tsx

@@ -42,7 +42,6 @@ const DxcButton = ({
         type={type}
         mode={mode !== "primary" && mode !== "secondary" && mode !== "text" ? "primary" : mode}
         disabled={disabled}
-        aria-disabled={disabled}
         tabIndex={disabled ? -1 : tabIndex}
         backgroundType={backgroundType}
         size={size}

lib/src/tabs/Tab.tsx

@@ -18,7 +18,6 @@ const Tab = forwardRef(
         type="button"
         tabIndex={tabIndex}
         disabled={tab.isDisabled}
-        aria-disabled={tab.isDisabled}
         aria-selected={active}
         hasLabelAndIcon={hasLabelAndIcon}
         iconPosition={iconPosition}
@@ -124,15 +123,16 @@ const TabContainer = styled.button<{
     opacity: 1;
   }
 
-  &[aria-disabled="true"] {
+  &:disabled {
     background-color: ${(props) => props.theme.unselectedBackgroundColor} !important;
     cursor: not-allowed !important;
     pointer-events: all;
     font-style: ${(props) => props.theme.disabledFontStyle};
+    outline: none !important;
+
     svg {
       color: ${(props) => props.theme.disabledIconColor};
     }
-    outline: none !important;
     > div {
       opacity: 0.5;
     }

lib/src/tabs/Tabs.tsx

@@ -102,7 +102,7 @@ const DxcTabs = ({
 
   const scrollLeft = () => {
     const scrollWidth = refTabList?.current?.offsetWidth * 0.75;
-    let moveX;
+    let moveX = 0;
     if (countClick <= scrollWidth) {
       moveX = 0;
       setScrollLeftEnabled(false);
@@ -118,7 +118,7 @@ const DxcTabs = ({
 
   const scrollRight = () => {
     const scrollWidth = refTabList?.current?.offsetWidth * 0.75;
-    let moveX;
+    let moveX = 0;
     if (countClick + scrollWidth + refTabList?.current?.offsetWidth >= totalTabsWidth) {
       moveX = totalTabsWidth - refTabList?.current?.offsetWidth;
       setScrollRightEnabled(false);
@@ -221,7 +221,7 @@ const DxcTabs = ({
           <ScrollIndicator
             onClick={scrollLeft}
             enabled={enabledIndicator}
-            aria-disabled={!scrollLeftEnabled}
+            disabled={!scrollLeftEnabled}
             aria-label={translatedLabels.tabs.scrollLeft}
             tabIndex={scrollLeftEnabled ? tabIndex : -1}
             minHeightTabs={minHeightTabs}
@@ -251,20 +251,20 @@ const DxcTabs = ({
                     onMouseLeave={() => {
                       onTabHover?.(null);
                     }}
-                  ></Tab>
+                  />
                 ))}
               </TabList>
               <ActiveIndicator
                 tabWidth={activeIndicatorWidth}
                 tabLeft={activeIndicatorLeft}
                 aria-disabled={isActiveIndicatorDisabled}
-              ></ActiveIndicator>
+              />
             </TabsContentScroll>
           </TabsContent>
           <ScrollIndicator
             onClick={scrollRight}
             enabled={enabledIndicator}
-            aria-disabled={!scrollRightEnabled}
+            disabled={!scrollRightEnabled}
             aria-label={translatedLabels.tabs.scrollRight}
             tabIndex={scrollRightEnabled ? tabIndex : -1}
             minHeightTabs={minHeightTabs}
@@ -278,10 +278,10 @@ const DxcTabs = ({
 };
 
 const Underline = styled.div`
+  position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
-  position: absolute;
   height: ${(props) => props.theme.dividerThickness};
   background-color: ${(props) => props.theme.dividerColor};
 `;
@@ -313,17 +313,17 @@ const ScrollIndicator = styled.button<{
   enabled: boolean;
   minHeightTabs: number;
 }>`
+  box-sizing: border-box;
   display: ${(props) => (props.enabled ? "flex" : "none")};
-  background-color: #ffffff;
-  font-size: 1.25rem;
+  justify-content: center;
   min-width: ${(props) => props.theme.scrollButtonsWidth};
   height: ${(props) => props.minHeightTabs - 1}px;
   padding: 0;
-  justify-content: center;
-  cursor: pointer;
-  border-bottom: solid ${(props) => props.theme.dividerThickness} ${(props) => props.theme.dividerColor};
-  box-sizing: border-box;
   border: none;
+  background-color: #ffffff;
+  font-size: 1.25rem;
+  cursor: pointer;
+
   &:hover {
     background-color: ${(props) => `${props.theme.hoverBackgroundColor} !important`};
   }
@@ -334,15 +334,7 @@ const ScrollIndicator = styled.button<{
   &:active {
     background-color: ${(props) => `${props.theme.pressedBackgroundColor} !important`};
   }
-  svg {
-    height: 20px;
-    width: 20px;
-    align-self: center;
-    fill: ${(props) => props.theme.unselectedFontColor};
-    visibility: visible;
-  }
-  &[aria-disabled="true"] {
-    pointer-events: none;
+  &:disabled {
     cursor: default;
     svg {
       visibility: hidden;
@@ -355,23 +347,29 @@ const ScrollIndicator = styled.button<{
       background-color: transparent !important;
     }
   }
+
+  svg {
+    align-self: center;
+    height: 20px;
+    width: 20px;
+    fill: ${(props) => props.theme.unselectedFontColor};
+  }
 `;
 
 const ActiveIndicator = styled.span<{ tabLeft: number; tabWidth: number }>`
+  position: absolute;
+  bottom: 0;
   left: ${(props) => `${props.tabLeft}px`};
   width: ${(props) => `${props.tabWidth}px`};
-  background-color: ${(props) => props.theme.selectedUnderlineColor};
-  bottom: 0;
   height: ${(props) => props.theme.selectedUnderlineThickness};
-  position: absolute;
+  background-color: ${(props) => props.theme.selectedUnderlineColor};
   &[aria-disabled="true"] {
     background-color: ${(props) => props.theme.disabledFontColor};
     display: none;
   }
 `;
 
 const TabsContent = styled.div`
-  display: flex;
   flex: 1 1 auto;
   display: inline-block;
   position: relative;

lib/src/textarea/Textarea.test.js

@@ -51,7 +51,6 @@ describe("Textarea component tests", () => {
   test("Renders with correct accesibility attributes", () => {
     const { getByLabelText } = render(<DxcTextarea label="Example label" />);
     const textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("false");
     expect(textarea.getAttribute("aria-invalid")).toBe("false");
     expect(textarea.getAttribute("aria-describedBy")).toBeNull();
     expect(textarea.getAttribute("aria-required")).toBe("true");
@@ -65,11 +64,10 @@ describe("Textarea component tests", () => {
     expect(textarea.value).toBe("Example text");
   });
 
-  test("Disabled textarea renders with correct aria and can not be modified", () => {
+  test("Disabled textarea can not be modified", () => {
     const onChange = jest.fn();
     const { getByLabelText } = render(<DxcTextarea label="Example label" onChange={onChange} disabled />);
     const textarea = getByLabelText("Example label");
-    expect(textarea.getAttribute("aria-disabled")).toBe("true");
     userEvent.type(textarea, "Test");
     expect(onChange).not.toHaveBeenCalled();
   });

lib/src/textarea/Textarea.tsx

@@ -121,7 +121,6 @@ const DxcTextarea = React.forwardRef<RefType, TextareaPropsType>(
             backgroundType={backgroundType}
             ref={textareaRef}
             tabIndex={tabIndex}
-            aria-disabled={disabled}
             aria-invalid={error ? "true" : "false"}
             aria-errormessage={error ? errorId : undefined}
             aria-required={optional ? "false" : "true"}

lib/src/utils/FocusLock.tsx

@@ -3,7 +3,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 const not = {
   inert: ":not([inert]):not([inert] *)",
   negTabIndex: ':not([tabindex^="-"])',
-  disabled: ":not(:disabled):not([aria-disabled='true'])",
+  disabled: ":not(:disabled)",
 };
 const focusableQuery = [
   `a[href]${not.inert}${not.negTabIndex}`,