Skip to content

Commit

Permalink
Wrap color palette in fieldset with label inside of a legend (#19546)
Browse files Browse the repository at this point in the history 
* Wrapped color palette in fieldset with label inside of a legend

Color palette popovers were not having their label read on screen readers, because they were just a div and span. This commit wrapps the toggle buttons in a fieldset with the label as a legend so it will read the label wwhen the component receives focus.

* Updated snapshot for color-palette component

The markup for the color-palette was changed to add a fieldset and legend, so the snapshot needed to be updated for tests to pass.

* Fixed color button selector paths in e2e tests.

Also updated the snapshots, as I changed the colors to be more obviously changed when watching the tests running in the browser.
  • Loading branch information
@jeryj
jeryj authored Jan 15, 2020
1 parent 83c2ea6 commit c4b2590
Show file tree
Hide file tree
Showing 4 changed files with 135 additions and 128 deletions.
132 changes: 68 additions & 64 deletions packages/block-editor/src/components/color-palette/test/__snapshots__/control.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,83 +7,87 @@ exports[`ColorPaletteControl matches the snapshot 1`] = `
<div
className="components-base-control__field"
>
<span
className="components-base-control__label"
>
Test Color
<span
aria-label="(Color: #f00)"
className="component-color-indicator"
style={
Object {
"background": "#f00",
}
}
/>
</span>
<div
className="components-circular-option-picker"
>
<div
className="components-circular-option-picker__option-wrapper"
>
<button
aria-label="Color: red"
aria-pressed={true}
className="components-button components-circular-option-picker__option is-pressed"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
Object {
"color": "#f00",
}
}
type="button"
/>
<svg
aria-hidden="true"
className="dashicon dashicons-saved"
focusable="false"
height={20}
role="img"
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
<fieldset>
<legend>
<span
className="components-base-control__label"
>
<path
d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
Test Color
<span
aria-label="(Color: #f00)"
className="component-color-indicator"
style={
Object {
"background": "#f00",
}
}
/>
</svg>
</div>
</span>
</legend>
<div
className="components-circular-option-picker__custom-clear-wrapper"
className="components-circular-option-picker"
>
<div
className="components-dropdown components-circular-option-picker__dropdown-link-action"
className="components-circular-option-picker__option-wrapper"
>
<button
aria-expanded={false}
aria-label="Custom color picker"
className="components-button is-link"
aria-label="Color: red"
aria-pressed={true}
className="components-button components-circular-option-picker__option is-pressed"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
onMouseEnter={[Function]}
onMouseLeave={[Function]}
style={
Object {
"color": "#f00",
}
}
type="button"
/>
<svg
aria-hidden="true"
className="dashicon dashicons-saved"
focusable="false"
height={20}
role="img"
viewBox="0 0 20 20"
width={20}
xmlns="http://www.w3.org/2000/svg"
>
Custom Color
</button>
<path
d="M15.3 5.3l-6.8 6.8-2.8-2.8-1.4 1.4 4.2 4.2 8.2-8.2"
/>
</svg>
</div>
<button
className="components-button components-circular-option-picker__clear is-secondary is-small"
onClick={[Function]}
type="button"
<div
className="components-circular-option-picker__custom-clear-wrapper"
>
Clear
</button>
<div
className="components-dropdown components-circular-option-picker__dropdown-link-action"
>
<button
aria-expanded={false}
aria-label="Custom color picker"
className="components-button is-link"
onClick={[Function]}
type="button"
>
Custom Color
</button>
</div>
<button
className="components-button components-circular-option-picker__clear is-secondary is-small"
onClick={[Function]}
type="button"
>
Clear
</button>
</div>
</div>
</div>
</fieldset>
</div>
</div>
`;
112 changes: 58 additions & 54 deletions packages/block-editor/src/components/colors-gradients/control.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,60 +78,64 @@ function ColorGradientControlInner( {
<BaseControl
className={ classnames( 'block-editor-color-gradient-control', className ) }
>
<BaseControl.VisualLabel>
<VisualLabel
currentTab={ currentTab }
label={ label }
colorValue={ colorValue }
gradientValue={ gradientValue }
/>
</BaseControl.VisualLabel>
{ canChooseAColor && canChooseAGradient && (
<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
<Button
isLarge
isPrimary={ currentTab === 'color' }
isSecondary={ currentTab !== 'color' }
onClick={ () => ( setCurrentTab( 'color' ) ) }
>
{ __( 'Solid Color' ) }
</Button>
<Button
isLarge
isPrimary={ currentTab === 'gradient' }
isSecondary={ currentTab !== 'gradient' }
onClick={ () => ( setCurrentTab( 'gradient' ) ) }
>
{ __( 'Gradient' ) }
</Button>
</ButtonGroup>
) }
{ currentTab === 'color' && (
<ColorPalette
value={ colorValue }
onChange={ canChooseAGradient ?
( newColor ) => {
onColorChange( newColor );
onGradientChange();
} :
onColorChange
}
{ ... { colors, disableCustomColors } }
/>
) }
{ currentTab === 'gradient' && (
<GradientPicker
value={ gradientValue }
onChange={ canChooseAColor ?
( newGradient ) => {
onGradientChange( newGradient );
onColorChange();
} :
onGradientChange
}
{ ... { gradients, disableCustomGradients } }
/>
) }
<fieldset>
<legend>
<BaseControl.VisualLabel>
<VisualLabel
currentTab={ currentTab }
label={ label }
colorValue={ colorValue }
gradientValue={ gradientValue }
/>
</BaseControl.VisualLabel>
</legend>
{ canChooseAColor && canChooseAGradient && (
<ButtonGroup className="block-editor-color-gradient-control__button-tabs">
<Button
isLarge
isPrimary={ currentTab === 'color' }
isSecondary={ currentTab !== 'color' }
onClick={ () => ( setCurrentTab( 'color' ) ) }
>
{ __( 'Solid Color' ) }
</Button>
<Button
isLarge
isPrimary={ currentTab === 'gradient' }
isSecondary={ currentTab !== 'gradient' }
onClick={ () => ( setCurrentTab( 'gradient' ) ) }
>
{ __( 'Gradient' ) }
</Button>
</ButtonGroup>
) }
{ currentTab === 'color' && (
<ColorPalette
value={ colorValue }
onChange={ canChooseAGradient ?
( newColor ) => {
onColorChange( newColor );
onGradientChange();
} :
onColorChange
}
{ ... { colors, disableCustomColors } }
/>
) }
{ currentTab === 'gradient' && (
<GradientPicker
value={ gradientValue }
onChange={ canChooseAColor ?
( newGradient ) => {
onGradientChange( newGradient );
onColorChange();
} :
onGradientChange
}
{ ... { gradients, disableCustomGradients } }
/>
) }
</fieldset>
</BaseControl>
);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/e2e-tests/specs/editor/blocks/__snapshots__/heading.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,14 +13,14 @@ exports[`Heading can be created by prefixing number sign and a space 1`] = `
`;

exports[`Heading it should correctly apply custom colors 1`] = `
"<!-- wp:heading {\\"level\\":3,\\"customTextColor\\":\\"#181717\\"} -->
<h3 class=\\"has-text-color\\" style=\\"color:#181717\\">Heading</h3>
"<!-- wp:heading {\\"level\\":3,\\"customTextColor\\":\\"#7700ff\\"} -->
<h3 class=\\"has-text-color\\" style=\\"color:#7700ff\\">Heading</h3>
<!-- /wp:heading -->"
`;
exports[`Heading it should correctly apply named colors 1`] = `
"<!-- wp:heading {\\"textColor\\":\\"very-dark-gray\\"} -->
<h2 class=\\"has-very-dark-gray-color has-text-color\\">Heading</h2>
"<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
<h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>
<!-- /wp:heading -->"
`;
Expand Down
11 changes: 5 additions & 6 deletions packages/e2e-tests/specs/editor/blocks/heading.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,7 @@ import {
} from '@wordpress/e2e-test-utils';

describe( 'Heading', () => {
const TEXT_COLOR_TEXT = 'Text Color';
const CUSTOM_COLOR_TEXT = 'Custom Color';
const TEXT_COLOR_UI_X_SELECTOR = `//div[./span[contains(text(),'${ TEXT_COLOR_TEXT }')]]`;
const CUSTOM_COLOR_BUTTON_X_SELECTOR = `//button[contains(text(),'${ CUSTOM_COLOR_TEXT }')]`;
const COLOR_INPUT_FIELD_SELECTOR = '.components-color-palette__picker .components-text-control__input';
const COLOR_PANEL_TOGGLE_X_SELECTOR = '//button[./span[contains(text(),\'Color Settings\')]]';
Expand Down Expand Up @@ -60,14 +58,15 @@ describe( 'Heading', () => {
await colorPanelToggle.click();

const [ customTextColorButton ] = await page.$x(
`${ TEXT_COLOR_UI_X_SELECTOR }${ CUSTOM_COLOR_BUTTON_X_SELECTOR }`
`${ CUSTOM_COLOR_BUTTON_X_SELECTOR }`
);

await customTextColorButton.click();
await page.click( COLOR_INPUT_FIELD_SELECTOR );
await pressKeyWithModifier( 'primary', 'A' );
await page.keyboard.type( '#181717' );
await page.keyboard.type( '#7700ff' );
await page.click( '[data-type="core/heading"] h3' );
await page.waitForSelector( '.component-color-indicator[aria-label="(Color: #181717)"]' );
await page.waitForSelector( '.component-color-indicator[aria-label="(Color: #7700ff)"]' );
expect( await getEditedPostContent() ).toMatchSnapshot();
} );

Expand All @@ -77,7 +76,7 @@ describe( 'Heading', () => {
const [ colorPanelToggle ] = await page.$x( COLOR_PANEL_TOGGLE_X_SELECTOR );
await colorPanelToggle.click();

const colorButtonSelector = `${ TEXT_COLOR_UI_X_SELECTOR }//button[@aria-label='Color: Very dark gray']`;
const colorButtonSelector = `//button[@aria-label='Color: Luminous vivid orange']`;
const [ colorButton ] = await page.$x( colorButtonSelector );
await colorButton.click();
await page.click( '[data-type="core/heading"] h2' );
Expand Down

0 comments on commit c4b2590

Please sign in to comment.