From dafef75c895da77fe9010a797ce245dcce184db8 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 08:01:56 +0200 Subject: [PATCH 01/13] feat: Better labeling of Tooltip --- @navikt/core/react/src/tooltip/Tooltip.tsx | 35 +++++++++++-------- .../react/src/tooltip/tooltip.stories.tsx | 4 ++- .../eksempler/togglegroup/with-tooltip.tsx | 16 ++++----- .../website/pages/eksempler/tooltip/demo.tsx | 4 +-- .../pages/eksempler/tooltip/labeling.tsx | 29 +++++++++++++++ .../pages/eksempler/tooltip/no-arrow.tsx | 4 +-- .../pages/eksempler/tooltip/placement.tsx | 16 ++++----- .../eksempler/tooltip/with-shortcuts.tsx | 4 +-- yarn.lock | 34 +++++++++--------- 9 files changed, 91 insertions(+), 55 deletions(-) create mode 100644 aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx index cc7c6aa384..55770f79f6 100644 --- a/@navikt/core/react/src/tooltip/Tooltip.tsx +++ b/@navikt/core/react/src/tooltip/Tooltip.tsx @@ -12,9 +12,10 @@ import { useInteractions, } from "@floating-ui/react"; import cl from "clsx"; -import React, { HTMLAttributes, cloneElement, forwardRef, useRef } from "react"; +import React, { HTMLAttributes, forwardRef, useRef } from "react"; import { useModalContext } from "../modal/Modal.context"; import { Portal } from "../portal"; +import { Slot } from "../slot/Slot"; import { Detail } from "../typography"; import { useId } from "../util/hooks"; import { useControllableState } from "../util/hooks/useControllableState"; @@ -80,6 +81,13 @@ export interface TooltipProps extends HTMLAttributes { * List of Keyboard-keys for shortcuts. */ keys?: string[]; + /** + * When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers. + * When true, content is added as additional information to the child element. + * Important: This will default to false in future major-versions + * @default true + */ + describeChild?: boolean; } /** @@ -89,9 +97,9 @@ export interface TooltipProps extends HTMLAttributes { * @see 🏷️ {@link TooltipProps} * * @example - * ```jsx + * ```jsx Tooltip as only form of labeling * - * + ); }; @@ -65,6 +66,7 @@ Default.args = { keys: false, arrow: true, delay: 150, + describeChild: true, }; export const Placement = () => { diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx index 295c607f0d..36a311738b 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx @@ -9,23 +9,20 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - + } + icon={} /> - + } + icon={} /> - - } - /> + + } /> ); @@ -41,4 +38,5 @@ export const Demo = { export const args = { index: 6, + desc: "For ToggleGroup uten label med Tooltip bør du bruke 'describeChild'-prop på Tooltip.", }; diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx index 893a8816d8..5ee3ea8509 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx @@ -4,8 +4,8 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - - + + + ); +}; + +// EXAMPLES DO NOT INCLUDE CONTENT BELOW THIS LINE +export default withDsExample(Example); + +/* Storybook story */ +export const Demo = { + render: Example, +}; + +export const args = { + index: 4, + desc: "Hvis Tooltip er eneste form for merking, bør du bruke describeChild={false}. Tooltip content blir da satt som 'aria-label' og f.eks knappen vil oppleves likt for hjelpemidler som for seende brukere.", +}; diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx index b1a10e391f..7ac2a48131 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx @@ -4,8 +4,8 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - - ); }; From 35611f0c33fb39a98743164a5ec00bc5beb0f4be Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 08:11:04 +0200 Subject: [PATCH 03/13] memo: Updated story --- .../core/react/src/tooltip/tooltip.stories.tsx | 16 +++------------- 1 file changed, 3 insertions(+), 13 deletions(-) diff --git a/@navikt/core/react/src/tooltip/tooltip.stories.tsx b/@navikt/core/react/src/tooltip/tooltip.stories.tsx index ad0d1d49b6..83623afdf3 100644 --- a/@navikt/core/react/src/tooltip/tooltip.stories.tsx +++ b/@navikt/core/react/src/tooltip/tooltip.stories.tsx @@ -1,8 +1,6 @@ import { Meta } from "@storybook/react"; import React from "react"; -import { Alert } from "../alert"; import { Button } from "../button"; -import { Search } from "../form/search"; import { VStack } from "../layout/stack"; import Tooltip from "./Tooltip"; @@ -33,17 +31,9 @@ export default { } satisfies Meta; export const Demo = () => ( -
- - test - - - - - - - -
+ + + ); export const Default = (props) => { From d5e2a94a3f44a28b39691e400293f1470e4eba24 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 08:11:54 +0200 Subject: [PATCH 04/13] memo: changeset --- .changeset/little-files-cough.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/little-files-cough.md diff --git a/.changeset/little-files-cough.md b/.changeset/little-files-cough.md new file mode 100644 index 0000000000..63810629d9 --- /dev/null +++ b/.changeset/little-files-cough.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": minor +--- + +Tooltip: New prop 'desribeChild' to better handle elements with no visible labels. From 7f4265230fc0f42bd81fbf261bc816aca1bc2fa7 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 08:40:35 +0200 Subject: [PATCH 05/13] bug: Better error logging for example-parsing --- .../website/pages/eksempler/tooltip/labeling.tsx | 2 +- .../scripts/update-examples/parts/extract-args.ts | 13 +++++-------- .../update-examples/parts/extract-metadata.ts | 6 +++++- 3 files changed, 11 insertions(+), 10 deletions(-) diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx index 30559222e6..9eeb604e74 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx @@ -25,5 +25,5 @@ export const Demo = { export const args = { index: 4, - desc: "Hvis Tooltip er eneste form for merking, bør du bruke describeChild={false}. Tooltip content blir da satt som 'aria-label' og f.eks knappen vil oppleves likt for hjelpemidler som for seende brukere.", + desc: "Hvis Tooltip er eneste form for merking, bør du bruke describeChild satt til 'false'. Tooltip content blir da satt som 'aria-label' og f.eks knappen vil oppleves likt for hjelpemidler som for seende brukere.", }; diff --git a/aksel.nav.no/website/scripts/update-examples/parts/extract-args.ts b/aksel.nav.no/website/scripts/update-examples/parts/extract-args.ts index e72723cc71..7939ebe523 100644 --- a/aksel.nav.no/website/scripts/update-examples/parts/extract-args.ts +++ b/aksel.nav.no/website/scripts/update-examples/parts/extract-args.ts @@ -16,13 +16,10 @@ export function extractArgs( return {}; } - const parsedArgs = JSON5.parse(`{${args}}`); - - if (!parsedArgs) { - env !== "test" && - console.warn(`Unable to parse args for example/template: ${fileName}`); - return {}; + try { + return JSON5.parse(`{${args}}`); + } catch (e) { + console.warn(`Unable to parse args for example/template: ${fileName}`); + throw e; } - - return parsedArgs; } diff --git a/aksel.nav.no/website/scripts/update-examples/parts/extract-metadata.ts b/aksel.nav.no/website/scripts/update-examples/parts/extract-metadata.ts index a126b890a4..2950e44a30 100644 --- a/aksel.nav.no/website/scripts/update-examples/parts/extract-metadata.ts +++ b/aksel.nav.no/website/scripts/update-examples/parts/extract-metadata.ts @@ -25,5 +25,9 @@ export function extractMetadata( "utf-8", ); - return JSON5.parse(metadata); + try { + return JSON5.parse(metadata); + } catch (e) { + console.error(`Could not parse JSON5 in ${dirName}`); + } } From 80f3bf5ba5a7e3ef78b301cb5c0f735452574537 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 12:46:55 +0200 Subject: [PATCH 06/13] refactor: describeChild -> describesChild --- @navikt/core/react/src/tooltip/Tooltip.tsx | 6 +++--- @navikt/core/react/src/tooltip/tooltip.stories.tsx | 4 ++-- .../website/pages/eksempler/togglegroup/with-tooltip.tsx | 8 ++++---- aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx | 2 +- aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx | 4 ++-- aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx | 2 +- .../website/pages/eksempler/tooltip/placement.tsx | 8 ++++---- .../website/pages/eksempler/tooltip/with-shortcuts.tsx | 2 +- 8 files changed, 18 insertions(+), 18 deletions(-) diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx index 493319b1db..b8138b85ac 100644 --- a/@navikt/core/react/src/tooltip/Tooltip.tsx +++ b/@navikt/core/react/src/tooltip/Tooltip.tsx @@ -87,7 +87,7 @@ export interface TooltipProps extends HTMLAttributes { * Important: This will default to false in future major-versions * @default true */ - describeChild?: boolean; + describesChild?: boolean; } /** @@ -119,7 +119,7 @@ export const Tooltip = forwardRef( id, keys, maxChar = 80, - describeChild = true, + describesChild = true, ...rest }, ref, @@ -192,7 +192,7 @@ export const Tooltip = forwardRef( ); } - const labelProps = describeChild + const labelProps = describesChild ? _open ? { "aria-describedby": ariaId } : { title: content } diff --git a/@navikt/core/react/src/tooltip/tooltip.stories.tsx b/@navikt/core/react/src/tooltip/tooltip.stories.tsx index 83623afdf3..4e9d238eef 100644 --- a/@navikt/core/react/src/tooltip/tooltip.stories.tsx +++ b/@navikt/core/react/src/tooltip/tooltip.stories.tsx @@ -46,7 +46,7 @@ export const Default = (props) => { arrow={props?.arrow} delay={props?.delay} offset={props?.offset} - describeChild={props?.describeChild} + describesChild={props?.describesChild} > @@ -56,7 +56,7 @@ Default.args = { keys: false, arrow: true, delay: 150, - describeChild: true, + describesChild: true, }; export const Placement = () => { diff --git a/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx b/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx index 36a311738b..f7f56f5b7f 100644 --- a/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx +++ b/aksel.nav.no/website/pages/eksempler/togglegroup/with-tooltip.tsx @@ -9,19 +9,19 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - + } /> - + } /> - + } /> @@ -38,5 +38,5 @@ export const Demo = { export const args = { index: 6, - desc: "For ToggleGroup uten label med Tooltip bør du bruke 'describeChild'-prop pü Tooltip.", + desc: "For ToggleGroup uten label med Tooltip bør du bruke 'describesChild'-prop pü Tooltip.", }; diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx index 5ee3ea8509..3b3721a591 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx @@ -4,7 +4,7 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - + - -); - export const Default = (props) => { return ( Date: Wed, 14 Aug 2024 12:59:31 +0200 Subject: [PATCH 08/13] bug: removed extra tabIndex --- @navikt/core/react/src/tooltip/tooltip.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/@navikt/core/react/src/tooltip/tooltip.stories.tsx b/@navikt/core/react/src/tooltip/tooltip.stories.tsx index 072a634faa..5f69106677 100644 --- a/@navikt/core/react/src/tooltip/tooltip.stories.tsx +++ b/@navikt/core/react/src/tooltip/tooltip.stories.tsx @@ -79,7 +79,7 @@ export const Keys = () => { keys={["CMD", "I"]} open={true} > - + ); }; From 1cd5d331bd2136a37f313f7fc49ed5abfb4c83d4 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 14 Aug 2024 13:00:47 +0200 Subject: [PATCH 09/13] memo: Update Tooltip demo description --- aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx index 2e0e06c8db..452fd04224 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx @@ -25,5 +25,5 @@ export const Demo = { export const args = { index: 4, - desc: "Hvis Tooltip er eneste form for merking, bør du bruke describesChild satt til 'false'. Tooltip content blir da satt som 'aria-label' og f.eks knappen vil oppleves likt for hjelpemidler som for seende brukere.", + desc: "Hvis Tooltip er eneste form for tekstlig beskrivelse, bør du sette 'describeChild' til 'false'. Tooltip content blir da satt som 'aria-label' og f.eks. knappen vil oppleves likt for hjelpemidler som for seende brukere.", }; From 2330ac6c247ab0480db8b9111aa4c4afe0e504fc Mon Sep 17 00:00:00 2001 From: Ken <26967723+KenAJoh@users.noreply.github.com> Date: Mon, 26 Aug 2024 13:09:03 +0200 Subject: [PATCH 10/13] Update aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx Co-authored-by: Halvor Haugan <83693529+HalvorHaugan@users.noreply.github.com> --- aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx index 452fd04224..5fd55acdaa 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx @@ -25,5 +25,5 @@ export const Demo = { export const args = { index: 4, - desc: "Hvis Tooltip er eneste form for tekstlig beskrivelse, bør du sette 'describeChild' til 'false'. Tooltip content blir da satt som 'aria-label' og f.eks. knappen vil oppleves likt for hjelpemidler som for seende brukere.", + desc: "Hvis Tooltip er eneste form for tekstlig beskrivelse, bør du sette 'describesChild' til 'false'. Tooltip content blir da satt som 'aria-label' og f.eks. knappen vil oppleves likt for hjelpemidler som for seende brukere.", }; From 7baefae1b5867db3b74c1986962cbfe02592f0ff Mon Sep 17 00:00:00 2001 From: Ken Date: Mon, 26 Aug 2024 14:48:55 +0200 Subject: [PATCH 11/13] refactor: Updated defaultValue for describesChild --- @navikt/core/react/src/tooltip/Tooltip.tsx | 5 ++--- aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx | 2 +- aksel.nav.no/website/pages/eksempler/tooltip/labeling.tsx | 6 +++--- aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx | 2 +- .../website/pages/eksempler/tooltip/placement.tsx | 8 ++++---- .../website/pages/eksempler/tooltip/with-shortcuts.tsx | 2 +- 6 files changed, 12 insertions(+), 13 deletions(-) diff --git a/@navikt/core/react/src/tooltip/Tooltip.tsx b/@navikt/core/react/src/tooltip/Tooltip.tsx index b8138b85ac..27c2643142 100644 --- a/@navikt/core/react/src/tooltip/Tooltip.tsx +++ b/@navikt/core/react/src/tooltip/Tooltip.tsx @@ -84,8 +84,7 @@ export interface TooltipProps extends HTMLAttributes { /** * When false, Tooltip labels the element, and child-elements content will be ignored by screen-readers. * When true, content is added as additional information to the child element. - * Important: This will default to false in future major-versions - * @default true + * @default false */ describesChild?: boolean; } @@ -119,7 +118,7 @@ export const Tooltip = forwardRef( id, keys, maxChar = 80, - describesChild = true, + describesChild = false, ...rest }, ref, diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx index 3b3721a591..409eba9377 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/demo.tsx @@ -4,7 +4,7 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - + @@ -25,5 +25,5 @@ export const Demo = { export const args = { index: 4, - desc: "Hvis Tooltip er eneste form for tekstlig beskrivelse, bør du sette 'describeChild' til 'false'. Tooltip content blir da satt som 'aria-label' og f.eks. knappen vil oppleves likt for hjelpemidler som for seende brukere.", + desc: "Hvis tooltip ikke er eneste form for tekstlig beskrivelse, kan du sette 'describeChild' til 'true'. Tooltip content blir da satt som 'title' (lukket) og 'aria-describedby' (üpen).", }; diff --git a/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx b/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx index 53bee4692e..0f9e1a619a 100644 --- a/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx +++ b/aksel.nav.no/website/pages/eksempler/tooltip/no-arrow.tsx @@ -4,7 +4,7 @@ import { withDsExample } from "@/web/examples/withDsExample"; const Example = () => { return ( - +