From df4c7cb764c4ef15977d9c1cd8931207c4dd88b5 Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 30 May 2023 11:53:51 -0400 Subject: [PATCH 1/2] updates NavList documentation for 4-level nesting --- content/components/nav-list.mdx | 4 ++-- content/components/tree-view.mdx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/content/components/nav-list.mdx b/content/components/nav-list.mdx index b86785b36..81cef3457 100644 --- a/content/components/nav-list.mdx +++ b/content/components/nav-list.mdx @@ -124,12 +124,12 @@ Grouping should be used to make long or complex nav lists easier to comprehend. src="https://user-images.githubusercontent.com/2313998/226925617-c5a27545-905f-491e-9059-6389264ab77d.png" /> -Sub-items may be used to render nested navigation structures. Only a single level of nesting is supported. If you need to handle a deeply-nested structure, consider using a [tree view](/components/tree-view). - Sub-items may be collapsed or expanded under a top-level nav list item. The top-level nav list item cannot be a link; it only behaves as a toggle that expands and collapses the sub-items. +Sub-items may be used to render nested navigation structures. Only 4 levels of nesting are supported. If you need to handle a deeply-nested navigation structure, reconsider the design of your navigation or the information hierarchy. A [tree view](/components/tree-view) is never an accessible replacement for navigation, as it serves a different purpose and is not recognized as navigation by assistive technologies. + ## Accessibility Nav lists should always be labeled for assistive technologies, even if the label is visually hidden. diff --git a/content/components/tree-view.mdx b/content/components/tree-view.mdx index 6a7e34b95..3be9aaecc 100644 --- a/content/components/tree-view.mdx +++ b/content/components/tree-view.mdx @@ -237,7 +237,7 @@ If a tree view is truly the best pattern for your use-case and none of the sugge ### Tree views are only for hierarchical lists -A tree view solves a very specific problem. It's not a multi-purpose tool like an [action list](/action-list) or meant for site navigation. +A tree view solves a very specific problem. It's not a multi-purpose tool like an [action list](/action-list) or meant for site navigation like a [nav list](/nav-list). Tree views are used to communicate a hierarchical list of items, and allow a user to navigate through, select, and take action on one or more items. A comparable expereince would be a list of files in a code editor, or an operating system file explorer. While they may visually look like navigation, tree views have specific interaction modes and expectations for assistive technology that differs from other patterns. Trying to use a tree view for something that looks visually apprpriate, but is not functionally inline with its intended use case may cause confusion or an unusable experience, especially if the user cannot see the screen. From 36dc513d8155b6d739e4bca4a04f3a7c747afc2e Mon Sep 17 00:00:00 2001 From: Mike Perrotti Date: Tue, 30 May 2023 11:59:20 -0400 Subject: [PATCH 2/2] rewording and reformating --- content/components/nav-list.mdx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/content/components/nav-list.mdx b/content/components/nav-list.mdx index 81cef3457..248c9da96 100644 --- a/content/components/nav-list.mdx +++ b/content/components/nav-list.mdx @@ -128,7 +128,9 @@ Sub-items may be collapsed or expanded under a top-level nav list item. The top-level nav list item cannot be a link; it only behaves as a toggle that expands and collapses the sub-items. -Sub-items may be used to render nested navigation structures. Only 4 levels of nesting are supported. If you need to handle a deeply-nested navigation structure, reconsider the design of your navigation or the information hierarchy. A [tree view](/components/tree-view) is never an accessible replacement for navigation, as it serves a different purpose and is not recognized as navigation by assistive technologies. +Sub-items may be used to render nested navigation structures. Up to 4 levels of nesting are supported. If you need to handle a more deeply-nested navigation structure, reconsider the design of your navigation or the information hierarchy. + +Do not replace your NavList with a [tree view](/components/tree-view) to support a deeply nested navigation structure. A tree view is never an accessible replacement for navigation, as it serves a different purpose and is not recognized as navigation by assistive technologies. ## Accessibility