Skip to content

Commit

Permalink
Fix the shadows Range control accessibility and usability (#63908)
Browse files Browse the repository at this point in the history 
* Use real labels instaed of headings or aria-labels.

* Simplify by removing RangeControl.

* Remove unnecessary HStack and className.

* Remove no longer used hasNegativeRange prop.

Co-authored-by: afercia <[email protected]>
Co-authored-by: t-hamano <[email protected]>
Co-authored-by: jameskoster <[email protected]>
Co-authored-by: richtabor <[email protected]>
  • Loading branch information
@afercia @t-hamano
@jameskoster @richtabor
5 people committed Sep 17, 2024
1 parent 05660fe commit 59595f6
Showing 1 changed file with 7 additions and 62 deletions.
69 changes: 7 additions & 62 deletions packages/edit-site/src/components/global-styles/shadows-edit-panel.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,15 +13,13 @@ import {
__experimentalItemGroup as ItemGroup,
__experimentalInputControl as InputControl,
__experimentalUnitControl as UnitControl,
__experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue,
__experimentalGrid as Grid,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
__experimentalUseNavigator as useNavigator,
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOption as ToggleGroupControlOption,
__experimentalConfirmDialog as ConfirmDialog,
Dropdown,
RangeControl,
Button,
Flex,
FlexItem,
Expand All @@ -35,7 +33,6 @@ import {
plus,
shadow as shadowIcon,
reset,
settings,
moreVertical,
} from '@wordpress/icons';
import { useState, useMemo } from '@wordpress/element';
Expand All @@ -51,7 +48,6 @@ import {
getShadowParts,
shadowStringToObject,
shadowObjectToString,
CUSTOM_VALUE_SETTINGS,
} from './shadow-utils';

const { useGlobalSetting } = unlock( blockEditorPrivateApis );
Expand Down Expand Up @@ -464,13 +460,11 @@ function ShadowPopover( { shadowObj, onChange } ) {
<ShadowInputControl
label={ __( 'X Position' ) }
value={ shadowObj.x }
hasNegativeRange
onChange={ ( value ) => onShadowChange( 'x', value ) }
/>
<ShadowInputControl
label={ __( 'Y Position' ) }
value={ shadowObj.y }
hasNegativeRange
onChange={ ( value ) => onShadowChange( 'y', value ) }
/>
<ShadowInputControl
Expand All @@ -481,75 +475,26 @@ function ShadowPopover( { shadowObj, onChange } ) {
<ShadowInputControl
label={ __( 'Spread' ) }
value={ shadowObj.spread }
hasNegativeRange
onChange={ ( value ) => onShadowChange( 'spread', value ) }
/>
</Grid>
</VStack>
);
}

function ShadowInputControl( { label, value, onChange, hasNegativeRange } ) {
const [ isCustomInput, setIsCustomInput ] = useState( false );
const [ parsedQuantity, parsedUnit ] =
parseQuantityAndUnitFromRawValue( value );

const sliderOnChange = ( next ) => {
onChange(
next !== undefined ? [ next, parsedUnit || 'px' ].join( '' ) : '0px'
);
};
function ShadowInputControl( { label, value, onChange } ) {
const onValueChange = ( next ) => {
const isNumeric = next !== undefined && ! isNaN( parseFloat( next ) );
const nextValue = isNumeric ? next : '0px';
onChange( nextValue );
};

return (
<VStack justify="flex-start">
<HStack justify="space-between">
<Subtitle>{ label }</Subtitle>
<Button
label={ __( 'Use custom size' ) }
icon={ settings }
onClick={ () => {
setIsCustomInput( ! isCustomInput );
} }
isPressed={ isCustomInput }
size="small"
/>
</HStack>
{ isCustomInput ? (
<UnitControl
label={ label }
hideLabelFromVision
__next40pxDefaultSize
value={ value }
onChange={ onValueChange }
/>
) : (
<RangeControl
value={ parsedQuantity ?? 0 }
onChange={ sliderOnChange }
withInputField={ false }
__next40pxDefaultSize
__nextHasNoMarginBottom
min={
hasNegativeRange
? -(
CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]
?.max ?? 10
)
: 0
}
max={
CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.max ?? 10
}
step={
CUSTOM_VALUE_SETTINGS[ parsedUnit ?? 'px' ]?.step ?? 0.1
}
/>
) }
</VStack>
<UnitControl
label={ label }
__next40pxDefaultSize
value={ value }
onChange={ onValueChange }
/>
);
}

1 comment on commit 59595f6

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Flaky tests detected in 59595f6.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/10904537231
📝 Reported issues:

Please sign in to comment.