diff --git a/lib/src/button/Button.tsx b/lib/src/button/Button.tsx index cdb28462f..4b13d4914 100644 --- a/lib/src/button/Button.tsx +++ b/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} diff --git a/lib/src/tabs/Tab.tsx b/lib/src/tabs/Tab.tsx index 32ffb0f25..fe7034375 100644 --- a/lib/src/tabs/Tab.tsx +++ b/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; } diff --git a/lib/src/tabs/Tabs.tsx b/lib/src/tabs/Tabs.tsx index ec1bb8ffc..fd4e7b295 100644 --- a/lib/src/tabs/Tabs.tsx +++ b/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 = ({ { onTabHover?.(null); }} - > + /> ))} + /> 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,15 +347,22 @@ 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; @@ -371,7 +370,6 @@ const ActiveIndicator = styled.span<{ tabLeft: number; tabWidth: number }>` `; const TabsContent = styled.div` - display: flex; flex: 1 1 auto; display: inline-block; position: relative; diff --git a/lib/src/textarea/Textarea.test.js b/lib/src/textarea/Textarea.test.js index ce2432bde..fbabd88f4 100644 --- a/lib/src/textarea/Textarea.test.js +++ b/lib/src/textarea/Textarea.test.js @@ -51,7 +51,6 @@ describe("Textarea component tests", () => { test("Renders with correct accesibility attributes", () => { const { getByLabelText } = render(); 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(); const textarea = getByLabelText("Example label"); - expect(textarea.getAttribute("aria-disabled")).toBe("true"); userEvent.type(textarea, "Test"); expect(onChange).not.toHaveBeenCalled(); }); diff --git a/lib/src/textarea/Textarea.tsx b/lib/src/textarea/Textarea.tsx index 48a972169..d7a54408f 100644 --- a/lib/src/textarea/Textarea.tsx +++ b/lib/src/textarea/Textarea.tsx @@ -121,7 +121,6 @@ const DxcTextarea = React.forwardRef( backgroundType={backgroundType} ref={textareaRef} tabIndex={tabIndex} - aria-disabled={disabled} aria-invalid={error ? "true" : "false"} aria-errormessage={error ? errorId : undefined} aria-required={optional ? "false" : "true"} diff --git a/lib/src/utils/FocusLock.tsx b/lib/src/utils/FocusLock.tsx index eef11a0a0..ff757fc1e 100644 --- a/lib/src/utils/FocusLock.tsx +++ b/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}`,