From cb91e75cabe0c86900a6be525b7b5767962ecfa1 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Wed, 5 Oct 2022 11:43:40 +1000 Subject: [PATCH 01/14] UnderlineNav accessibility remediations --- docs/content/drafts/UnderlineNav2.mdx | 8 +-- src/UnderlineNav2/UnderlineNav.tsx | 47 ++++++++++++++---- src/UnderlineNav2/UnderlineNavArrowButton.tsx | 49 +++++++++---------- src/UnderlineNav2/UnderlineNavContext.tsx | 2 + src/UnderlineNav2/UnderlineNavItem.tsx | 2 + src/UnderlineNav2/examples.stories.tsx | 26 +++++----- src/UnderlineNav2/styles.ts | 17 ++++++- 7 files changed, 97 insertions(+), 54 deletions(-) diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index 0c13a2431c3..b2b81acaadc 100644 --- a/docs/content/drafts/UnderlineNav2.mdx +++ b/docs/content/drafts/UnderlineNav2.mdx @@ -16,7 +16,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### Simple ```jsx live drafts - + Item 1 Item 2 Item 3 @@ -26,7 +26,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### With Icons ```jsx live drafts - + Code @@ -53,7 +53,7 @@ When overflow occurs, the component first hides icons if present to optimize for #### Items Without Icons ```jsx live drafts - + Code @@ -83,7 +83,7 @@ When overflow occurs, the component first hides icons if present to optimize for If there is still overflow, the component will behave depending on the pointer. ```jsx live drafts - + Code diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index e0c67bbee06..7f8e2df3397 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -21,12 +21,12 @@ import { moreMenuStyles, menuItemStyles } from './styles' -import {LeftArrowButton, RightArrowButton} from './UnderlineNavArrowButton' +import {ArrowButton} from './UnderlineNavArrowButton' import styled from 'styled-components' import {LoadingCounter} from './LoadingCounter' export type UnderlineNavProps = { - label: string + ariaLabel: string as?: React.ElementType align?: 'right' sx?: SxProp @@ -157,7 +157,7 @@ export const UnderlineNav = forwardRef( { as = 'nav', align, - label, + ariaLabel, sx: sxProp = {}, afterSelect, variant = 'default', @@ -225,6 +225,8 @@ export const UnderlineNav = forwardRef( const [selectedLink, setSelectedLink] = useState | undefined>(undefined) + const [focusedLink, setFocusedLink] = useState | null>(null) + // selectedLinkText is needed to be able set the selected menu item as selectedLink. // This is needed because setSelectedLink only accepts ref but at the time of setting selected menu item as selectedLink, its ref as a list item is not available const [selectedLinkText, setSelectedLinkText] = useState('') @@ -311,14 +313,28 @@ export const UnderlineNav = forwardRef( return () => listEl?.removeEventListener('scroll', scrollOnList) }, [scrollOnList]) - useEffect(() => { - // scroll the selected link into the view (coarse pointer behaviour) - if (isCoarsePointer && selectedLink?.current && listRef.current) { - scrollIntoView(selectedLink.current, listRef.current, underlineNavScrollMargins) + function scrollLinkIntoView(link: RefObject) { + if (link.current && listRef.current) { + scrollIntoView(link.current, listRef.current, underlineNavScrollMargins) return } + } + + useEffect(() => { + // scroll the selected link into the view (coarse pointer behaviour) + selectedLink?.current && isCoarsePointer && scrollLinkIntoView(selectedLink) }, [selectedLink, isCoarsePointer]) + useEffect(() => { + // scroll the focused link into the view (coarse pointer behaviour) + focusedLink?.current && isCoarsePointer && scrollLinkIntoView(focusedLink) + }, [focusedLink, isCoarsePointer]) + + if (!ariaLabel) { + // eslint-disable-next-line no-console + console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology') + } + return ( (getNavStyles(theme, {align}), sxProp)} - aria-label={label} + aria-label={ariaLabel} ref={navRef} > {isCoarsePointer && ( - 0} onScrollWithButton={onScrollWithButton} /> + 0} + onScrollWithButton={onScrollWithButton} + ariaLabel={ariaLabel} + /> )} (responsiveProps.overflowStyles, ulStyles)} ref={listRef}> @@ -390,7 +412,12 @@ export const UnderlineNav = forwardRef( {isCoarsePointer && ( - 0} onScrollWithButton={onScrollWithButton} /> + 0} + onScrollWithButton={onScrollWithButton} + ariaLabel={ariaLabel} + /> )} diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index 569545aa656..4d05fccfd07 100644 --- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx +++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx @@ -5,40 +5,39 @@ import {getLeftArrowHiddenBtn, getRightArrowHiddenBtn, getLeftArrowVisibleBtn, g import {OnScrollWithButtonEventType} from './types' import {UnderlineNavContext} from './UnderlineNavContext' -const LeftArrowButton = ({ +const ArrowButton = ({ + type, show, - onScrollWithButton + onScrollWithButton, + ariaLabel = 'navigation' }: { + type: 'left' | 'right' show: boolean onScrollWithButton: OnScrollWithButtonEventType + ariaLabel: string }) => { + const btnRef = React.useRef(null) const {theme} = useContext(UnderlineNavContext) + const direction = type === 'left' ? -1 : 1 + const leftBtnStyle = show ? getLeftArrowVisibleBtn(theme) : getLeftArrowHiddenBtn(theme) + const rightBtnStyle = show ? getRightArrowVisibleBtn(theme) : getRightArrowHiddenBtn(theme) + // re-trigger focus on the button with aria-disabled=true when it becomes hidden to communicate to screen readers that the button is no longer available + React.useEffect(() => { + if (btnRef.current?.getAttribute('aria-disabled') === 'true') { + btnRef.current.focus() + } + }, [show]) return ( ) => onScrollWithButton(e, -1)} - icon={ChevronLeftIcon} - sx={show ? getLeftArrowVisibleBtn(theme) : getLeftArrowHiddenBtn(theme)} + tabIndex={show ? 0 : -1} + ref={btnRef} + aria-label={`Scroll ${ariaLabel} navigation ${type}`} + onClick={(e: React.MouseEvent) => onScrollWithButton(e, direction)} + icon={type === 'left' ? ChevronLeftIcon : ChevronRightIcon} + sx={type === 'left' ? leftBtnStyle : rightBtnStyle} + aria-disabled={!show} /> ) } -const RightArrowButton = ({ - show, - onScrollWithButton -}: { - show: boolean - onScrollWithButton: OnScrollWithButtonEventType -}) => { - const {theme} = useContext(UnderlineNavContext) - return ( - ) => onScrollWithButton(e, 1)} - icon={ChevronRightIcon} - sx={show ? getRightArrowVisibleBtn(theme) : getRightArrowHiddenBtn(theme)} - /> - ) -} - -export {LeftArrowButton, RightArrowButton} +export {ArrowButton} diff --git a/src/UnderlineNav2/UnderlineNavContext.tsx b/src/UnderlineNav2/UnderlineNavContext.tsx index 0e2b79668b2..285810ba36f 100644 --- a/src/UnderlineNav2/UnderlineNavContext.tsx +++ b/src/UnderlineNav2/UnderlineNavContext.tsx @@ -9,6 +9,7 @@ export const UnderlineNavContext = createContext<{ setSelectedLink: (ref: RefObject) => void selectedLinkText: string setSelectedLinkText: React.Dispatch> + setFocusedLink: React.Dispatch | null>> selectEvent: React.MouseEvent | React.KeyboardEvent | null afterSelect?: (event: React.MouseEvent | React.KeyboardEvent) => void variant: 'default' | 'small' @@ -22,6 +23,7 @@ export const UnderlineNavContext = createContext<{ setSelectedLink: () => null, selectedLinkText: '', setSelectedLinkText: () => null, + setFocusedLink: () => null, selectEvent: null, variant: 'default', loadingCounters: false, diff --git a/src/UnderlineNav2/UnderlineNavItem.tsx b/src/UnderlineNav2/UnderlineNavItem.tsx index 45cfbe6132f..4aa9624cfd5 100644 --- a/src/UnderlineNav2/UnderlineNavItem.tsx +++ b/src/UnderlineNav2/UnderlineNavItem.tsx @@ -71,6 +71,7 @@ export const UnderlineNavItem = forwardRef( setSelectedLink, selectedLinkText, setSelectedLinkText, + setFocusedLink, selectEvent, afterSelect, variant, @@ -153,6 +154,7 @@ export const UnderlineNavItem = forwardRef( sx={merge(getLinkStyles(theme, {variant}, selectedLink, ref), sxProp as SxProp)} {...props} ref={ref} + onFocus={() => setFocusedLink(ref as RefObject)} > {iconsVisible && Icon && ( diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx index 3ff81d87935..d91629ed703 100644 --- a/src/UnderlineNav2/examples.stories.tsx +++ b/src/UnderlineNav2/examples.stories.tsx @@ -31,19 +31,19 @@ export default { ] } as Meta -export const DefaultNav = (args: UnderlineNavProps) => { +export const DefaultNav = () => { return ( - - Item 1 - Item 2 - Item 3 + + Code + Issues + Pull Requests ) } -export const withIcons = (args: UnderlineNavProps) => { +export const withIcons = () => { return ( - + Code Issues @@ -59,9 +59,9 @@ export const withIcons = (args: UnderlineNavProps) => { ) } -export const withCounterLabels = (args: UnderlineNavProps) => { +export const withCounterLabels = () => { return ( - + Code @@ -84,11 +84,11 @@ const items: {navigation: string; icon: React.FC; counter?: number}[] {navigation: 'Security', icon: ShieldLockIcon} ] -export const InternalResponsiveNav = (args: UnderlineNavProps) => { +export const InternalResponsiveNav = () => { const [selectedIndex, setSelectedIndex] = React.useState(1) return ( - + {items.map((item, index) => ( { ) } -export const CountersLoadingState = (args: UnderlineNavProps) => { +export const CountersLoadingState = () => { const [selectedIndex, setSelectedIndex] = React.useState(1) return ( - + {items.map((item, index) => ( ({ opacity: 0, top: 0, bottom: 0, - left: 0 + left: 0, + /* This is intentionally set to prevent any visual focus ring from showing up + * when a hidden element gets focus just to trigger assistive technology to reread */ + '&[aria-disabled="true"]:focus': { + outline: 'none' + } }) export const getRightArrowHiddenBtn = (theme?: Theme) => ({ @@ -100,7 +105,10 @@ export const getRightArrowHiddenBtn = (theme?: Theme) => ({ opacity: 0, top: 0, bottom: 0, - right: 0 + right: 0, + '&[aria-disabled="true"]:focus': { + outline: 'none' + } }) export const getLeftArrowVisibleBtn = (theme?: Theme) => ({ @@ -189,6 +197,11 @@ export const getLinkStyles = ( bg: selectedLink === ref ? theme?.colors.primer.border.active : 'transparent', borderRadius: 0, transform: 'translate(50%, -50%)' + }, + '@media (forced-colors: active)': { + '::after': { + bg: selectedLink === ref ? 'LinkText' : 'transparent' + } } }) From 12894c6f898ccb2ad713cc41d684e5decd435621 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Wed, 5 Oct 2022 12:09:51 +1000 Subject: [PATCH 02/14] update tests --- src/UnderlineNav2/UnderlineNav.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/UnderlineNav2/UnderlineNav.test.tsx b/src/UnderlineNav2/UnderlineNav.test.tsx index b85c47bf633..6e725589646 100644 --- a/src/UnderlineNav2/UnderlineNav.test.tsx +++ b/src/UnderlineNav2/UnderlineNav.test.tsx @@ -54,7 +54,7 @@ const ResponsiveUnderlineNav = ({ {navigation: 'Security', icon: ShieldLockIcon} ] return ( - + {items.map(item => ( { it('fires onSelect on click and keypress', async () => { const onSelect = jest.fn() const {getByText} = render( - + Item 1 Item 2 Item 3 From 19f90e2a02280f566a888af1da1784bd4c3309e0 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Wed, 5 Oct 2022 12:58:02 +1000 Subject: [PATCH 03/14] lint and interaction story update --- src/UnderlineNav2/examples.stories.tsx | 4 ++-- src/UnderlineNav2/interactions.stories.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx index d91629ed703..e51d392d64b 100644 --- a/src/UnderlineNav2/examples.stories.tsx +++ b/src/UnderlineNav2/examples.stories.tsx @@ -13,7 +13,7 @@ import { GearIcon } from '@primer/octicons-react' import {Meta} from '@storybook/react' -import {UnderlineNav, UnderlineNavProps} from './index' +import {UnderlineNav} from './index' import {BaseStyles, ThemeProvider} from '..' export default { @@ -54,7 +54,7 @@ export const withIcons = () => { Discussions - Item 1 + Projects ) } diff --git a/src/UnderlineNav2/interactions.stories.tsx b/src/UnderlineNav2/interactions.stories.tsx index d1546d32c9d..0761106ef4c 100644 --- a/src/UnderlineNav2/interactions.stories.tsx +++ b/src/UnderlineNav2/interactions.stories.tsx @@ -25,9 +25,9 @@ export default { // @ts-ignore DefaultNav.play = async ({canvasElement}: {canvasElement: HTMLElement}) => { const canvas = within(canvasElement) - const item = await canvas.getByText('Item 1') + const item = await canvas.getByText('Code') const aElem = await item.closest('a') - const item2 = await canvas.getByText('Item 2') + const item2 = await canvas.getByText('Issues') const aElem2 = await item2.closest('a') userEvent.click(aElem2 as Element) expect(aElem2).toHaveAttribute('aria-current', 'page') From 09bb6b0db216b41d380d5679462656153708f981 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Wed, 5 Oct 2022 13:45:14 +1000 Subject: [PATCH 04/14] ariaLabel optional and add a comment --- src/UnderlineNav2/UnderlineNav.tsx | 9 ++------- src/UnderlineNav2/styles.ts | 1 + 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 7f8e2df3397..580272c6650 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -26,7 +26,7 @@ import styled from 'styled-components' import {LoadingCounter} from './LoadingCounter' export type UnderlineNavProps = { - ariaLabel: string + ariaLabel?: string as?: React.ElementType align?: 'right' sx?: SxProp @@ -157,7 +157,7 @@ export const UnderlineNav = forwardRef( { as = 'nav', align, - ariaLabel, + ariaLabel = 'Navigation', sx: sxProp = {}, afterSelect, variant = 'default', @@ -330,11 +330,6 @@ export const UnderlineNav = forwardRef( focusedLink?.current && isCoarsePointer && scrollLinkIntoView(focusedLink) }, [focusedLink, isCoarsePointer]) - if (!ariaLabel) { - // eslint-disable-next-line no-console - console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology') - } - return ( Date: Wed, 5 Oct 2022 19:05:31 +1000 Subject: [PATCH 05/14] remove conditional tabindex and find a better way to manage focus --- src/UnderlineNav2/UnderlineNavArrowButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index 4d05fccfd07..4dceb56a29e 100644 --- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx +++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx @@ -29,7 +29,6 @@ const ArrowButton = ({ }, [show]) return ( ) => onScrollWithButton(e, direction)} From bd9ed65b309fb75a3a554ad280f9e6c6dad0a2f3 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Thu, 6 Oct 2022 18:56:33 +1000 Subject: [PATCH 06/14] restyle arrow btns and fix focus issue --- src/UnderlineNav2/UnderlineNavArrowButton.tsx | 37 ++++--- src/UnderlineNav2/styles.ts | 100 +++++++----------- 2 files changed, 60 insertions(+), 77 deletions(-) diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index 4dceb56a29e..9f92755d948 100644 --- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx +++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx @@ -1,9 +1,10 @@ import React, {useContext} from 'react' import {IconButton} from '../Button/IconButton' import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react' -import {getLeftArrowHiddenBtn, getRightArrowHiddenBtn, getLeftArrowVisibleBtn, getRightArrowVisibleBtn} from './styles' +import {btnWrapperStyles, getArrowBtnStyles, getArrowHiddenBtn} from './styles' import {OnScrollWithButtonEventType} from './types' import {UnderlineNavContext} from './UnderlineNavContext' +import Box from '../Box' const ArrowButton = ({ type, @@ -16,26 +17,32 @@ const ArrowButton = ({ onScrollWithButton: OnScrollWithButtonEventType ariaLabel: string }) => { - const btnRef = React.useRef(null) + const leftBtnRef = React.useRef(null) + const rightBtnRef = React.useRef(null) const {theme} = useContext(UnderlineNavContext) const direction = type === 'left' ? -1 : 1 - const leftBtnStyle = show ? getLeftArrowVisibleBtn(theme) : getLeftArrowHiddenBtn(theme) - const rightBtnStyle = show ? getRightArrowVisibleBtn(theme) : getRightArrowHiddenBtn(theme) // re-trigger focus on the button with aria-disabled=true when it becomes hidden to communicate to screen readers that the button is no longer available React.useEffect(() => { - if (btnRef.current?.getAttribute('aria-disabled') === 'true') { - btnRef.current.focus() + const currentBtn = type === 'left' ? leftBtnRef.current : rightBtnRef.current + if (currentBtn?.getAttribute('aria-disabled') === 'true') { + currentBtn.focus() + } else { + // eslint-disable-next-line github/no-blur + currentBtn?.blur() } - }, [show]) + }, [show, type]) return ( - ) => onScrollWithButton(e, direction)} - icon={type === 'left' ? ChevronLeftIcon : ChevronRightIcon} - sx={type === 'left' ? leftBtnStyle : rightBtnStyle} - aria-disabled={!show} - /> + + ) => onScrollWithButton(e, direction)} + icon={type === 'left' ? ChevronLeftIcon : ChevronRightIcon} + sx={show ? getArrowBtnStyles(theme, type) : getArrowHiddenBtn(theme, type)} + aria-disabled={!show} + /> + ) } diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts index 603247efe92..325cf7d8611 100644 --- a/src/UnderlineNav2/styles.ts +++ b/src/UnderlineNav2/styles.ts @@ -69,80 +69,56 @@ export const moreBtnStyles = { paddingX: 2 } -export const getArrowBtnStyles = (theme?: Theme) => ({ +export const btnWrapperStyles = (theme?: Theme, direction = 'left', show = false) => ({ + position: 'absolute', + zIndex: 1, + top: 0, + bottom: 0, + left: direction === 'left' ? 0 : 'auto', + right: direction === 'right' ? 0 : 'auto', + display: 'flex', + alignItems: 'center', + background: show + ? `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` + : 'transparent' +}) + +export const getArrowBtnStyles = (theme?: Theme, direction = 'left') => ({ fontWeight: 'normal', boxShadow: 'none', margin: 0, border: 0, - borderRadius: 0, - paddingX: 2, + borderRadius: 2, + paddingX: '6px', paddingY: 0, - background: theme?.colors.canvas.default, - position: 'absolute', + background: 'transparent', + height: '60%', + opacity: 1, transition: 'opacity 250ms ease-out', - zIndex: 1, + '&:hover:not([disabled]), &:focus-visible': { background: theme?.colors.canvas.default + }, + '&:focus:not(:disabled)': { + outline: 0, + boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`, + background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` + }, + // where focus-visible is supported, remove the focus box-shadow + '&:not(:focus-visible)': { + boxShadow: 'none', + background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` + }, + '&:focus-visible:not(:disabled)': { + boxShadow: `inset 0 0 0 2px ${theme?.colors.accent.fg}`, + background: `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` } }) -export const getLeftArrowHiddenBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - opacity: 0, - top: 0, - bottom: 0, - left: 0, - /* This is intentionally set to prevent any visual focus ring from showing up - * when a hidden element gets focus just to trigger assistive technology to reread */ - '&[aria-disabled="true"]:focus': { - outline: 'none' - } -}) - -export const getRightArrowHiddenBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - opacity: 0, - top: 0, - bottom: 0, - right: 0, - '&[aria-disabled="true"]:focus': { - outline: 'none' - } -}) - -export const getLeftArrowVisibleBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - top: 0, - bottom: 0, - left: 0, - '&::after': { - content: '""', - position: 'absolute', - top: 0, - background: `linear-gradient(to left,#fff0,${theme?.colors.canvas.default})`, - height: '100%', - width: '20px', - right: '-15px', - pointerEvents: 'none' - } -}) - -export const getRightArrowVisibleBtn = (theme?: Theme) => ({ - ...getArrowBtnStyles(theme), - top: 0, - bottom: 0, - right: 0, - '&::before': { - position: 'absolute', - top: 0, - background: `linear-gradient(to right,#fff0,${theme?.colors.canvas.default})`, - content: '""', - height: '100%', - width: '20px', - left: '-15px', - pointerEvents: 'none' - } +export const getArrowHiddenBtn = (theme?: Theme, direction = 'left') => ({ + ...getArrowBtnStyles(theme, direction), + opacity: 0 }) export const getLinkStyles = ( From 6864eb0751a850ba30b7e2014cc3b12648cd51c8 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Thu, 6 Oct 2022 22:00:37 +1000 Subject: [PATCH 07/14] add aria-label type --- src/UnderlineNav2/UnderlineNav.test.tsx | 4 ++-- src/UnderlineNav2/UnderlineNav.tsx | 4 ++-- src/UnderlineNav2/examples.stories.tsx | 10 +++++----- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/UnderlineNav2/UnderlineNav.test.tsx b/src/UnderlineNav2/UnderlineNav.test.tsx index 6e725589646..b3345bdc47d 100644 --- a/src/UnderlineNav2/UnderlineNav.test.tsx +++ b/src/UnderlineNav2/UnderlineNav.test.tsx @@ -54,7 +54,7 @@ const ResponsiveUnderlineNav = ({ {navigation: 'Security', icon: ShieldLockIcon} ] return ( - + {items.map(item => ( { it('fires onSelect on click and keypress', async () => { const onSelect = jest.fn() const {getByText} = render( - + Item 1 Item 2 Item 3 diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 580272c6650..c8710d1737f 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -26,7 +26,7 @@ import styled from 'styled-components' import {LoadingCounter} from './LoadingCounter' export type UnderlineNavProps = { - ariaLabel?: string + 'aria-label'?: React.AriaAttributes['aria-label'] as?: React.ElementType align?: 'right' sx?: SxProp @@ -157,7 +157,7 @@ export const UnderlineNav = forwardRef( { as = 'nav', align, - ariaLabel = 'Navigation', + 'aria-label': ariaLabel = 'Navigation', sx: sxProp = {}, afterSelect, variant = 'default', diff --git a/src/UnderlineNav2/examples.stories.tsx b/src/UnderlineNav2/examples.stories.tsx index e51d392d64b..04daa680922 100644 --- a/src/UnderlineNav2/examples.stories.tsx +++ b/src/UnderlineNav2/examples.stories.tsx @@ -33,7 +33,7 @@ export default { export const DefaultNav = () => { return ( - + Code Issues Pull Requests @@ -43,7 +43,7 @@ export const DefaultNav = () => { export const withIcons = () => { return ( - + Code Issues @@ -61,7 +61,7 @@ export const withIcons = () => { export const withCounterLabels = () => { return ( - + Code @@ -88,7 +88,7 @@ export const InternalResponsiveNav = () => { const [selectedIndex, setSelectedIndex] = React.useState(1) return ( - + {items.map((item, index) => ( { const [selectedIndex, setSelectedIndex] = React.useState(1) return ( - + {items.map((item, index) => ( Date: Fri, 7 Oct 2022 11:05:14 +1000 Subject: [PATCH 08/14] aria-label improvements --- docs/content/drafts/UnderlineNav2.mdx | 8 ++++---- src/UnderlineNav2/UnderlineNav.tsx | 11 ++++++++--- src/UnderlineNav2/UnderlineNavArrowButton.tsx | 4 ++-- 3 files changed, 14 insertions(+), 9 deletions(-) diff --git a/docs/content/drafts/UnderlineNav2.mdx b/docs/content/drafts/UnderlineNav2.mdx index b2b81acaadc..745ae4ccfc6 100644 --- a/docs/content/drafts/UnderlineNav2.mdx +++ b/docs/content/drafts/UnderlineNav2.mdx @@ -16,7 +16,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### Simple ```jsx live drafts - + Item 1 Item 2 Item 3 @@ -26,7 +26,7 @@ import {UnderlineNav} from '@primer/react/drafts' ### With Icons ```jsx live drafts - + Code @@ -53,7 +53,7 @@ When overflow occurs, the component first hides icons if present to optimize for #### Items Without Icons ```jsx live drafts - + Code @@ -83,7 +83,7 @@ When overflow occurs, the component first hides icons if present to optimize for If there is still overflow, the component will behave depending on the pointer. ```jsx live drafts - + Code diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index c8710d1737f..17ef73925f4 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -157,7 +157,7 @@ export const UnderlineNav = forwardRef( { as = 'nav', align, - 'aria-label': ariaLabel = 'Navigation', + 'aria-label': ariaLabel, sx: sxProp = {}, afterSelect, variant = 'default', @@ -330,6 +330,11 @@ export const UnderlineNav = forwardRef( focusedLink?.current && isCoarsePointer && scrollLinkIntoView(focusedLink) }, [focusedLink, isCoarsePointer]) + if (!ariaLabel) { + // eslint-disable-next-line no-console + console.warn('Use the `aria-label` prop to provide an accessible label for assistive technology') + } + return ( 0} onScrollWithButton={onScrollWithButton} - ariaLabel={ariaLabel} + aria-label={ariaLabel} /> )} @@ -411,7 +416,7 @@ export const UnderlineNav = forwardRef( type="right" show={scrollValues.scrollRight > 0} onScrollWithButton={onScrollWithButton} - ariaLabel={ariaLabel} + aria-label={ariaLabel} /> )} diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index 9f92755d948..a383035f3ef 100644 --- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx +++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx @@ -10,12 +10,12 @@ const ArrowButton = ({ type, show, onScrollWithButton, - ariaLabel = 'navigation' + 'aria-label': ariaLabel }: { type: 'left' | 'right' show: boolean onScrollWithButton: OnScrollWithButtonEventType - ariaLabel: string + 'aria-label'?: React.AriaAttributes['aria-label'] }) => { const leftBtnRef = React.useRef(null) const rightBtnRef = React.useRef(null) From 8dda6019b068403f1fec0a1042609b74f4455fa7 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Fri, 7 Oct 2022 12:14:34 +1000 Subject: [PATCH 09/14] add changeset --- .changeset/wet-glasses-kneel.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wet-glasses-kneel.md diff --git a/.changeset/wet-glasses-kneel.md b/.changeset/wet-glasses-kneel.md new file mode 100644 index 00000000000..b52a19b2516 --- /dev/null +++ b/.changeset/wet-glasses-kneel.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +UnderlineNav2: Address accessibility feedback and re-style arrow buttons for scroll behaviour From c5c6d0bbb901a24f377c3e59cd1c56f86f70ebc7 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Mon, 10 Oct 2022 11:30:38 +1000 Subject: [PATCH 10/14] arrow button slide in and out behaviour --- src/UnderlineNav2/UnderlineNav.tsx | 3 +++ src/UnderlineNav2/UnderlineNavArrowButton.tsx | 23 ++++++++++++++++--- src/UnderlineNav2/styles.ts | 23 +++++++++---------- 3 files changed, 34 insertions(+), 15 deletions(-) diff --git a/src/UnderlineNav2/UnderlineNav.tsx b/src/UnderlineNav2/UnderlineNav.tsx index 17ef73925f4..5b60b502900 100644 --- a/src/UnderlineNav2/UnderlineNav.tsx +++ b/src/UnderlineNav2/UnderlineNav.tsx @@ -68,6 +68,7 @@ const handleArrowBtnsVisibility = ( const scrollOffsets = {scrollLeft, scrollRight} callback(scrollOffsets) } + const overflowEffect = ( navWidth: number, moreMenuWidth: number, @@ -361,6 +362,7 @@ export const UnderlineNav = forwardRef( > {isCoarsePointer && ( 0} onScrollWithButton={onScrollWithButton} @@ -413,6 +415,7 @@ export const UnderlineNav = forwardRef( {isCoarsePointer && ( 0} onScrollWithButton={onScrollWithButton} diff --git a/src/UnderlineNav2/UnderlineNavArrowButton.tsx b/src/UnderlineNav2/UnderlineNavArrowButton.tsx index a383035f3ef..81d5822d592 100644 --- a/src/UnderlineNav2/UnderlineNavArrowButton.tsx +++ b/src/UnderlineNav2/UnderlineNavArrowButton.tsx @@ -1,17 +1,19 @@ import React, {useContext} from 'react' import {IconButton} from '../Button/IconButton' import {ChevronLeftIcon, ChevronRightIcon} from '@primer/octicons-react' -import {btnWrapperStyles, getArrowBtnStyles, getArrowHiddenBtn} from './styles' +import {btnWrapperStyles, getArrowBtnStyles} from './styles' import {OnScrollWithButtonEventType} from './types' import {UnderlineNavContext} from './UnderlineNavContext' import Box from '../Box' const ArrowButton = ({ + scrollValue, type, show, onScrollWithButton, 'aria-label': ariaLabel }: { + scrollValue: number type: 'left' | 'right' show: boolean onScrollWithButton: OnScrollWithButtonEventType @@ -21,6 +23,8 @@ const ArrowButton = ({ const rightBtnRef = React.useRef(null) const {theme} = useContext(UnderlineNavContext) const direction = type === 'left' ? -1 : 1 + const ARROW_BTN_WIDTH = 44 // Min touch target size is 44px + // re-trigger focus on the button with aria-disabled=true when it becomes hidden to communicate to screen readers that the button is no longer available React.useEffect(() => { const currentBtn = type === 'left' ? leftBtnRef.current : rightBtnRef.current @@ -31,15 +35,28 @@ const ArrowButton = ({ currentBtn?.blur() } }, [show, type]) + + let translateX = 0 + let display = 'flex' + + // Determine the translateX value to transform for the slide in/out effect + if (scrollValue === 0) { + // If the scrollValue is 0, the buttons should be hidden + translateX = ARROW_BTN_WIDTH * direction + // This is mainly needed for the right arrow button. Because hiding translateX value for it is positive (44px) and this positive value was causing button to be visibly overflowed rathan than hiding. + display = 'none' + } else if (scrollValue <= ARROW_BTN_WIDTH) translateX = (ARROW_BTN_WIDTH - scrollValue) * direction + else translateX = 0 + return ( - + ) => onScrollWithButton(e, direction)} icon={type === 'left' ? ChevronLeftIcon : ChevronRightIcon} - sx={show ? getArrowBtnStyles(theme, type) : getArrowHiddenBtn(theme, type)} + sx={getArrowBtnStyles(theme, type)} aria-disabled={!show} /> diff --git a/src/UnderlineNav2/styles.ts b/src/UnderlineNav2/styles.ts index 325cf7d8611..6f3510a24f0 100644 --- a/src/UnderlineNav2/styles.ts +++ b/src/UnderlineNav2/styles.ts @@ -69,18 +69,25 @@ export const moreBtnStyles = { paddingX: 2 } -export const btnWrapperStyles = (theme?: Theme, direction = 'left', show = false) => ({ +export const btnWrapperStyles = ( + theme?: Theme, + direction = 'left', + show = false, + translateX = 0, + display = 'flex' +) => ({ position: 'absolute', zIndex: 1, top: 0, bottom: 0, left: direction === 'left' ? 0 : 'auto', right: direction === 'right' ? 0 : 'auto', - display: 'flex', alignItems: 'center', background: show ? `linear-gradient(to ${direction} ,#fff0, ${theme?.colors.canvas.default} 14px, ${theme?.colors.canvas.default} 100%)` - : 'transparent' + : 'transparent', + transform: `translateX(${translateX}px)`, + display: `${display}` }) export const getArrowBtnStyles = (theme?: Theme, direction = 'left') => ({ @@ -89,14 +96,11 @@ export const getArrowBtnStyles = (theme?: Theme, direction = 'left') => ({ margin: 0, border: 0, borderRadius: 2, - paddingX: '6px', + paddingX: '14px', paddingY: 0, background: 'transparent', height: '60%', - opacity: 1, - transition: 'opacity 250ms ease-out', - '&:hover:not([disabled]), &:focus-visible': { background: theme?.colors.canvas.default }, @@ -116,11 +120,6 @@ export const getArrowBtnStyles = (theme?: Theme, direction = 'left') => ({ } }) -export const getArrowHiddenBtn = (theme?: Theme, direction = 'left') => ({ - ...getArrowBtnStyles(theme, direction), - opacity: 0 -}) - export const getLinkStyles = ( theme?: Theme, props?: Partial>, From 4d7a4a893f23e386eb5aaea95a754047fd1bf9c0 Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Mon, 10 Oct 2022 12:45:11 +1000 Subject: [PATCH 11/14] bump octicons_react version up --- package-lock.json | 14 +++++++------- package.json | 2 +- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/package-lock.json b/package-lock.json index 47e6c71ed05..b67cef96499 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@primer/behaviors": "^1.1.1", - "@primer/octicons-react": "^17.3.0", + "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.9.0", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", @@ -6366,9 +6366,9 @@ "integrity": "sha512-wvF1PYjyxKNTr6+5w4uR5Gkz53t1fsRDgKjWxDKk7wmlh0cwiILBo4dDFjjVhWRF1mBSjaIxxJGB4WGaP7ct2Q==" }, "node_modules/@primer/octicons-react": { - "version": "17.3.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.3.0.tgz", - "integrity": "sha512-72K4SeDj3WmehiQqVeOS+icvcO5+JHXK12ee3AqbZGqNqgCKdU4zJRKeC7EGMV4lQhoJXbj8OEdppBLa3qFDhw==", + "version": "17.7.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", "engines": { "node": ">=8" }, @@ -46102,9 +46102,9 @@ "integrity": "sha512-wvF1PYjyxKNTr6+5w4uR5Gkz53t1fsRDgKjWxDKk7wmlh0cwiILBo4dDFjjVhWRF1mBSjaIxxJGB4WGaP7ct2Q==" }, "@primer/octicons-react": { - "version": "17.3.0", - "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.3.0.tgz", - "integrity": "sha512-72K4SeDj3WmehiQqVeOS+icvcO5+JHXK12ee3AqbZGqNqgCKdU4zJRKeC7EGMV4lQhoJXbj8OEdppBLa3qFDhw==", + "version": "17.7.0", + "resolved": "https://registry.npmjs.org/@primer/octicons-react/-/octicons-react-17.7.0.tgz", + "integrity": "sha512-rxJiArra+q7lorhzQH223btMcRR8di9TUei9DhQG18jmVEI+wQTY+MypI5FZqU8UyehBOtcnD4TWx+i4Zwpz5Q==", "requires": {} }, "@primer/primitives": { diff --git a/package.json b/package.json index b68750e6e48..125a8d9072e 100644 --- a/package.json +++ b/package.json @@ -82,7 +82,7 @@ "@github/markdown-toolbar-element": "^2.1.0", "@github/paste-markdown": "^1.4.0", "@primer/behaviors": "^1.1.1", - "@primer/octicons-react": "^17.3.0", + "@primer/octicons-react": "^17.7.0", "@primer/primitives": "7.9.0", "@react-aria/ssr": "^3.1.0", "@styled-system/css": "^5.1.5", From 3c5025da38c6e93ebac71f762977e2c46014e4ff Mon Sep 17 00:00:00 2001 From: Armagan Ersoz Date: Tue, 11 Oct 2022 07:32:54 +1000 Subject: [PATCH 12/14] update snapshots --- .../__snapshots__/NavList.test.tsx.snap | 2 + .../__snapshots__/ActionMenu.test.tsx.snap | 12 +- .../__snapshots__/Autocomplete.test.tsx.snap | 13 +- .../__snapshots__/Button.test.tsx.snap | 1 + .../__snapshots__/CircleBadge.test.tsx.snap | 13 +- .../__snapshots__/CircleOcticon.test.tsx.snap | 13 +- .../__snapshots__/Dialog.test.tsx.snap | 13 +- .../__snapshots__/SelectMenu.test.tsx.snap | 52 +- .../__snapshots__/SelectPanel.test.tsx.snap | 12 +- .../__snapshots__/StateLabel.test.tsx.snap | 122 +- .../__snapshots__/StyledOcticon.test.tsx.snap | 13 +- .../__snapshots__/TextInput.test.tsx.snap | 195 +- .../TextInputWithTokens.test.tsx.snap | 2496 +++++++++-------- .../__snapshots__/Token.test.tsx.snap | 260 +- .../ChoiceFieldset.test.tsx.snap | 28 +- .../__snapshots__/DropdownMenu.test.tsx.snap | 12 +- 16 files changed, 1763 insertions(+), 1494 deletions(-) diff --git a/src/NavList/__snapshots__/NavList.test.tsx.snap b/src/NavList/__snapshots__/NavList.test.tsx.snap index 87cfd0798f2..821eadae4c1 100644 --- a/src/NavList/__snapshots__/NavList.test.tsx.snap +++ b/src/NavList/__snapshots__/NavList.test.tsx.snap @@ -1220,6 +1220,7 @@ exports[`NavList.Item with NavList.SubNav does not have active styles if SubNav aria-hidden="true" class="c8" fill="currentColor" + focusable="false" height="16" role="img" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" @@ -1702,6 +1703,7 @@ exports[`NavList.Item with NavList.SubNav has active styles if SubNav contains t aria-hidden="true" class="c8" fill="currentColor" + focusable="false" height="16" role="img" style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;" diff --git a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap index 30a5e138b9e..b326c15a119 100644 --- a/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap +++ b/src/__tests__/__snapshots__/ActionMenu.test.tsx.snap @@ -145,12 +145,8 @@ exports[`ActionMenu renders consistently 1`] = ` diff --git a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap index 6a844ff62e7..5e3bf166f23 100644 --- a/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap +++ b/src/__tests__/__snapshots__/Autocomplete.test.tsx.snap @@ -1266,12 +1266,8 @@ exports[`Autocomplete snapshots renders a menu that contains an item to add to t `; diff --git a/src/__tests__/__snapshots__/Dialog.test.tsx.snap b/src/__tests__/__snapshots__/Dialog.test.tsx.snap index 0e2da84939a..c1ecf2163bf 100644 --- a/src/__tests__/__snapshots__/Dialog.test.tsx.snap +++ b/src/__tests__/__snapshots__/Dialog.test.tsx.snap @@ -152,12 +152,8 @@ exports[`Dialog renders consistently 1`] = ` @@ -706,12 +715,8 @@ exports[`TextInputWithTokens renders a leadingVisual and trailingVisual 1`] = ` `; @@ -1057,12 +1067,8 @@ exports[`TextInputWithTokens renders a truncated set of tokens 1`] = ` @@ -2338,12 +2358,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 1`] = ` @@ -3022,12 +3050,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 2`] = ` @@ -3699,12 +3735,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 3`] = ` @@ -4376,12 +4420,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 4`] = ` @@ -5053,12 +5105,8 @@ exports[`TextInputWithTokens renders tokens at the specified sizes 5`] = ` @@ -5732,12 +5792,8 @@ exports[`TextInputWithTokens renders tokens on a single line when specified 1`] @@ -6809,12 +6877,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -7579,12 +7655,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -8305,12 +8389,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -9017,12 +9109,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -9827,12 +9928,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -10637,12 +10747,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -11470,12 +11589,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -11834,12 +11961,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -12644,12 +12780,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -13410,12 +13555,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -14267,12 +14422,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -15117,12 +15282,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -15967,12 +16142,8 @@ exports[`TextInputWithTokens renders with a loading indicator 1`] = ` @@ -17032,12 +17216,8 @@ exports[`TextInputWithTokens renders with tokens using a custom token component diff --git a/src/__tests__/__snapshots__/Token.test.tsx.snap b/src/__tests__/__snapshots__/Token.test.tsx.snap index e833f881ad0..34f4e562d7d 100644 --- a/src/__tests__/__snapshots__/Token.test.tsx.snap +++ b/src/__tests__/__snapshots__/Token.test.tsx.snap @@ -186,12 +186,8 @@ exports[`Token components AvatarToken renders all sizes 1`] = ` `; @@ -395,12 +396,8 @@ exports[`Token components AvatarToken renders all sizes 2`] = ` `; @@ -604,12 +606,8 @@ exports[`Token components AvatarToken renders all sizes 3`] = ` `; @@ -813,12 +816,8 @@ exports[`Token components AvatarToken renders all sizes 4`] = ` `; @@ -1022,12 +1026,8 @@ exports[`Token components AvatarToken renders all sizes 5`] = ` `; @@ -1442,12 +1447,8 @@ exports[`Token components AvatarToken renders with a remove button 1`] = ` `; @@ -1619,12 +1625,8 @@ exports[`Token components IssueLabelToken renders all sizes 1`] = ` `; @@ -1796,12 +1803,8 @@ exports[`Token components IssueLabelToken renders all sizes 2`] = ` `; @@ -1973,12 +1981,8 @@ exports[`Token components IssueLabelToken renders all sizes 3`] = ` `; @@ -2150,12 +2159,8 @@ exports[`Token components IssueLabelToken renders all sizes 4`] = ` `; @@ -2327,12 +2337,8 @@ exports[`Token components IssueLabelToken renders all sizes 5`] = ` `; @@ -2587,12 +2598,8 @@ exports[`Token components IssueLabelToken renders custom fill color 1`] = ` `; @@ -2764,12 +2776,8 @@ exports[`Token components IssueLabelToken renders default fill color 1`] = ` `; @@ -3055,12 +3068,8 @@ exports[`Token components IssueLabelToken renders with a remove button 1`] = ` `; @@ -3221,12 +3235,8 @@ exports[`Token components Token renders all sizes 1`] = ` `; @@ -3387,12 +3402,8 @@ exports[`Token components Token renders all sizes 2`] = ` `; @@ -3553,12 +3569,8 @@ exports[`Token components Token renders all sizes 3`] = ` `; @@ -3719,12 +3736,8 @@ exports[`Token components Token renders all sizes 4`] = ` `; @@ -3885,12 +3903,8 @@ exports[`Token components Token renders all sizes 5`] = ` `; @@ -4323,12 +4342,8 @@ exports[`Token components Token renders with a remove button 1`] = ` `; diff --git a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap index e9636959eeb..7223e237738 100644 --- a/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap +++ b/src/__tests__/deprecated/__snapshots__/ChoiceFieldset.test.tsx.snap @@ -528,12 +528,8 @@ exports[`ChoiceFieldset renders a list of items with leading visuals and caption