From 85ebf8f904e6e380a0405731a1fb885f841d1f02 Mon Sep 17 00:00:00 2001 From: Marie Lucca <40550942+francinelucca@users.noreply.github.com> Date: Fri, 15 Nov 2024 09:34:28 -0500 Subject: [PATCH] docs(ActionList): add a11y guidance around inline descriptions (#884) * docs(ActionList): add a11y guidance around inline descriptions * docs(ActionList): add details on truncate react implementation --- content/components/action-list.mdx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/content/components/action-list.mdx b/content/components/action-list.mdx index 2f2fbcaf9..d70075f19 100644 --- a/content/components/action-list.mdx +++ b/content/components/action-list.mdx @@ -337,6 +337,12 @@ The tooltip and optional dialog should be triggered by a button element that wra +### Inline descriptions + +All `ActionList.Description` are rendered inline (next to the label) by default. For the cases where the description is too long to fit within one line, the content will wrap to a new line. In some cases, it may be desired to have the description be truncated with an ellipsis. This can be achieved by setting the `truncate` prop on the `ActionList.Description` component. Please note that truncating an inline description is only acceptable if the full, non-truncated text can be seen in a subsequent page or screen. It is at the consumer's discretion to use this feature accessibily. + +Please note the `truncate` option is currently implemented in Primer React only, and is not available in Primer View Components, where the `InlineDescription` will wrap by default. + ### Known accessibility issues (GitHub staff only)