From d85f4be1f865e1b7c0a2ddbf0ead1d2e4dcfe073 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 25 Jan 2024 01:00:55 +0900 Subject: [PATCH 1/5] Improve tests --- packages/components/src/palette-edit/test/index.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/components/src/palette-edit/test/index.tsx b/packages/components/src/palette-edit/test/index.tsx index b37db91607f8e9..36f2949b3fbd37 100644 --- a/packages/components/src/palette-edit/test/index.tsx +++ b/packages/components/src/palette-edit/test/index.tsx @@ -295,7 +295,7 @@ describe( 'PaletteEdit', () => { name: 'Show details', } ) ); - await click( screen.getByText( 'Primary' ) ); + await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) ); await click( screen.getByRole( 'button', { name: 'Remove color', @@ -328,7 +328,7 @@ describe( 'PaletteEdit', () => { name: 'Show details', } ) ); - await click( screen.getByText( 'Primary' ) ); + await click( screen.getByRole( 'button', { name: 'Edit: Primary' } ) ); const nameInput = screen.getByRole( 'textbox', { name: 'Color name', } ); From 0807e15705245cc521112dc82636e97d15df7c8a Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 25 Jan 2024 01:03:39 +0900 Subject: [PATCH 2/5] Increase colors in story For better visual testing of PaletteItem borders --- packages/components/src/palette-edit/stories/index.story.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/palette-edit/stories/index.story.tsx b/packages/components/src/palette-edit/stories/index.story.tsx index dd2ab92978c923..e78bc04d5b9ec9 100644 --- a/packages/components/src/palette-edit/stories/index.story.tsx +++ b/packages/components/src/palette-edit/stories/index.story.tsx @@ -56,6 +56,7 @@ Default.args = { colors: [ { color: '#1a4548', name: 'Primary', slug: 'primary' }, { color: '#0000ff', name: 'Secondary', slug: 'secondary' }, + { color: '#fb326b', name: 'Tertiary', slug: 'tertiary' }, ], paletteLabel: 'Colors', emptyMessage: 'Colors are empty', From 4d71c11eec2fbe0ba5ffc1cd96ed05d8460cd64f Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 25 Jan 2024 01:21:05 +0900 Subject: [PATCH 3/5] PaletteEdit: Fix palette item accessibility --- .../components/src/palette-edit/index.tsx | 25 ++++--- .../src/palette-edit/{styles.js => styles.ts} | 72 +++++++++++++++---- 2 files changed, 71 insertions(+), 26 deletions(-) rename packages/components/src/palette-edit/{styles.js => styles.ts} (63%) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index 87df1894dc36fc..e19d8d0234dff9 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -198,23 +198,22 @@ function Option< T extends Color | Gradient >( { return ( - - - + { isEditing && ! canOnlyChangeValues ? ( [ 'as' ]; +} ) => { + if ( as === 'button' ) { + return css` + display: flex; + align-items: center; + width: 100%; + appearance: none; + background: transparent; + border: none; + border-radius: 0; + padding: 0; + cursor: pointer; + + &:hover { + color: ${ COLORS.theme.accent }; + } + `; + } + return null; +}; + export const PaletteItem = styled( View )` + ${ buttonStyleReset } + padding-block: 3px; padding-inline-start: ${ space( 3 ) }; border: 1px solid ${ CONFIG.surfaceBorderColor }; border-bottom-color: transparent; - &:first-of-type { - border-top-left-radius: ${ CONFIG.controlBorderRadius }; - border-top-right-radius: ${ CONFIG.controlBorderRadius }; + font-size: ${ font( 'default.fontSize' ) }; + + &:focus-visible { + border-color: transparent; + box-shadow: 0 0 0 var( --wp-admin-border-width-focus ) + var( + --wp-components-color-accent, + var( --wp-admin-theme-color, ${ COLORS.theme.accent } ) + ); + // Windows high contrast mode. + outline: 2px solid transparent; + outline-offset: 0; + } + + border-top-left-radius: ${ CONFIG.controlBorderRadius }; + border-top-right-radius: ${ CONFIG.controlBorderRadius }; + + & + & { + border-top-left-radius: 0; + border-top-right-radius: 0; } - &:last-of-type { + + &:last-child { border-bottom-left-radius: ${ CONFIG.controlBorderRadius }; border-bottom-right-radius: ${ CONFIG.controlBorderRadius }; border-bottom-color: ${ CONFIG.surfaceBorderColor }; } + &.is-selected + & { border-top-color: transparent; } @@ -68,9 +117,6 @@ export const NameContainer = styled.div` margin-right: ${ space( 2 ) }; white-space: nowrap; overflow: hidden; - ${ PaletteItem }:hover & { - color: ${ COLORS.theme.accent }; - } `; export const PaletteHeading = styled( Heading )` From b3c0d36134c4c2e5699a24a0f90c1ef7c55ef148 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 25 Jan 2024 01:58:06 +0900 Subject: [PATCH 4/5] Update changelog --- packages/components/CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 7ad6becdb8aef6..52c40d766956b7 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -17,6 +17,7 @@ - `ToggleGroupControl`: Improve controlled value detection ([#57770](https://github.com/WordPress/gutenberg/pull/57770)). - `Tooltip`: Improve props forwarding to children of nested `Tooltip` components ([#57878](https://github.com/WordPress/gutenberg/pull/57878)). +- `PaletteEdit`: Fix palette item accessibility in details view ([#58214](https://github.com/WordPress/gutenberg/pull/58214)). - `Tooltip`: revert prop types to only accept component-specific props ([#58125](https://github.com/WordPress/gutenberg/pull/58125)). - `Button`: prevent the component from trashing and re-creating the HTML element ([#56490](https://github.com/WordPress/gutenberg/pull/56490)). From 3e560eddc1f6fa75c850a3f12672eb33cbd553a4 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 25 Jan 2024 22:00:50 +0900 Subject: [PATCH 5/5] Add fallbacks for when unnamed --- packages/components/src/palette-edit/index.tsx | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/components/src/palette-edit/index.tsx b/packages/components/src/palette-edit/index.tsx index e19d8d0234dff9..694b7ad9511908 100644 --- a/packages/components/src/palette-edit/index.tsx +++ b/packages/components/src/palette-edit/index.tsx @@ -206,7 +206,7 @@ function Option< T extends Color | Gradient >( { : sprintf( // translators: %s is a color or gradient name, e.g. "Red". __( 'Edit: %s' ), - element.name + element.name.trim().length ? element.name : value ) } ref={ setPopoverAnchor } @@ -234,7 +234,12 @@ function Option< T extends Color | Gradient >( { } /> ) : ( - { element.name } + + { element.name.trim().length + ? element.name + : /* Fall back to non-breaking space to maintain height */ + '\u00A0' } + ) } { isEditing && ! canOnlyChangeValues && (