Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Accessibility issue with links listing blocks. #(64051) #66866

Open
wants to merge 6 commits into
base: trunk
Choose a base branch
from
+145 −118
Open

Fix: Accessibility issue with links listing blocks. #(64051) #66866

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3afdc39
Fix: Wrap link lists in <nav> for accessibility in listing blocks (#6…
im3dabasia Nov 8, 2024
5228c0c
fix: Remove pagelist block nav changes
im3dabasia Nov 28, 2024
cc36b90
fix: Add props to outer element in categories list and fixed the html…
im3dabasia Nov 28, 2024
bfb32dc
feat: Add aria label textcontrol for tag cloud block in inspector con…
im3dabasia Dec 6, 2024
6d86d71
fix: Default tag cloud name in translation function
im3dabasia Jan 8, 2025
e27d92c
fix: Remove ariaLabel attribute
im3dabasia Feb 5, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -922,7 +922,7 @@ A cloud of popular keywords, each sized by how often it appears. ([Source](https

- **Name:** core/tag-cloud
- **Category:** widgets
- **Supports:** align, interactivity (clientNavigation), spacing (margin, padding), typography (lineHeight), ~~html~~
- **Supports:** align, ariaLabel, interactivity (clientNavigation), spacing (margin, padding), typography (lineHeight), ~~html~~
- **Attributes:** largestFontSize, numberOfTags, showTagCounts, smallestFontSize, taxonomy

## Template Part
Expand Down
10 changes: 6 additions & 4 deletions packages/block-library/src/categories/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,7 +173,7 @@ export default function CategoriesEdit( {

const TagName =
!! categories?.length && ! displayAsDropdown && ! isResolving
? 'ul'
? 'nav'
: 'div';

const classes = clsx( className, {
Expand Down Expand Up @@ -345,9 +345,11 @@ export default function CategoriesEdit( {
) }
{ ! isResolving &&
categories?.length > 0 &&
( displayAsDropdown
? renderCategoryDropdown()
: renderCategoryList() ) }
( displayAsDropdown ? (
renderCategoryDropdown()
) : (
<ul>{ renderCategoryList() }</ul>
) ) }
carolinan marked this conversation as resolved.
Show resolved Hide resolved
</TagName>
);
}
2 changes: 1 addition & 1 deletion packages/block-library/src/categories/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ function render_block_core_categories( $attributes, $content, $block ) {
} else {
$args['show_option_none'] = $taxonomy->labels->no_terms;

$wrapper_markup = '<ul %1$s>%2$s</ul>';
$wrapper_markup = '<nav %1$s><ul>%2$s</ul></nav>';
$items_markup = wp_list_categories( $args );
$type = 'list';

Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/tag-cloud/block.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@
"interactivity": {
"clientNavigation": true
},
"ariaLabel": true,
"__experimentalBorder": {
"radius": true,
"color": true,
Expand Down
242 changes: 131 additions & 111 deletions packages/block-library/src/tag-cloud/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {
__experimentalToolsPanel as ToolsPanel,
__experimentalToolsPanelItem as ToolsPanelItem,
Disabled,
TextControl,
} from '@wordpress/components';
import { useSelect } from '@wordpress/data';
import { __ } from '@wordpress/i18n';
Expand Down Expand Up @@ -53,6 +54,7 @@ function TagCloudEdit( { attributes, setAttributes } ) {
numberOfTags,
smallestFontSize,
largestFontSize,
ariaLabel,
} = attributes;

const [ availableUnits ] = useSettings( 'spacing.units' );
Expand Down Expand Up @@ -123,125 +125,143 @@ function TagCloudEdit( { attributes, setAttributes } ) {
};

const inspectorControls = (
<InspectorControls>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
taxonomy: 'post_tag',
showTagCounts: false,
numberOfTags: 45,
smallestFontSize: '8pt',
largestFontSize: '22pt',
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<ToolsPanelItem
hasValue={ () => taxonomy !== 'post_tag' }
label={ __( 'Taxonomy' ) }
onDeselect={ () =>
setAttributes( { taxonomy: 'post_tag' } )
}
isShownByDefault
>
<SelectControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Taxonomy' ) }
options={ getTaxonomyOptions() }
value={ taxonomy }
onChange={ ( selectedTaxonomy ) =>
setAttributes( { taxonomy: selectedTaxonomy } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () =>
smallestFontSize !== '8pt' || largestFontSize !== '22pt'
}
label={ __( 'Font size' ) }
onDeselect={ () =>
<>
<InspectorControls>
<ToolsPanel
label={ __( 'Settings' ) }
resetAll={ () => {
setAttributes( {
taxonomy: 'post_tag',
showTagCounts: false,
numberOfTags: 45,
smallestFontSize: '8pt',
largestFontSize: '22pt',
} )
}
isShownByDefault
>
<Flex gap={ 4 }>
<FlexItem isBlock>
<UnitControl
label={ __( 'Smallest size' ) }
value={ smallestFontSize }
onChange={ ( value ) => {
onFontSizeChange(
'smallestFontSize',
value
);
} }
units={ units }
min={ MIN_FONT_SIZE }
max={ MAX_FONT_SIZE }
size="__unstable-large"
/>
</FlexItem>
<FlexItem isBlock>
<UnitControl
label={ __( 'Largest size' ) }
value={ largestFontSize }
onChange={ ( value ) => {
onFontSizeChange(
'largestFontSize',
value
);
} }
units={ units }
min={ MIN_FONT_SIZE }
max={ MAX_FONT_SIZE }
size="__unstable-large"
/>
</FlexItem>
</Flex>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => numberOfTags !== 45 }
label={ __( 'Number of tags' ) }
onDeselect={ () => setAttributes( { numberOfTags: 45 } ) }
isShownByDefault
} );
} }
dropdownMenuProps={ dropdownMenuProps }
>
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
<ToolsPanelItem
hasValue={ () => taxonomy !== 'post_tag' }
label={ __( 'Taxonomy' ) }
onDeselect={ () =>
setAttributes( { taxonomy: 'post_tag' } )
}
isShownByDefault
>
<SelectControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Taxonomy' ) }
options={ getTaxonomyOptions() }
value={ taxonomy }
onChange={ ( selectedTaxonomy ) =>
setAttributes( { taxonomy: selectedTaxonomy } )
}
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () =>
smallestFontSize !== '8pt' ||
largestFontSize !== '22pt'
}
label={ __( 'Font size' ) }
onDeselect={ () =>
setAttributes( {
smallestFontSize: '8pt',
largestFontSize: '22pt',
} )
}
isShownByDefault
>
<Flex gap={ 4 }>
<FlexItem isBlock>
<UnitControl
label={ __( 'Smallest size' ) }
value={ smallestFontSize }
onChange={ ( value ) => {
onFontSizeChange(
'smallestFontSize',
value
);
} }
units={ units }
min={ MIN_FONT_SIZE }
max={ MAX_FONT_SIZE }
size="__unstable-large"
/>
</FlexItem>
<FlexItem isBlock>
<UnitControl
label={ __( 'Largest size' ) }
value={ largestFontSize }
onChange={ ( value ) => {
onFontSizeChange(
'largestFontSize',
value
);
} }
units={ units }
min={ MIN_FONT_SIZE }
max={ MAX_FONT_SIZE }
size="__unstable-large"
/>
</FlexItem>
</Flex>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => numberOfTags !== 45 }
label={ __( 'Number of tags' ) }
value={ numberOfTags }
onChange={ ( value ) =>
setAttributes( { numberOfTags: value } )
onDeselect={ () =>
setAttributes( { numberOfTags: 45 } )
}
min={ MIN_TAGS }
max={ MAX_TAGS }
required
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => showTagCounts !== false }
label={ __( 'Show tag counts' ) }
onDeselect={ () =>
setAttributes( { showTagCounts: false } )
}
isShownByDefault
>
<ToggleControl
__nextHasNoMarginBottom
isShownByDefault
>
<RangeControl
__nextHasNoMarginBottom
__next40pxDefaultSize
label={ __( 'Number of tags' ) }
value={ numberOfTags }
onChange={ ( value ) =>
setAttributes( { numberOfTags: value } )
}
min={ MIN_TAGS }
max={ MAX_TAGS }
required
/>
</ToolsPanelItem>
<ToolsPanelItem
hasValue={ () => showTagCounts !== false }
label={ __( 'Show tag counts' ) }
checked={ showTagCounts }
onChange={ () =>
setAttributes( { showTagCounts: ! showTagCounts } )
onDeselect={ () =>
setAttributes( { showTagCounts: false } )
}
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
isShownByDefault
>
<ToggleControl
__nextHasNoMarginBottom
label={ __( 'Show tag counts' ) }
checked={ showTagCounts }
onChange={ () =>
setAttributes( {
showTagCounts: ! showTagCounts,
} )
}
/>
</ToolsPanelItem>
</ToolsPanel>
</InspectorControls>
<InspectorControls group="advanced">
<TextControl
__next40pxDefaultSize
__nextHasNoMarginBottom
label={ __( 'Tag Cloud Name' ) }
Copy link
Contributor

Choose a reason for hiding this comment

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

Suggested change
label={ __( 'Tag Cloud Name' ) }
label={ __( 'Tag cloud name' ) }

value={ ariaLabel || '' }
onChange={ ( value ) => {
setAttributes( { ariaLabel: value } );
} }
/>
</InspectorControls>
</>
);

return (
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/tag-cloud/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@
function render_block_core_tag_cloud( $attributes ) {
$smallest_font_size = $attributes['smallestFontSize'];
$unit = ( preg_match( '/^[0-9.]+(?P<unit>[a-z%]+)$/i', $smallest_font_size, $m ) ? $m['unit'] : 'pt' );
$aria_label = isset( $attributes['ariaLabel'] ) ? $attributes['ariaLabel'] : __( 'Tag Cloud' );

$args = array(
'echo' => false,
Expand All @@ -40,9 +41,12 @@ function render_block_core_tag_cloud( $attributes ) {

$wrapper_attributes = get_block_wrapper_attributes();

$aria_label_attribute = 'aria-label="' . esc_attr( $aria_label ) . '" ';

return sprintf(
'<p %1$s>%2$s</p>',
'<nav %1$s %2$s>%3$s</nav>',
$wrapper_attributes,
$aria_label_attribute,
Comment on lines +47 to +49
Copy link
Contributor

Choose a reason for hiding this comment

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

It should be possible to write it as follows:

$wrapper_attributes = get_block_wrapper_attributes( array( 'aria-label' => $aria_label ) );

return sprintf(
	'<nav %1$s>%2$s</nav>',
	$wrapper_attributes,
	$tag_cloud
);

$tag_cloud
);
}
Expand Down
Loading