fix: Split `<Item>` labels by smockle · Pull Request #1320 · primer/react

smockle · 2021-06-23T17:37:47Z

Split from #1314

This PR splits <Item> labels (into a label + a description) to decrease verbosity and improve clarity.

Screenshot

No visual change for <Item descriptionVariant={"inline"} />

`main` branch	This PR

No visual change for <Item descriptionVariant={"block"} />

`main` branch	This PR

Improved label for <Item>

`main` branch	This PR

Merge checklist

changeset-bot · 2021-06-23T17:37:50Z

⚠️ No Changeset found

Latest commit: 5002b7b

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2021-06-23T17:37:50Z

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/primer/primer-components/58Pjmuj3wWLKEhq9x8ho4ua1Vap9
✅ Preview: https://primer-components-git-item-label-description-primer.vercel.app

dgreif

Really appreciate you taking the time to dive into each of these components and find accessibility solutions!

…emantic nesting. By “semantic nesting”, I mean that the 'Item' label and description are now siblings, which is preferable to the previous implementation, where the description node was a child of the label node. As a general principle, we should align DOM hierarchies with information hierarchies. An analogy: If I were using a bulleted list to describe a dog, I would not indent its breed as a second-level bullet beneath the bullet for its name, because a dog’s breed is not dependent/derived data from its name. Similarly, description is not dependent/derived from label, and so should not be nested in DOM.

https://www.joshwcomeau.com/css/styled-components/

dgreif

Thanks for all the tweaks, this looks like a solid change and should hopefully make all of our layered components more accessible!

* fix: Separate 'Item' content into 'label' and 'description' * fix: Only add 'aria-describedby' when 'description' exists * fix: Memoize 'id' so 'Item's and labels match * fix: Don’t rely on 'id' which is possibly not globally-unique * fix: Restore semi-full-width 'Item' dividers, without giving up the semantic nesting. By “semantic nesting”, I mean that the 'Item' label and description are now siblings, which is preferable to the previous implementation, where the description node was a child of the label node. As a general principle, we should align DOM hierarchies with information hierarchies. An analogy: If I were using a bulleted list to describe a dog, I would not indent its breed as a second-level bullet beneath the bullet for its name, because a dog’s breed is not dependent/derived data from its name. Similarly, description is not dependent/derived from label, and so should not be nested in DOM. * fix: Reduce styled-components class permutations. https://www.joshwcomeau.com/css/styled-components/

