Skip to content

Commit

Permalink
Rename Button describedBy prop to description and deprecate old name. (
Browse files Browse the repository at this point in the history
…#63486)

* Rename Button describedBy prop to description and deprecate old name.

* Update readme.

* Remove leftover and add changelog entry.

* Update one more occurrence of describedBy prop.

* Update one more describedBy occurrence in BlockAlignmentUI native file.

Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: geriux <geriux@git.wordpress.org>
  • Loading branch information
5 people authored Jul 17, 2024
1 parent e4ed959 commit 9ff25d7
Show file tree
Hide file tree
Showing 15 changed files with 36 additions and 26 deletions.
4 changes: 2 additions & 2 deletions packages/block-editor/src/components/alignment-control/ui.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ function AlignmentUI( {
onChange,
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
label = __( 'Align text' ),
describedBy = __( 'Change text alignment' ),
description = __( 'Change text alignment' ),
isCollapsed = true,
isToolbar,
} ) {
Expand All @@ -56,7 +56,7 @@ function AlignmentUI( {
? { isCollapsed }
: {
toggleProps: {
describedBy,
description,
},
popoverProps: POPOVER_PROPS,
};
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ function BlockAlignmentUI( {
} ),
}
: {
toggleProps: { describedBy: __( 'Change alignment' ) },
toggleProps: { description: __( 'Change alignment' ) },
children: ( { onClose } ) => {
return (
<>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ function BlockAlignmentUI( {
};
} ),
popoverProps: POPOVER_PROPS,
toggleProps: { describedBy: __( 'Change alignment' ) },
toggleProps: { description: __( 'Change alignment' ) },
};

return <UIComponent { ...commonProps } { ...extraProps } />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -306,7 +306,7 @@ export const BlockSwitcher = ( { clientIds, disabled, isUsingBindings } ) => {
</>
}
toggleProps={ {
describedBy: blockSwitcherDescription,
description: blockSwitcherDescription,
...toggleProps,
} }
menuProps={ { orientation: 'both' } }
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ const FormatToolbar = () => {
toggleProps.className,
{ 'is-pressed': hasActive }
),
describedBy: __(
description: __(
'Displays more block tools'
),
} }
Expand Down
4 changes: 2 additions & 2 deletions packages/block-library/src/list-item/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -53,14 +53,14 @@ export function IndentUI( { clientId } ) {
<ToolbarButton
icon={ isRTL() ? formatOutdentRTL : formatOutdent }
title={ __( 'Outdent' ) }
describedBy={ __( 'Outdent list item' ) }
description={ __( 'Outdent list item' ) }
disabled={ ! canOutdent }
onClick={ () => outdentListItem() }
/>
<ToolbarButton
icon={ isRTL() ? formatIndentRTL : formatIndent }
title={ __( 'Indent' ) }
describedBy={ __( 'Indent list item' ) }
description={ __( 'Indent list item' ) }
disabled={ ! canIndent }
onClick={ () => indentListItem() }
/>
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/list/edit.js
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ function IndentUI( { clientId } ) {
<ToolbarButton
icon={ isRTL() ? formatOutdentRTL : formatOutdent }
title={ __( 'Outdent' ) }
describedBy={ __( 'Outdent list item' ) }
description={ __( 'Outdent list item' ) }
disabled={ ! canOutdent }
onClick={ outdentList }
/>
Expand Down Expand Up @@ -147,7 +147,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
<ToolbarButton
icon={ isRTL() ? formatListBulletsRTL : formatListBullets }
title={ __( 'Unordered' ) }
describedBy={ __( 'Convert to unordered list' ) }
description={ __( 'Convert to unordered list' ) }
isActive={ ordered === false }
onClick={ () => {
setAttributes( { ordered: false } );
Expand All @@ -156,7 +156,7 @@ export default function Edit( { attributes, setAttributes, clientId, style } ) {
<ToolbarButton
icon={ isRTL() ? formatListNumberedRTL : formatListNumbered }
title={ __( 'Ordered' ) }
describedBy={ __( 'Convert to ordered list' ) }
description={ __( 'Convert to ordered list' ) }
isActive={ ordered === true }
onClick={ () => {
setAttributes( { ordered: true } );
Expand Down
1 change: 1 addition & 0 deletions packages/components/CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@

### Enhancements

- `Button`: Rename Button describedBy prop to description and deprecate old name. ([#63486](https://github.com/WordPress/gutenberg/pull/63486))
- `ToggleGroupControl`: support disabled options ([#63450](https://github.com/WordPress/gutenberg/pull/63450)).
- `CustomSelectControl`: Stabilize `__experimentalShowSelectedHint` and `options[]. __experimentalHint` props ([#63248](https://github.com/WordPress/gutenberg/pull/63248)).

Expand Down
2 changes: 1 addition & 1 deletion packages/components/src/button/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ An optional additional class name to apply to the rendered button.

- Required: No

#### `describedBy`: `string`
#### `description`: `string`

An accessible description for the button.

Expand Down
14 changes: 8 additions & 6 deletions packages/components/src/button/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,7 @@ function useDeprecatedProps( {
isSmall,
size,
variant,
describedBy,
...otherProps
}: ButtonProps & DeprecatedButtonProps ): ButtonProps {
let computedSize = size;
Expand All @@ -48,6 +49,7 @@ function useDeprecatedProps( {
accessibleWhenDisabled: __experimentalIsFocusable,
// @todo Mark `isPressed` as deprecated
'aria-pressed': isPressed,
description: describedBy,
};

if ( isSmall ) {
Expand Down Expand Up @@ -109,7 +111,7 @@ export function UnforwardedButton(
size = 'default',
text,
variant,
describedBy,
description,
...buttonOrAnchorProps
} = useDeprecatedProps( props );

Expand Down Expand Up @@ -208,7 +210,7 @@ export function UnforwardedButton(
// The tooltip is not explicitly disabled.
false !== showTooltip ) );

const descriptionId = describedBy ? instanceId : undefined;
const descriptionId = description ? instanceId : undefined;

const describedById =
additionalProps[ 'aria-describedby' ] || descriptionId;
Expand Down Expand Up @@ -262,8 +264,8 @@ export function UnforwardedButton(
? {
text:
( children as string | ReactElement[] )?.length &&
describedBy
? describedBy
description
? description
: label,
shortcut,
placement:
Expand All @@ -276,9 +278,9 @@ export function UnforwardedButton(
return (
<>
<Tooltip { ...tooltipProps }>{ element }</Tooltip>
{ describedBy && (
{ description && (
<VisuallyHidden>
<span id={ descriptionId }>{ describedBy }</span>
<span id={ descriptionId }>{ description }</span>
</VisuallyHidden>
) }
</>
Expand Down
6 changes: 3 additions & 3 deletions packages/components/src/button/test/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -329,7 +329,7 @@ describe( 'Button', () => {
} );

it( 'should support adding aria-describedby text', () => {
render( <Button describedBy="Description text" /> );
render( <Button description="Description text" /> );
expect(
screen.getByRole( 'button', {
description: 'Description text',
Expand All @@ -342,7 +342,7 @@ describe( 'Button', () => {

render(
<Button
describedBy="Description text"
description="Description text"
label="Label"
icon={ plusCircle }
/>
Expand All @@ -364,7 +364,7 @@ describe( 'Button', () => {
render(
<Button
label="Label"
describedBy="Description text"
description="Description text"
icon={ plusCircle }
showTooltip
>
Expand Down
11 changes: 9 additions & 2 deletions packages/components/src/button/types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -43,9 +43,9 @@ type BaseButtonProps = {
*/
children?: ReactNode;
/**
* An accessible description for the button.
* A visually hidden accessible description for the button.
*/
describedBy?: string;
description?: string;
/**
* If provided, renders an Icon component inside the button.
*/
Expand Down Expand Up @@ -199,6 +199,13 @@ export type DeprecatedButtonProps = {
* @ignore
*/
isSmall?: boolean;
/**
* A visually hidden accessible description for the button.
*
* @deprecated Use the `description` prop instead.
* @ignore
*/
describedBy?: string;
};

export type DeprecatedIconButtonProps = {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -200,7 +200,7 @@ const ToolsPanelHeader = (
menuProps={ { className: dropdownMenuClassName } }
toggleProps={ {
size: 'small',
describedBy: dropdownMenuDescriptionText,
description: dropdownMenuDescriptionText,
} }
>
{ () => (
Expand Down
2 changes: 1 addition & 1 deletion packages/edit-site/src/components/page-patterns/header.js
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export default function PatternsHeader( {
label={ __( 'Actions' ) }
toggleProps={ {
className: 'edit-site-patterns__button',
describedBy: sprintf(
description: sprintf(
/* translators: %s: pattern category name */
__( 'Action menu for %s pattern category' ),
title
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ function PatternOverridesToolbarIndicator( { clientIds } ) {
</>
}
toggleProps={ {
describedBy: blockDescription,
description: blockDescription,
...toggleProps,
} }
menuProps={ {
Expand Down

0 comments on commit 9ff25d7

Please sign in to comment.