Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fixed contrast problems for disabled elements #1921

Closed
wants to merge 12 commits into from
Closed

Fixed contrast problems for disabled elements #1921

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
585b744
Fixed accessibility problems for disabled texts
Mil4n0r Mar 22, 2024
82a8168
Fixed functional test to match changes
Mil4n0r Mar 22, 2024
7559bd3
Merge branch 'master' into Mil4n0r/fix_contrast_issues
Mil4n0r Apr 2, 2024
5e7a5fb
Fixed contrast for Calendar
Mil4n0r Apr 5, 2024
ce2f905
Rollback aria-disabled changes for contrast
Mil4n0r Apr 5, 2024
4b42dc2
Modified exception rules for accessibility
Mil4n0r Apr 5, 2024
abe70e9
Removed unneeded space in imports
Mil4n0r Apr 5, 2024
d3e981b
Fixed typo in import
Mil4n0r Apr 5, 2024
cec201a
Added new colors to advanced theme
Mil4n0r Apr 5, 2024
e4a963f
Fixed bug in CI/CD detecting stories with test-storybook
Mil4n0r Apr 5, 2024
436e5c9
Merge branch 'master' into Mil4n0r/fix_contrast_issues
Mil4n0r Apr 5, 2024
3123b41
Added extra rules for accessibility testing
Mil4n0r Apr 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion lib/src/chip/Chip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const DxcChip = ({

return (
<ThemeProvider theme={colorsTheme.chip}>
<Chip disabled={disabled} margin={margin}>
<Chip disabled={disabled} margin={margin} aria-disabled={disabled}>
{prefixIcon && (
<IconContainer
role={typeof onClickPrefix === "function" ? "button" : undefined}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/file-input/FileInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ const DxcFileInput = React.forwardRef<RefType, FileInputPropsType>(

return (
<ThemeProvider theme={colorsTheme.fileInput}>
<FileInputContainer margin={margin} ref={ref}>
<FileInputContainer margin={margin} ref={ref} aria-disabled={disabled}>
<Label htmlFor={fileInputId} disabled={disabled}>
{label}
</Label>
Expand Down
24 changes: 4 additions & 20 deletions lib/src/footer/Footer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,27 +143,15 @@ export const Chromatic = () => (
</ExampleContainer>
<ExampleContainer>
<Title title="With children, copyright, bottom links and social links" theme="light" level={4} />
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
<div>
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
</div>
</DxcFooter>
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}></DxcFooter>
</ExampleContainer>
<ExampleContainer>
<Title title="With children, copyright, bottom links and social links from material" theme="light" level={4} />
<DxcFooter copyright="Copyright" socialLinks={socialMaterialIcons} bottomLinks={bottom}>
<div>
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
</div>
</DxcFooter>
<DxcFooter copyright="Copyright" socialLinks={socialMaterialIcons} bottomLinks={bottom}></DxcFooter>
</ExampleContainer>
<ExampleContainer pseudoState="pseudo-focus">
<Title title="Focused bottom and social links" theme="light" level={4} />
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
<div>
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
</div>
</DxcFooter>
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}></DxcFooter>
</ExampleContainer>
<ExampleContainer>
<Title title="Reduced" theme="light" level={4} />
Expand Down Expand Up @@ -197,11 +185,7 @@ export const Chromatic = () => (
<Title title="Opinionated theme" theme="light" level={2} />
<ExampleContainer>
<HalstackProvider theme={opinionatedTheme}>
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}>
<div>
<a href="https://www.linkedin.com/company/dxctechnology">Linkedin</a>
</div>
</DxcFooter>
<DxcFooter copyright="Copyright" socialLinks={social} bottomLinks={bottom}></DxcFooter>
</HalstackProvider>
</ExampleContainer>
</>
Expand Down
4 changes: 2 additions & 2 deletions lib/src/radio-group/RadioGroup.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ describe("Radio Group component tests", () => {
const radios = getAllByRole("radio");
const errorId = `error-${getByText("test-radioGroup-label").id.replace("label-", "")}`;
const error = container.querySelector(`#${errorId}`);
expect(radioGroup.getAttribute("aria-disabled")).toBe("false");
expect(radioGroup.parentElement.getAttribute("aria-disabled")).toBe("false");
expect(radioGroup.getAttribute("aria-labelledby")).toBe(getByText("test-radioGroup-label").id);
expect(radioGroup.getAttribute("aria-invalid")).toBe("false");
expect(radioGroup.getAttribute("aria-required")).toBe("true");
Expand Down Expand Up @@ -77,7 +77,7 @@ describe("Radio Group component tests", () => {
);
const radioGroup = getByRole("radiogroup");
const radios = getAllByRole("radio");
expect(radioGroup.getAttribute("aria-disabled")).toBe("true");
expect(radioGroup.parentElement.getAttribute("aria-disabled")).toBe("true");
radios.forEach((radio) => {
expect(radio.tabIndex).toBe(-1);
});
Expand Down
3 changes: 1 addition & 2 deletions lib/src/radio-group/RadioGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(

return (
<ThemeProvider theme={colorsTheme.radioGroup}>
<RadioGroupContainer ref={ref}>
<RadioGroupContainer ref={ref} aria-disabled={disabled}>
{label && (
<Label id={radioGroupLabelId} helperText={helperText} disabled={disabled}>
{label}
Expand All @@ -142,7 +142,6 @@ const DxcRadioGroup = React.forwardRef<RefType, RadioGroupPropsType>(
onKeyDown={handleOnKeyDown}
stacking={stacking}
role="radiogroup"
aria-disabled={disabled}
aria-labelledby={radioGroupLabelId}
aria-invalid={error ? true : false}
aria-errormessage={error ? errorId : undefined}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/text-input/TextInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -353,7 +353,7 @@ const DxcTextInput = React.forwardRef<RefType, TextInputPropsType>(

return (
<ThemeProvider theme={colorsTheme.textInput}>
<TextInputContainer margin={margin} size={size} ref={ref}>
<TextInputContainer margin={margin} size={size} ref={ref} aria-disabled={disabled}>
{label && (
<Label htmlFor={inputId} disabled={disabled} hasHelperText={helperText ? true : false}>
{label} {optional && <OptionalLabel>{translatedLabels.formFields.optionalLabel}</OptionalLabel>}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/textarea/Textarea.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const DxcTextarea = React.forwardRef<RefType, TextareaPropsType>(

return (
<ThemeProvider theme={colorsTheme.textarea}>
<TextareaContainer margin={margin} size={size} ref={ref}>
<TextareaContainer margin={margin} size={size} ref={ref} aria-disabled={disabled}>
{label && (
<Label htmlFor={textareaId} disabled={disabled} helperText={helperText}>
{label} {optional && <OptionalLabel>{translatedLabels.formFields.optionalLabel}</OptionalLabel>}
Expand Down
2 changes: 1 addition & 1 deletion lib/src/toggle-group/ToggleGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@ const DxcToggleGroup = ({

return (
<ThemeProvider theme={colorsTheme.toggleGroup}>
<ToggleGroup margin={margin}>
<ToggleGroup margin={margin} aria-disabled={disabled}>
<Label id={toggleGroupLabelId} disabled={disabled}>
{label}
</Label>
Expand Down
Loading