Audit usage of explicit aria-label on Button component implementations

[afercia]

Description

It appears that in some cases some Button components use an explicit aria-label prop to render an aria-label HTML attribute, which in turn determines the icon button tooltip (if it's an icon button). Example:

gutenberg/packages/block-editor/src/components/border-radius-control/linked-button.js

Lines 12 to 21 in 91272a2

	<Tooltip text={ label }>
	<Button
	{ ...props }
	className="component-border-radius-control__linked-button"
	size="small"
	icon={ isLinked ? link : linkOff }
	iconSize={ 24 }
	aria-label={ label }
	/>
	</Tooltip>

This pattern should be audited across the entire codebase as it's not a best practice.

Setting an explicit aria-label signals two possible cases, both less than ideal:

• The aria-label is used in a way that the accessible name mismatches the Button text or tooltip. This is not OK for accessibility.
• The aria-label is just unnecessary, like in the example above. In that case, the wrapping Tooltip component uses the same label variable used for aria-label. In this case, the Tooltip component can be removed and the variable passed to the label prop of the Butotn.

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

• Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

• Yes

[ciampo]

Related to #66021

cc @WordPress/gutenberg-components

[im3dabasia]

Hey @afercia ,

I have studied the issue you described above and found three instances that follow a similar pattern. I have attached my findings below.

Please provide me with feedback on them, and if these need to be fixed, may I open PRs for the same?

gutenberg/packages/block-editor/src/components/spacing-sizes-control/linked-button.js

Lines 12 to 20 in 114aa68

	<Tooltip text={ label }>
	<Button
	{ ...props }
	size="small"
	icon={ isLinked ? link : linkOff }
	iconSize={ 24 }
	aria-label={ label }
	/>
	</Tooltip>

gutenberg/packages/components/src/box-control/linked-button.tsx

Lines 20 to 29 in 114aa68

	<Tooltip text={ label }>
	<Button
	{ ...props }
	className="component-box-control__linked-button"
	size="small"
	icon={ isLinked ? link : linkOff }
	iconSize={ 24 }
	aria-label={ label }
	/>
	</Tooltip>

gutenberg/packages/components/src/border-box-control/border-box-control-linked-button/component.tsx

Lines 28 to 39 in 114aa68

	<Tooltip text={ label }>
	<View className={ className }>
	<Button
	{ ...buttonProps }
	size="small"
	icon={ isLinked ? link : linkOff }
	iconSize={ 24 }
	aria-label={ label }
	ref={ forwardedRef }
	/>
	</View>
	</Tooltip>