* add utility props to Box * update box docs * export box props * update snapshots * Create green-worms-nail.md * AvatarStack story in storybook * Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis <colebemis@github.com> * Update docs/content/Box.md Co-authored-by: Cole Bemis <colebemis@github.com> * Remove duplicate border system prop definitions * Remove duplicate grid system props definitions * Update FlexProps definition * Remove duplicate position system prop definitions * Update Box documentation * Update BoxProps * Update Box docs * Update Box props * fix: Type 'DropdownButton' as 'button' (#1318) * fix: Type 'DropdownButton' as 'button' * chore: Update snapshots * chore: Set test directory via config rather than flag (#1319) * feat(useFocusZone): update active-descendant on mousemove (#1308) * fix: Split `<Item>` labels (#1320) * fix: Separate 'Item' content into 'label' and 'description' * fix: Only add 'aria-describedby' when 'description' exists * fix: Memoize 'id' so 'Item's and labels match * fix: Don’t rely on 'id' which is possibly not globally-unique * fix: Restore semi-full-width 'Item' dividers, without giving up the semantic nesting. By “semantic nesting”, I mean that the 'Item' label and description are now siblings, which is preferable to the previous implementation, where the description node was a child of the label node. As a general principle, we should align DOM hierarchies with information hierarchies. An analogy: If I were using a bulleted list to describe a dog, I would not indent its breed as a second-level bullet beneath the bullet for its name, because a dog’s breed is not dependent/derived data from its name. Similarly, description is not dependent/derived from label, and so should not be nested in DOM. * fix: Reduce styled-components class permutations. https://www.joshwcomeau.com/css/styled-components/ * feat(Overlay): slide away from anchor based on position (#1322) * feat(Overlay): slide away from anchor based on position * fix: handle position changes when re-opening AnchoredOverlay * refactor: use js animation for slide to fix safari * fix: Tests were failing with Axe violations - https://dequeuniversity.com/rules/axe/4.1/aria-dialog-name - https://dequeuniversity.com/rules/axe/4.2/presentation-role-conflict - https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-links.html First, 'Overlay's aren’t 'listbox'es, because (when used in 'DropdownMenu' or 'ActionMenu') they contain 'menuitem's, 'menuitemradio's, or 'menuitemcheckbox'es. Second, 'Overlay's aren’t 'dialog's, because (as demonstrated in the WAI ARIA practices page linked above), 'menu's need not be contained in a 'dialog', and also (as noted in the 'aria-dialog-name' link above), 'dialog's must have an 'aria-label', 'aria-labelledby', or 'title', but neither 'DropdownMenu' nor 'ActionMenu' have any kind of header element that could be used for this. Third, if 'Overlay's are 'none', they can’t be focusable (as noted in the 'presentation-role-conflict' link above), but one of our hooks (maybe 'FocusTrap', maybe 'FocusZone') was setting 'tabIndex' to '0' (in the test component), because it did not contain a focusable child. This PR adds a focusable button child so the 'none' 'Overlay' container won’t receive 'tabIndex' '0'. * fix: Resolve lint errors Co-authored-by: Clay Miller <clay@smockle.com> * Generate prop documentation (#1323) * Add new filesystem source * Add component metadata type * Create Props component * Update props table * Handle empty and error states * Add required label * Update required prop styles * Clean up code comments * Remove filesystem plugin * Remove extra markdown file * Add component comment Co-authored-by: Clay Miller <clay@smockle.com> * Improve treeshaking by setting package.json sideEffects (#1332) * fix: mark sideEffects free * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: update sideEffects delcaration in package.json to improve treeshaking * fix: BaseStyles doesnt use sideeffects * chore: add changeset * Update Box documentation * Update BoxProps * Update Box docs * Update Box props * Remove AvatarStack story * Update .changeset/green-worms-nail.md Co-authored-by: Cole Bemis <colebemis@github.com> Co-authored-by: Clay Miller <clay@smockle.com> Co-authored-by: Dusty Greif <dgreif@users.noreply.github.com> Co-authored-by: Matthew Costabile <mattcosta7@github.com>

VanAnderson · 2021-07-26T18:36:39Z

-export const TextContainer = styled.div<{
+export const TextContainer = styled.span<{
  dangerouslySetInnerHtml?: React.DOMAttributes<HTMLDivElement>['dangerouslySetInnerHTML']
-  descriptionVariant: ItemProps['descriptionVariant']


This will require an adjustment on the memex side.

smockle added 3 commits June 23, 2021 13:32

fix: Separate 'Item' content into 'label' and 'description'

09970b8

fix: Only add 'aria-describedby' when 'description' exists

0229d93

fix: Memoize 'id' so 'Item's and labels match

f38b828

smockle requested review from VanAnderson, colebemis and dgreif June 23, 2021 17:37

dgreif requested changes Jun 23, 2021

View reviewed changes

Comment thread src/ActionList/Item.tsx Outdated

Comment thread src/ActionList/Item.tsx Outdated

Comment thread src/ActionList/Item.tsx Outdated

Comment thread src/ActionList/Item.tsx Outdated

Comment thread src/ActionList/Item.tsx Outdated

smockle mentioned this pull request Jun 23, 2021

fix: Correct roles and add missing attributes #1314

Closed

6 tasks

vercel Bot temporarily deployed to Preview June 24, 2021 20:34 Inactive

fix: Don’t rely on 'id' which is possibly not globally-unique

254a4a3

smockle force-pushed the item-label-description branch from 65a9b7f to 254a4a3 Compare June 24, 2021 20:35

vercel Bot temporarily deployed to Preview June 24, 2021 20:37 Inactive

vercel Bot temporarily deployed to Preview June 25, 2021 13:23 Inactive

fix: Reduce styled-components class permutations.

73eed06

https://www.joshwcomeau.com/css/styled-components/

vercel Bot temporarily deployed to Preview June 25, 2021 20:22 Inactive

Merge branch 'main' into item-label-description

5002b7b

vercel Bot temporarily deployed to Preview June 25, 2021 20:32 Inactive

smockle requested a review from dgreif June 25, 2021 20:33

dgreif approved these changes Jun 25, 2021

View reviewed changes

dgreif merged commit 726b247 into main Jun 25, 2021

dgreif deleted the item-label-description branch June 25, 2021 21:58

JoseInTheArena added the accessibility label Jun 25, 2021

VanAnderson reviewed Jul 26, 2021

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Split `<Item>` labels#1320

fix: Split `<Item>` labels#1320
dgreif merged 7 commits into
mainfrom
item-label-description

smockle commented Jun 23, 2021

Uh oh!

changeset-bot Bot commented Jun 23, 2021 •

edited

Loading

Uh oh!

vercel Bot commented Jun 23, 2021 •

edited

Loading

Uh oh!

dgreif left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dgreif left a comment

Uh oh!

VanAnderson Jul 26, 2021

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

smockle commented Jun 23, 2021

Screenshot

Merge checklist

Uh oh!

changeset-bot Bot commented Jun 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

vercel Bot commented Jun 23, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dgreif left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dgreif left a comment

Choose a reason for hiding this comment

Uh oh!

VanAnderson Jul 26, 2021

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented Jun 23, 2021 •

edited

Loading

vercel Bot commented Jun 23, 2021 •

edited

Loading