Fixed contrast problems for disabled elements

lib/.storybook/main.ts

@@ -13,5 +13,6 @@ const config: StorybookConfig = {
     name: "@storybook/react-vite",
     options: {},
   },
+  features: { buildStoriesJson: true },
 };
 export default config;

lib/src/chip/Chip.accessibility.test.js

@@ -2,6 +2,14 @@ import React from "react";
 import { render } from "@testing-library/react";
 import { axe } from "../../test/accessibility/axe-helper.js";
 import DxcChip from "./Chip.tsx";
+import { disabledRules as rules } from "../../test/accessibility/rules/specific/chip/disabledRules.js";
+
+const disabledRules = {
+  rules: rules.reduce((rulesObj, rule) => {
+    rulesObj[rule] = { enabled: false };
+    return rulesObj;
+  }, {}),
+};
 
 const iconSVG = (
   <svg
@@ -29,14 +37,14 @@ c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.11
 describe("Chip component accessibility tests", () => {
   it("Should not have basic accessibility issues", async () => {
     const { container } = render(<DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" />);
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for disabled mode", async () => {
     const { container } = render(
       <DxcChip margin="small" prefixIcon={iconSVG} suffixIcon={iconSVG} label="Chip" disabled />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
 });

lib/src/chip/Chip.stories.tsx

@@ -4,10 +4,22 @@ import DxcChip from "./Chip";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import { HalstackProvider } from "../HalstackContext";
+import preview from "../../.storybook/preview";
+import { disabledRules } from "../../test/accessibility/rules/specific/chip/disabledRules";
 
 export default {
   title: "Chip",
   component: DxcChip,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
 const iconSVG = (

lib/src/common/variables.ts

@@ -229,7 +229,7 @@ export const componentTokens = {
     pickerHoverFontColor: CoreTokens.color_black,
     pickerActiveBackgroundColor: CoreTokens.color_purple_800,
     pickerActiveFontColor: CoreTokens.color_white,
-    pickerNonCurrentMonthFontColor: CoreTokens.color_grey_500,
+    pickerNonCurrentMonthFontColor: CoreTokens.color_grey_700,
     pickerCurrentDateBorderColor: CoreTokens.color_purple_300,
     pickerCurrentDateFontColor: CoreTokens.color_black,
     pickerCurrentYearFontColor: CoreTokens.color_purple_700,
@@ -905,8 +905,8 @@ export const componentTokens = {
     selectedUnderlineColor: CoreTokens.color_purple_700,
     selectedUnderlineThickness: "2px",
     unselectedBackgroundColor: CoreTokens.color_white,
-    unselectedFontColor: CoreTokens.color_grey_700,
-    unselectedIconColor: CoreTokens.color_grey_700,
+    unselectedFontColor: CoreTokens.color_grey_800,
+    unselectedIconColor: CoreTokens.color_grey_800,
     disabledFontColor: CoreTokens.color_grey_500,
     disabledIconColor: CoreTokens.color_grey_500,
     disabledFontStyle: CoreTokens.type_normal,

lib/src/file-input/FileInput.accessibility.test.js

@@ -2,6 +2,14 @@ import React from "react";
 import { render } from "@testing-library/react";
 import { axe } from "../../test/accessibility/axe-helper.js";
 import DxcFileInput from "./FileInput.tsx";
+import { disabledRules as rules } from "../../test/accessibility/rules/specific/file-input/disabledRules.js";
+
+const disabledRules = {
+  rules: rules.reduce((rulesObj, rule) => {
+    rulesObj[rule] = { enabled: false };
+    return rulesObj;
+  }, {}),
+};
 
 const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg";
 
@@ -61,7 +69,7 @@ describe("FileInput component accessibility tests", () => {
         showPreview
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for disabled mode", async () => {
@@ -80,7 +88,7 @@ describe("FileInput component accessibility tests", () => {
         disabled
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for file mode", async () => {
@@ -99,7 +107,7 @@ describe("FileInput component accessibility tests", () => {
         showPreview
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for filedrop mode", async () => {
@@ -118,7 +126,7 @@ describe("FileInput component accessibility tests", () => {
         showPreview
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
 });

lib/src/file-input/FileInput.stories.tsx

@@ -4,10 +4,22 @@ import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import FileItem from "./FileItem";
 import { HalstackProvider } from "../HalstackContext";
+import { disabledRules } from "../../test/accessibility/rules/specific/file-input/disabledRules";
+import preview from "../../.storybook/preview";
 
 export default {
   title: "File Input",
   component: DxcFileInput,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
 const picPreview = "https://cdn.mos.cms.futurecdn.net/CAZ6JXi6huSuN4QGE627NR.jpg";

lib/src/footer/Footer.stories.tsx

@@ -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} />
@@ -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>
   </>

lib/src/number-input/NumberInput.accessibility.test.js

@@ -2,6 +2,14 @@ import React from "react";
 import { render } from "@testing-library/react";
 import { axe } from "../../test/accessibility/axe-helper.js";
 import DxcNumberInput from "./NumberInput.tsx";
+import { disabledRules as rules } from "../../test/accessibility/rules/specific/number-input/disabledRules.js";
+
+const disabledRules = {
+  rules: rules.reduce((rulesObj, rule) => {
+    rulesObj[rule] = { enabled: false };
+    return rulesObj;
+  }, {}),
+};
 
 // Mocking DOMRect for Radix Primitive Popover
 global.globalThis = global;
@@ -32,7 +40,7 @@ describe("Number input component accessibility tests", () => {
         step={1}
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for optional mode", async () => {
@@ -53,7 +61,7 @@ describe("Number input component accessibility tests", () => {
         optional
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for error mode", async () => {
@@ -74,7 +82,7 @@ describe("Number input component accessibility tests", () => {
         step={1}
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for disabled mode", async () => {
@@ -95,7 +103,7 @@ describe("Number input component accessibility tests", () => {
         disabled
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for read-only mode", async () => {
@@ -116,7 +124,7 @@ describe("Number input component accessibility tests", () => {
         readOnly
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for autocomplete mode", async () => {
@@ -137,7 +145,7 @@ describe("Number input component accessibility tests", () => {
         autocomplete="on"
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
 });

lib/src/number-input/NumberInput.stories.tsx

@@ -2,10 +2,22 @@ import React from "react";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DxcNumberInput from "./NumberInput";
+import { disabledRules } from "../../test/accessibility/rules/specific/number-input/disabledRules";
+import preview from "../../.storybook/preview";
 
 export default {
   title: "Number Input",
   component: DxcNumberInput,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
 export const Chromatic = () => (
@@ -32,25 +44,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Read only" theme="light" level={4} />
-      <DxcNumberInput
-        label="Example label"
-        helperText="Help message"
-        readOnly
-        optional
-        prefix="€"
-        defaultValue="33"
-      />
+      <DxcNumberInput label="Example label" helperText="Help message" readOnly optional prefix="€" defaultValue="33" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
       <Title title="Hovered read only" theme="light" level={4} />
-      <DxcNumberInput
-        label="Example label"
-        helperText="Help message"
-        readOnly
-        optional
-        prefix="€"
-        defaultValue="1"
-      />
+      <DxcNumberInput label="Example label" helperText="Help message" readOnly optional prefix="€" defaultValue="1" />
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-active">
       <Title title="Active read only" theme="light" level={4} />

lib/src/radio-group/RadioGroup.accessibility.test.js

@@ -15,6 +15,15 @@ const options = [
   { label: "Option 09", value: "9" },
 ];
 
+import { disabledRules as rules } from "../../test/accessibility/rules/specific/radio-group/disabledRules.js";
+
+const disabledRules = {
+  rules: rules.reduce((rulesObj, rule) => {
+    rulesObj[rule] = { enabled: false };
+    return rulesObj;
+  }, {}),
+};
+
 describe("Radio Group component accessibility tests", () => {
   it("Should not have basic accessibility issues", async () => {
     const { container } = render(
@@ -30,7 +39,7 @@ describe("Radio Group component accessibility tests", () => {
         optional
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
   it("Should not have basic accessibility issues for read-only mode", async () => {
@@ -47,7 +56,7 @@ describe("Radio Group component accessibility tests", () => {
         readOnly
       />
     );
-    const results = await axe(container);
+    const results = await axe(container, disabledRules);
     expect(results).toHaveNoViolations();
   });
 });

lib/src/radio-group/RadioGroup.stories.tsx

@@ -3,10 +3,22 @@ import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import Title from "../../.storybook/components/Title";
 import DxcRadioGroup from "./RadioGroup";
 import { HalstackProvider } from "../HalstackContext";
+import { disabledRules } from "../../test/accessibility/rules/specific/radio-group/disabledRules";
+import preview from "../../.storybook/preview";
 
 export default {
   title: "Radio Group",
   component: DxcRadioGroup,
+  parameters: {
+    a11y: {
+      config: {
+        rules: [
+          ...disabledRules.map((ruleId) => ({ id: ruleId, reviewOnFail: true })),
+          ...preview?.parameters?.a11y?.config?.rules,
+        ],
+      },
+    },
+  },
 };
 
 const single_option = [{ label: "Option A", value: "A" }];

lib/src/slider/Slider.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useContext } from "react";
+import React, { useState, useMemo } from "react";
 import styled, { ThemeProvider } from "styled-components";
 import DxcTextInput from "../text-input/TextInput";
 import { spaces } from "../common/variables";