From bd509b1b788a33a984f113a38b80a72d52393495 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 4 Oct 2023 15:54:00 +0200 Subject: [PATCH 01/15] updated Primary and Secondary topnav to NLDS --- .../primaryTopNav/PrimaryTopNav.module.css | 117 ++++++++++++++---- .../topNav/primaryTopNav/PrimaryTopNav.tsx | 46 ++++++- .../SecondaryTopNav.module.css | 31 +++-- 3 files changed, 152 insertions(+), 42 deletions(-) diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css index e716658..f6b4411 100644 --- a/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css +++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.module.css @@ -1,16 +1,31 @@ :root { - --conduction-primary-top-nav-item-padding: var(--skeleton-size-md); - --conduction-primary-top-nav-color: var(--skeleton-color-white); - --conduction-primary-top-nav-background-color: var(--skeleton-color-secondary-3); - --conduction-primary-top-nav-background-color-hover: rgba(255, 255, 255, 0.2); - --conduction-primary-top-nav-dropdown-border-radius: var(--skeleton-border-radius-md); - --conduction-primary-top-nav-background-color-active: rgba(255, 255, 255, 0.2); - --conduction-primary-top-nav-box-shadow-active: inset 0 -4px black; + --conduction-primary-top-nav-color: #4a4a4a; + --conduction-primary-top-nav-background-color: #ffffff; --conduction-primary-top-nav-toggle-icon-size: 24px; --conduction-primary-top-nav-mobile-logo-padding: 18px; + + --conduction-primary-top-nav-item-padding: var(--skeleton-size-md); --conduction-primary-top-nav-item-icon-margin: var(--skeleton-size-2x); - --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); - --conduction-primary-top-nav-dropdown-background-color-hover: var(--skeleton-color-grey-1); + + /* --conduction-primary-top-nav- */ + + /* --conduction-primary-top-nav-current-background-color: #ffffff; */ + /* --conduction-primary-top-nav-current-color: #4376fc; */ + /* --conduction-primary-top-nav-current-box-shadow: inset 0 -4px black; */ + /* --conduction-primary-top-nav-current-mobile-box-shadow: inset 4px 0 black; */ + + /* --conduction-primary-top-nav-hover-color: #4376fc; */ + /* --conduction-primary-top-nav-hover-background-color: #ffffff; */ + /* --conduction-primary-top-nav-hover-box-shadow: inset 0 -4px black; */ + + /* --conduction-primary-top-nav-dropdown-color: #4a4a4a; */ + /* --conduction-primary-top-nav-dropdown-background-color: var(--skeleton-color-white); */ + /* --conduction-primary-top-nav-dropdown-border-width: 1px; */ + /* --conduction-primary-top-nav-dropdown-border-style: solid; */ + /* --conduction-primary-top-nav-dropdown-border-color: #4376fc; */ + /* --conduction-primary-top-nav-dropdown-hover-color: #4376fc; */ + /* --conduction-primary-top-nav-dropdown-hover-background-color: #ffffff; */ + /* --conduction-primary-top-nav-dropdown-hover-box-shadow: inset 0 -4px black; */ } .container { @@ -28,6 +43,7 @@ all: unset; font-size: var(--conduction-primary-top-nav-toggle-icon-size); padding: var(--conduction-primary-top-nav-mobile-logo-padding); + color: var(--conduction-primary-top-nav-color); } .menuToggleContainer > .menuToggle:hover { @@ -75,59 +91,89 @@ } .li:hover { - background-color: var(--conduction-primary-top-nav-background-color-hover); + background-color: var(--conduction-primary-top-nav-hover-background-color); + box-shadow: var(--conduction-primary-top-nav-hover-box-shadow, inherit); } .current { - background-color: var(--conduction-primary-top-nav-background-color-active); - box-shadow: var(--conduction-primary-top-nav-box-shadow-active); + background-color: var(--conduction-primary-top-nav-current-background-color); + box-shadow: var(--conduction-primary-top-nav-current-box-shadow); +} + +.current:hover { + box-shadow: var(--conduction-primary-top-nav-current-box-shadow); +} +.current:hover > .currentLink { + color: var(--conduction-primary-top-nav-hover-color) !important; +} + +.currentLink { + color: var(--conduction-primary-top-nav-current-color) !important; } +.mobileLink { + margin-block-end: var(--skeleton-size-md); +} .primary .link { - display: block; text-decoration: none; +} + +.primary .link:not(.currentLink) { + display: block; color: var(--conduction-primary-top-nav-color); } .primary .li:hover .link { - color: var(--conduction-primary-top-nav-color-hover); + color: var(--conduction-primary-top-nav-hover-color); } .link > * { margin-inline-end: 8px; } -.primary .li:hover .dropdown { - display: block; - z-index: 1; -} - .dropdown { left: 0; top: 100%; padding: 0; width: 100%; - display: block; + display: none; list-style-type: none; - background-color: var(--conduction-primary-top-nav-dropdown-background-color); - border-bottom-right-radius: var(--conduction-primary-top-nav-dropdown-border-radius); - border-bottom-left-radius: var(--conduction-primary-top-nav-dropdown-border-radius); + background-color: var(--conduction-primary-top-nav-dropdown-background-color, var(--conduction-primary-top-nav-background-color)); +} + +.dropdown.isOpen { + display: block; +} + +.li.current { + box-shadow: var(--conduction-primary-top-nav-current-mobile-box-shadow); } .primary .dropdown .li .link { - color: var(--conduction-primary-top-nav-dropdown-color); + color: var(--conduction-primary-top-nav-dropdown-color, var(--conduction-primary-top-nav-color)); } .primary .dropdown .li:hover .link { - color: var(--conduction-primary-top-nav-dropdown-color-hover); + color: var(--conduction-primary-top-nav-dropdown-hover-color, var(--conduction-primary-top-nav-hover-color)); } .dropdown .li:hover { - background: var(--conduction-primary-top-nav-dropdown-background-color-hover); + background: var(--conduction-primary-top-nav-dropdown-hover-background-color, var(--conduction-primary-top-nav-hover-background-color)); + box-shadow: var(--conduction-primary-top-nav-dropdown-hover-box-shadow, var(--conduction-primary-top-nav-hover-box-shadow)); } .dropdown > li { - padding-inline-start: var(--web-app-size-md); + padding-inline-start: var(--skeleton-size-md); +} + +.toggleIcon { + margin-inline-start: var(--skeleton-size-xs); + transition: transform 100ms ease-in-out; +} + +.toggleIcon.isOpen { + transform: rotate(90deg); + transition: transform 100ms ease-in-out; } .label { @@ -159,9 +205,26 @@ .dropdown { position: absolute; display: none; + border-width: var(--conduction-primary-top-nav-dropdown-border-width); + border-style: var(--conduction-primary-top-nav-dropdown-border-style); + border-color: var(--conduction-primary-top-nav-dropdown-border-color); + border-top: none; } .menuToggleContainer { display: none; } + + .primary .li:hover .dropdown { + display: block; + z-index: 1; + } + + .mobileLink { + margin-block-end: unset; + } + + .li.current { + box-shadow: var(--conduction-primary-top-nav-current-box-shadow); + } } diff --git a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx index ccff43e..0b6186a 100644 --- a/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx +++ b/src/components/topNav/primaryTopNav/PrimaryTopNav.tsx @@ -3,7 +3,7 @@ import * as styles from "./PrimaryTopNav.module.css"; import clsx from "clsx"; import { Link } from "@utrecht/component-library-react/dist/css-module"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faBars } from "@fortawesome/free-solid-svg-icons"; +import { faBars, faChevronRight } from "@fortawesome/free-solid-svg-icons"; interface ITopNavItem { label: string; @@ -26,6 +26,7 @@ export interface TopNavProps { export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProps): JSX.Element => { const [isOpen, setIsOpen] = React.useState(false); + const [subNavIsOpen, setSubNavIsOpen] = React.useState({}); const handleItemClick = (handleClick?: () => any) => { if (handleClick) { @@ -35,6 +36,20 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp } }; + const handleSubItemMenu = (idx: number, value: boolean) => { + setSubNavIsOpen({ + ...subNavIsOpen, + [idx as keyof typeof subNavIsOpen]: value, + }); + }; + + const screenWidth = window.innerWidth; + + React.useEffect(() => { + if (screenWidth > 992) { + setSubNavIsOpen({}); + } + }, [screenWidth]); return (
@@ -49,24 +64,43 @@ export const PrimaryTopNav = ({ items, mobileLogo, layoutClassName }: TopNavProp
    {items.map(({ label, icon, current, handleClick, subItems }, idx) => (
  • handleItemClick(handleClick)} + onClick={() => + !subItems + ? handleItemClick(handleClick) + : screenWidth > 992 + ? handleItemClick(handleClick) + : handleSubItemMenu(idx, !subNavIsOpen[idx as keyof typeof subNavIsOpen] ?? true) + } className={clsx(styles.li, current && styles.current)} key={idx} > - + {icon} - {label} + {label}{" "} + {subItems && screenWidth < 992 && ( + + )} {subItems && ( -
      +
        {subItems.map(({ label, icon, current, handleClick }, idx) => (
      • handleItemClick(handleClick)} > - + {icon} {label} diff --git a/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css b/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css index b2c9427..12283c6 100644 --- a/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css +++ b/src/components/topNav/secondaryTopNav/SecondaryTopNav.module.css @@ -1,13 +1,18 @@ :root { - --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md); - --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md); --conduction-secondary-top-nav-color: var(--skeleton-color-white); - --conduction-secondary-top-nav-background-color: var(--skeleton-color-secondary-5); - --conduction-secondary-top-nav-background-color-hover: rgba(0, 0, 0, 0.1); + --conduction-secondary-top-nav-background-color: #ffffff; + --conduction-secondary-top-nav-font-size: var(--skeleton-font-size-md); --conduction-secondary-top-nav-font-weight: var(--skeleton-font-weight-light); - --conduction-secondary-top-nav-color-active: rgba(0, 0, 0, 0.1); - --conduction-secondary-top-nav-box-shadow-active: inset 0 -4px black; + + --conduction-secondary-top-nav-item-padding: var(--skeleton-size-md); --conduction-secondary-top-nav-item-icon-margin: var(--skeleton-size-2x); + + /* --conduction-secondary-top-nav-curent-color: rgba(0, 0, 0, 0.1); + --conduction-secondary-top-nav-current-background-color: #ffffff; + --conduction-secondary-top-nav-current-box-shadow: inset 0 -4px black; + + --conduction-secondary-top-nav-hover-color: #4376fc; + --conduction-secondary-top-nav-hover-background-color: rgba(0, 0, 0, 0.1); */ } .secondary:hover { @@ -31,12 +36,16 @@ } .li:hover { - background-color: var(--conduction-secondary-top-nav-background-color-hover); + background-color: var(--conduction-secondary-top-nav-hover-background-color); } .current { - background-color: var(--conduction-secondary-top-nav-color-active); - box-shadow: var(--conduction-secondary-top-nav-box-shadow-active); + background-color: var(--conduction-secondary-top-nav-current-background-color); + box-shadow: var(--conduction-secondary-top-nav-current-box-shadow); +} + +.currentLink { + color: var(--conduction-primary-top-nav-current-color) !important; } .secondary { @@ -46,6 +55,10 @@ background-color: var(--conduction-secondary-top-nav-background-color); } +.secondary .li:hover .link { + color: var(--conduction-secondary-top-nav-hover-color); + display: block; +} .secondary .link { color: var(--conduction-secondary-top-nav-color); display: block; From 0e6df19d7913a56b41c2bfaea4b8b8728c58b610 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 4 Oct 2023 15:54:18 +0200 Subject: [PATCH 02/15] Updated version and readme --- README.md | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 389bf4f..ab772f4 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 2.2.11: Updated Primary and Secondary topnav to NLDS. - 2.2.10: Added z-index to tooltip. - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index. - 2.2.8: diff --git a/package.json b/package.json index 3c88920..cc6cd0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.10", + "version": "2.2.11", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { From 130a6051177e83b1099f42657e3e7c1081db9900 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Oct 2023 12:02:37 +0200 Subject: [PATCH 03/15] added arialabel and roles to all select --- src/components/formFields/select/select.tsx | 58 +++++++++++++++++++++ 1 file changed, 58 insertions(+) diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 853b833..444dda1 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -11,6 +11,7 @@ interface ISelectProps { control: Control; options: { label: string; value: string }[]; name: string; + ariaLabel?: string; id?: string; defaultValue?: any; disabled?: boolean; @@ -72,7 +73,25 @@ export const SelectMultiple = ({ hideErrorMessage, menuPlacement, placeholder, + ariaLabel, }: ISelectProps & IReactHookFormProps): JSX.Element => { + React.useEffect(() => { + document.querySelectorAll('[id*="live-region"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + }, []); return ( { + React.useEffect(() => { + document.querySelectorAll('[id*="live-region"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + }, []); return ( { + React.useEffect(() => { + document.querySelectorAll('[id*="live-region"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => { + if (element.role !== "presentation") { + element.setAttribute("role", "presentation"); + } + }); + }, []); return ( Date: Wed, 11 Oct 2023 12:03:40 +0200 Subject: [PATCH 04/15] updated version and readme --- README.md | 1 + package.json | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index ab772f4..79eb111 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 2.2.12: Updated Select components to WCAG with aria-label and role. - 2.2.11: Updated Primary and Secondary topnav to NLDS. - 2.2.10: Added z-index to tooltip. - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index. diff --git a/package.json b/package.json index cc6cd0e..77db6a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.11", + "version": "2.2.12", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { From bf6818010a379ea8d9159077b478ce823fbf7228 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Oct 2023 12:31:37 +0200 Subject: [PATCH 05/15] build fix --- src/components/formFields/select/select.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 444dda1..9646eb7 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -76,17 +76,17 @@ export const SelectMultiple = ({ ariaLabel, }: ISelectProps & IReactHookFormProps): JSX.Element => { React.useEffect(() => { - document.querySelectorAll('[id*="live-region"]').forEach((element) => { - if (element.role !== "presentation") { + document.querySelectorAll('[id*="live-region"]').forEach((element: any) => { + if (element?.role !== "presentation") { element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => { + document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => { + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } @@ -135,17 +135,17 @@ export const SelectCreate = ({ ariaLabel, }: ISelectProps & IReactHookFormProps): JSX.Element => { React.useEffect(() => { - document.querySelectorAll('[id*="live-region"]').forEach((element) => { + document.querySelectorAll('[id*="live-region"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => { + document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => { + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } @@ -195,17 +195,17 @@ export const SelectSingle = ({ ariaLabel, }: ISelectProps & IReactHookFormProps): JSX.Element => { React.useEffect(() => { - document.querySelectorAll('[id*="live-region"]').forEach((element) => { + document.querySelectorAll('[id*="live-region"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element) => { + document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element) => { + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } From 3de1a7cc906d0650ad701b0c2b0792f4bffc3bf0 Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Oct 2023 13:02:50 +0200 Subject: [PATCH 06/15] updated select --- README.md | 2 +- package.json | 2 +- src/components/formFields/select/select.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 79eb111..708dc50 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.12: Updated Select components to WCAG with aria-label and role. + - 2.2.12/2.2.13: Updated Select components to WCAG with aria-label and role. - 2.2.11: Updated Primary and Secondary topnav to NLDS. - 2.2.10: Added z-index to tooltip. - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index. diff --git a/package.json b/package.json index 77db6a1..3256455 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.12", + "version": "2.2.13", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 9646eb7..41cf75f 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -145,7 +145,7 @@ export const SelectCreate = ({ element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { + document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } From f2e4d35cc26387ab3d6c6dddf294edb67484d5ac Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Oct 2023 13:10:53 +0200 Subject: [PATCH 07/15] updated input and textarea --- README.md | 5 ++++- src/components/formFields/input.tsx | 15 +++++++++++++++ src/components/formFields/textarea.tsx | 9 ++++++++- 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 708dc50..d9ab059 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,10 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.12/2.2.13: Updated Select components to WCAG with aria-label and role. + - 2.2.13: + - Updated Textarea and all Input components to allow aria-label. + - Updated Select components. + - 2.2.12: Updated Select components to WCAG with aria-label and role. - 2.2.11: Updated Primary and Secondary topnav to NLDS. - 2.2.10: Added z-index to tooltip. - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index. diff --git a/src/components/formFields/input.tsx b/src/components/formFields/input.tsx index 8485e6e..ed63a51 100644 --- a/src/components/formFields/input.tsx +++ b/src/components/formFields/input.tsx @@ -5,6 +5,7 @@ import { ErrorMessage } from "./errorMessage/ErrorMessage"; export interface IInputProps { name: string; + ariaLabel?: string; disabled?: boolean; defaultValue?: string; icon?: JSX.Element; @@ -20,6 +21,7 @@ export const InputPassword: React.FC = ({ placeholder, errors, hideErrorMessage, + ariaLabel, }) => { return ( <> @@ -28,6 +30,7 @@ export const InputPassword: React.FC = ({ {...{ disabled, placeholder }} {...register(name, { ...validation })} invalid={errors[name]} + aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -44,6 +47,7 @@ export const InputText: React.FC = ({ placeholder, errors, hideErrorMessage, + ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation })} invalid={errors[name]} + aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -66,6 +71,7 @@ export const InputEmail: React.FC = ({ placeholder, errors, hideErrorMessage, + ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation })} invalid={errors[name]} + aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -89,6 +96,7 @@ export const InputURL: React.FC = ({ placeholder, errors, hideErrorMessage, + ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation })} invalid={errors[name]} + aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -111,6 +120,7 @@ export const InputNumber: React.FC = ({ placeholder, errors, hideErrorMessage, + ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation, valueAsNumber: true })} invalid={errors[name]} + aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -133,6 +144,7 @@ export const InputFloat: React.FC = ({ placeholder, errors, hideErrorMessage, + ariaLabel, }) => ( <> = ({ {...{ disabled, placeholder, icon, defaultValue }} {...register(name, { ...validation, valueAsNumber: true })} invalid={errors[name]} + aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -157,11 +170,13 @@ export const InputFile: React.FC ( ); diff --git a/src/components/formFields/textarea.tsx b/src/components/formFields/textarea.tsx index 4f3ea5d..f6aea00 100644 --- a/src/components/formFields/textarea.tsx +++ b/src/components/formFields/textarea.tsx @@ -4,6 +4,7 @@ import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/di export interface ITextAreaProps { name: string; + ariaLabel?: string; disabled?: boolean; defaultValue?: string; hideErrorMessage?: boolean; @@ -17,9 +18,15 @@ export const Textarea = ({ disabled, defaultValue, hideErrorMessage, + ariaLabel, }: ITextAreaProps & IReactHookFormProps): JSX.Element => ( <> - + {errors[name] && !hideErrorMessage && } ); From ddc3c4c5885cd3bafdf5e7618d678356563a914c Mon Sep 17 00:00:00 2001 From: Remko Date: Wed, 11 Oct 2023 14:00:06 +0200 Subject: [PATCH 08/15] updated select --- README.md | 2 +- package.json | 2 +- src/components/formFields/select/select.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d9ab059..2b96420 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.13: + - 2.2.13/2.2.14: - Updated Textarea and all Input components to allow aria-label. - Updated Select components. - 2.2.12: Updated Select components to WCAG with aria-label and role. diff --git a/package.json b/package.json index 3256455..d83e0c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.13", + "version": "2.2.14", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 41cf75f..ed6de4a 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -86,7 +86,7 @@ export const SelectMultiple = ({ element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { + document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } @@ -205,7 +205,7 @@ export const SelectSingle = ({ element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { + document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } From 3334c8d73812737eb9cfd375225ab060e9754348 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 13 Oct 2023 13:42:25 +0200 Subject: [PATCH 09/15] Pagination NLDS --- README.md | 1 + package.json | 2 +- .../Pagination/Pagination.module.css | 46 +++++++++++++++++-- 3 files changed, 43 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 2b96420..f4b6861 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** + - 2.2.15: Added more NLDS options to Pagination. - 2.2.13/2.2.14: - Updated Textarea and all Input components to allow aria-label. - Updated Select components. diff --git a/package.json b/package.json index d83e0c7..d5b55f2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.14", + "version": "2.2.15", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css index dc67974..d521e31 100644 --- a/src/components/Pagination/Pagination.module.css +++ b/src/components/Pagination/Pagination.module.css @@ -20,13 +20,30 @@ --conduction-pagination-item-border-style: unset; --conduction-pagination-item-border-color: unset; + /* --conduction-pagination-navigation-button-background-color: #4376fc; */ + /* --conduction-pagination-navigation-button-color: #ffffff; */ + /* --conduction-pagination-navigation-button-border-width: 1px; */ + /* --conduction-pagination-navigation-button-border-style: solid; */ + /* --conduction-pagination-navigation-button-border-color: #4376fc; */ + /* --conduction-pagination-navigation-button-border-radius: 1px; */ --conduction-pagination-navigation-button-padding-inline-start: 8px; --conduction-pagination-navigation-button-padding-inline-end: 8px; --conduction-pagination-navigation-button-padding-block-start: 0px; --conduction-pagination-navigation-button-padding-block-end: 0px; - --conduction-pagination-disabled-color: #d1d1d1; - --conduction-pagination-disabled-background-color: #fefefe; + --conduction-pagination-navigation-button-disabled-color: #d1d1d1; + --conduction-pagination-navigation-button-disabled-background-color: #fefefe; + /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */ + /* --conduction-pagination-navigation-button-disabled-border-style: solid; */ + /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */ + /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */ + + --conduction-pagination-navigation-button-hover-color: #d1d1d1; + --conduction-pagination-navigation-button-hover-background-color: #fefefe; + /* --conduction-pagination-navigation-button-hover-border-width: 1px; */ + /* --conduction-pagination-navigation-button-hover-border-style: solid; */ + /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */ + /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */ --conduction-pagination-current-page-background-color: #4376fc; --conduction-pagination-current-page-color: #ffffff; @@ -97,9 +114,22 @@ cursor: not-allowed; } -.container > li.disabled > a { - color: var(--conduction-pagination-disabled-color); - background-color: var(--conduction-pagination-disabled-background-color); +.container > li.disabled > a > .button { + color: var(--conduction-pagination-navigation-button-disabled-color) !important; + background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important; + border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width)); + border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style)); + border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color)); + border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius)); +} + +.container > li:hover:not(.disabled) > a > .button { + color: var(--conduction-pagination-navigation-button-hover-color) !important; + background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important; + border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width)); + border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style)); + border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color)); + border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius)); } .container > li:hover:not(.disabled):not(.currentPage) { @@ -115,6 +145,12 @@ } .button { + background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important; + color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important; + border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)); + border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)); + border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)); + border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)); padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important; padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important; padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important; From 367b8eb6d76ed3a4a558460a076cee4e79e38db6 Mon Sep 17 00:00:00 2001 From: Remko Date: Fri, 13 Oct 2023 16:12:20 +0200 Subject: [PATCH 10/15] updated pagination --- README.md | 2 +- package.json | 2 +- src/components/Pagination/Pagination.module.css | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index f4b6861..3a2d032 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.15: Added more NLDS options to Pagination. + - 2.2.15/2.2.16: Added more NLDS options to Pagination. - 2.2.13/2.2.14: - Updated Textarea and all Input components to allow aria-label. - Updated Select components. diff --git a/package.json b/package.json index d5b55f2..7d5dfa8 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.15", + "version": "2.2.16", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css index d521e31..a49c222 100644 --- a/src/components/Pagination/Pagination.module.css +++ b/src/components/Pagination/Pagination.module.css @@ -147,9 +147,9 @@ .button { background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important; color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important; - border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)); - border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)); - border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)); + border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important; + border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important; + border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important; border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)); padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important; padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important; From a31047ee0af87a7e98e4a8ed7bbe9b7135aa6c83 Mon Sep 17 00:00:00 2001 From: Remko Huisman <43807324+remko48@users.noreply.github.com> Date: Mon, 16 Oct 2023 09:03:29 +0200 Subject: [PATCH 11/15] Revert "feature/OP-57/pagination" --- README.md | 2 +- package.json | 2 +- src/components/Pagination/Pagination.module.css | 6 +++--- 3 files changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 3a2d032..f4b6861 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.15/2.2.16: Added more NLDS options to Pagination. + - 2.2.15: Added more NLDS options to Pagination. - 2.2.13/2.2.14: - Updated Textarea and all Input components to allow aria-label. - Updated Select components. diff --git a/package.json b/package.json index 7d5dfa8..d5b55f2 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.16", + "version": "2.2.15", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css index a49c222..d521e31 100644 --- a/src/components/Pagination/Pagination.module.css +++ b/src/components/Pagination/Pagination.module.css @@ -147,9 +147,9 @@ .button { background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important; color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important; - border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)) !important; - border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)) !important; - border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)) !important; + border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)); + border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)); + border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)); border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)); padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important; padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important; From 66c872320639a57cee6afb484595a6b92b5a868d Mon Sep 17 00:00:00 2001 From: Remko Huisman <43807324+remko48@users.noreply.github.com> Date: Mon, 16 Oct 2023 09:04:02 +0200 Subject: [PATCH 12/15] Revert "feature/OP-57/pagination" --- README.md | 1 - package.json | 2 +- .../Pagination/Pagination.module.css | 46 ++----------------- 3 files changed, 6 insertions(+), 43 deletions(-) diff --git a/README.md b/README.md index f4b6861..2b96420 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,6 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.15: Added more NLDS options to Pagination. - 2.2.13/2.2.14: - Updated Textarea and all Input components to allow aria-label. - Updated Select components. diff --git a/package.json b/package.json index d5b55f2..d83e0c7 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.15", + "version": "2.2.14", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/Pagination/Pagination.module.css b/src/components/Pagination/Pagination.module.css index d521e31..dc67974 100644 --- a/src/components/Pagination/Pagination.module.css +++ b/src/components/Pagination/Pagination.module.css @@ -20,30 +20,13 @@ --conduction-pagination-item-border-style: unset; --conduction-pagination-item-border-color: unset; - /* --conduction-pagination-navigation-button-background-color: #4376fc; */ - /* --conduction-pagination-navigation-button-color: #ffffff; */ - /* --conduction-pagination-navigation-button-border-width: 1px; */ - /* --conduction-pagination-navigation-button-border-style: solid; */ - /* --conduction-pagination-navigation-button-border-color: #4376fc; */ - /* --conduction-pagination-navigation-button-border-radius: 1px; */ --conduction-pagination-navigation-button-padding-inline-start: 8px; --conduction-pagination-navigation-button-padding-inline-end: 8px; --conduction-pagination-navigation-button-padding-block-start: 0px; --conduction-pagination-navigation-button-padding-block-end: 0px; - --conduction-pagination-navigation-button-disabled-color: #d1d1d1; - --conduction-pagination-navigation-button-disabled-background-color: #fefefe; - /* --conduction-pagination-navigation-button-disabled-border-width: 1px; */ - /* --conduction-pagination-navigation-button-disabled-border-style: solid; */ - /* --conduction-pagination-navigation-button-disabled-border-color: #4376fc; */ - /* --conduction-pagination-navigation-button-disabled-border-radius: 1px; */ - - --conduction-pagination-navigation-button-hover-color: #d1d1d1; - --conduction-pagination-navigation-button-hover-background-color: #fefefe; - /* --conduction-pagination-navigation-button-hover-border-width: 1px; */ - /* --conduction-pagination-navigation-button-hover-border-style: solid; */ - /* --conduction-pagination-navigation-button-hover-border-color: #4376fc; */ - /* --conduction-pagination-navigation-button-hover-border-radius: 1px; */ + --conduction-pagination-disabled-color: #d1d1d1; + --conduction-pagination-disabled-background-color: #fefefe; --conduction-pagination-current-page-background-color: #4376fc; --conduction-pagination-current-page-color: #ffffff; @@ -114,22 +97,9 @@ cursor: not-allowed; } -.container > li.disabled > a > .button { - color: var(--conduction-pagination-navigation-button-disabled-color) !important; - background-color: var(--conduction-pagination-navigation-button-disabled-background-color) !important; - border-width: var(--conduction-pagination-navigation-button-disabled-border-width, var(--utrecht-button-border-width)); - border-style: var(--conduction-pagination-navigation-button-disabled-border-style, var(--utrecht-button-border-style)); - border-color: var(--conduction-pagination-navigation-button-disabled-border-color, var(--utrecht-button-border-color)); - border-radius: var(--conduction-pagination-navigation-button-disabled-border-radius, var(--utrecht-button-border-radius)); -} - -.container > li:hover:not(.disabled) > a > .button { - color: var(--conduction-pagination-navigation-button-hover-color) !important; - background-color: var(--conduction-pagination-navigation-button-hover-background-color) !important; - border-width: var(--conduction-pagination-navigation-button-hover-border-width, var(--utrecht-button-border-width)); - border-style: var(--conduction-pagination-navigation-button-hover-border-style, var(--utrecht-button-border-style)); - border-color: var(--conduction-pagination-navigation-button-hover-border-color, var(--utrecht-button-border-color)); - border-radius: var(--conduction-pagination-navigation-button-hover-border-radius, var(--utrecht-button-border-radius)); +.container > li.disabled > a { + color: var(--conduction-pagination-disabled-color); + background-color: var(--conduction-pagination-disabled-background-color); } .container > li:hover:not(.disabled):not(.currentPage) { @@ -145,12 +115,6 @@ } .button { - background-color: var(--conduction-pagination-navigation-button-background-color, var(--utrecht-button-background-color)) !important; - color: var(--conduction-pagination-navigation-button-color, var(--utrecht-button-color)) !important; - border-width: var(--conduction-pagination-navigation-button-border-width, var(--utrecht-button-border-width)); - border-style: var(--conduction-pagination-navigation-button-border-style, var(--utrecht-button-border-style)); - border-color: var(--conduction-pagination-navigation-button-border-color, var(--utrecht-button-border-color)); - border-radius: var(--conduction-pagination-navigation-button-border-radius, var(--utrecht-button-border-radius)); padding-inline-start: var(--conduction-pagination-navigation-button-padding-inline-start) !important; padding-inline-end: var(--conduction-pagination-navigation-button-padding-inline-end) !important; padding-block-start: var(--conduction-pagination-navigation-button-padding-block-start) !important; From 5c48485ebbc873790b5acfe57fea6895b5f24955 Mon Sep 17 00:00:00 2001 From: Remko Huisman <43807324+remko48@users.noreply.github.com> Date: Mon, 16 Oct 2023 09:04:18 +0200 Subject: [PATCH 13/15] Revert "feature/XW-87/select-WCAG" --- README.md | 2 +- package.json | 2 +- src/components/formFields/select/select.tsx | 4 ++-- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 2b96420..d9ab059 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.13/2.2.14: + - 2.2.13: - Updated Textarea and all Input components to allow aria-label. - Updated Select components. - 2.2.12: Updated Select components to WCAG with aria-label and role. diff --git a/package.json b/package.json index d83e0c7..3256455 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.14", + "version": "2.2.13", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index ed6de4a..41cf75f 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -86,7 +86,7 @@ export const SelectMultiple = ({ element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => { + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } @@ -205,7 +205,7 @@ export const SelectSingle = ({ element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => { + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } From 7cacaefa268b88ca57c99ff8ece932e464e4e1d5 Mon Sep 17 00:00:00 2001 From: Remko Huisman <43807324+remko48@users.noreply.github.com> Date: Mon, 16 Oct 2023 09:04:41 +0200 Subject: [PATCH 14/15] Revert "feature/XW-87/select-WCAG" --- README.md | 3 --- package.json | 2 +- src/components/formFields/input.tsx | 15 --------------- src/components/formFields/select/select.tsx | 2 +- src/components/formFields/textarea.tsx | 9 +-------- 5 files changed, 3 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index d9ab059..79eb111 100644 --- a/README.md +++ b/README.md @@ -4,9 +4,6 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.13: - - Updated Textarea and all Input components to allow aria-label. - - Updated Select components. - 2.2.12: Updated Select components to WCAG with aria-label and role. - 2.2.11: Updated Primary and Secondary topnav to NLDS. - 2.2.10: Added z-index to tooltip. diff --git a/package.json b/package.json index 3256455..77db6a1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.13", + "version": "2.2.12", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/formFields/input.tsx b/src/components/formFields/input.tsx index ed63a51..8485e6e 100644 --- a/src/components/formFields/input.tsx +++ b/src/components/formFields/input.tsx @@ -5,7 +5,6 @@ import { ErrorMessage } from "./errorMessage/ErrorMessage"; export interface IInputProps { name: string; - ariaLabel?: string; disabled?: boolean; defaultValue?: string; icon?: JSX.Element; @@ -21,7 +20,6 @@ export const InputPassword: React.FC = ({ placeholder, errors, hideErrorMessage, - ariaLabel, }) => { return ( <> @@ -30,7 +28,6 @@ export const InputPassword: React.FC = ({ {...{ disabled, placeholder }} {...register(name, { ...validation })} invalid={errors[name]} - aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -47,7 +44,6 @@ export const InputText: React.FC = ({ placeholder, errors, hideErrorMessage, - ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation })} invalid={errors[name]} - aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -71,7 +66,6 @@ export const InputEmail: React.FC = ({ placeholder, errors, hideErrorMessage, - ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation })} invalid={errors[name]} - aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -96,7 +89,6 @@ export const InputURL: React.FC = ({ placeholder, errors, hideErrorMessage, - ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation })} invalid={errors[name]} - aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -120,7 +111,6 @@ export const InputNumber: React.FC = ({ placeholder, errors, hideErrorMessage, - ariaLabel, }) => ( <> = ({ {...{ defaultValue, disabled, placeholder, icon }} {...register(name, { ...validation, valueAsNumber: true })} invalid={errors[name]} - aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -144,7 +133,6 @@ export const InputFloat: React.FC = ({ placeholder, errors, hideErrorMessage, - ariaLabel, }) => ( <> = ({ {...{ disabled, placeholder, icon, defaultValue }} {...register(name, { ...validation, valueAsNumber: true })} invalid={errors[name]} - aria-label={ariaLabel} /> {errors[name] && !hideErrorMessage && } @@ -170,13 +157,11 @@ export const InputFile: React.FC ( ); diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 41cf75f..9646eb7 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -145,7 +145,7 @@ export const SelectCreate = ({ element.setAttribute("role", "presentation"); } }); - document.querySelectorAll('[class*="a11yText"]').forEach((element: any) => { + document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { if (element.role !== "presentation") { element.setAttribute("role", "presentation"); } diff --git a/src/components/formFields/textarea.tsx b/src/components/formFields/textarea.tsx index f6aea00..4f3ea5d 100644 --- a/src/components/formFields/textarea.tsx +++ b/src/components/formFields/textarea.tsx @@ -4,7 +4,6 @@ import { Textarea as UtrechtTextarea } from "@utrecht/component-library-react/di export interface ITextAreaProps { name: string; - ariaLabel?: string; disabled?: boolean; defaultValue?: string; hideErrorMessage?: boolean; @@ -18,15 +17,9 @@ export const Textarea = ({ disabled, defaultValue, hideErrorMessage, - ariaLabel, }: ITextAreaProps & IReactHookFormProps): JSX.Element => ( <> - + {errors[name] && !hideErrorMessage && } ); From 614a469ffc88a8c32adc8527b9e8b1b2ebcfc8d9 Mon Sep 17 00:00:00 2001 From: Remko Huisman <43807324+remko48@users.noreply.github.com> Date: Mon, 16 Oct 2023 09:04:57 +0200 Subject: [PATCH 15/15] Revert "feature/XW-87/select-WCAG" --- README.md | 1 - package.json | 2 +- src/components/formFields/select/select.tsx | 58 --------------------- 3 files changed, 1 insertion(+), 60 deletions(-) diff --git a/README.md b/README.md index 79eb111..ab772f4 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,6 @@ - **Version 2.2 (breaking changes from 2.1.x)** - - 2.2.12: Updated Select components to WCAG with aria-label and role. - 2.2.11: Updated Primary and Secondary topnav to NLDS. - 2.2.10: Added z-index to tooltip. - 2.2.9: Added CardWrapper, CardHeader, CardHeaderTitle, CardHeaderDate to index. diff --git a/package.json b/package.json index 77db6a1..cc6cd0e 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@conduction/components", - "version": "2.2.12", + "version": "2.2.11", "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)", "main": "lib/index.js", "scripts": { diff --git a/src/components/formFields/select/select.tsx b/src/components/formFields/select/select.tsx index 9646eb7..853b833 100644 --- a/src/components/formFields/select/select.tsx +++ b/src/components/formFields/select/select.tsx @@ -11,7 +11,6 @@ interface ISelectProps { control: Control; options: { label: string; value: string }[]; name: string; - ariaLabel?: string; id?: string; defaultValue?: any; disabled?: boolean; @@ -73,25 +72,7 @@ export const SelectMultiple = ({ hideErrorMessage, menuPlacement, placeholder, - ariaLabel, }: ISelectProps & IReactHookFormProps): JSX.Element => { - React.useEffect(() => { - document.querySelectorAll('[id*="live-region"]').forEach((element: any) => { - if (element?.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - }, []); return ( { - React.useEffect(() => { - document.querySelectorAll('[id*="live-region"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - }, []); return ( { - React.useEffect(() => { - document.querySelectorAll('[id*="live-region"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - document.querySelectorAll('[class*="indicatorSeparator"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - document.querySelectorAll('[class*="a11yText-A11yText"]').forEach((element: any) => { - if (element.role !== "presentation") { - element.setAttribute("role", "presentation"); - } - }); - }, []); return (