From 1c0bfb033ac9d9a5c7134e78b97069dc4898b78b Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 2 Mar 2022 13:20:05 +0000 Subject: [PATCH 1/5] Add aria label based on Navigation post title if present --- packages/block-library/src/navigation/index.php | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 4e79f48b2ff27..1f5f3087a0bdb 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -365,6 +365,8 @@ function render_block_core_navigation( $attributes, $content, $block ) { // a fallback (i.e. the block has no menu associated with it). $is_fallback = false; + $nav_menu_name = ''; + /** * Deprecated: * The rgbTextColor and rgbBackgroundColor attributes @@ -428,6 +430,8 @@ function render_block_core_navigation( $attributes, $content, $block ) { return ''; } + $nav_menu_name = $navigation_post->post_title; + $parsed_blocks = parse_blocks( $navigation_post->post_content ); // 'parse_blocks' includes a null block with '\n\n' as the content when @@ -510,8 +514,9 @@ function render_block_core_navigation( $attributes, $content, $block ) { $wrapper_attributes = get_block_wrapper_attributes( array( - 'class' => implode( ' ', $classes ), - 'style' => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'], + 'class' => implode( ' ', $classes ), + 'style' => $block_styles . $colors['inline_styles'] . $font_sizes['inline_styles'], + 'aria-label' => $nav_menu_name, ) ); From 4fe2c579bbe1d6c7be4ca97e62e7cac6d1b95350 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Wed, 2 Mar 2022 13:32:56 +0000 Subject: [PATCH 2/5] Add e2e test coverage --- .../specs/editor/blocks/navigation.test.js | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/packages/e2e-tests/specs/editor/blocks/navigation.test.js b/packages/e2e-tests/specs/editor/blocks/navigation.test.js index 5a6fdfd7c34c6..375a5dbb77a77 100644 --- a/packages/e2e-tests/specs/editor/blocks/navigation.test.js +++ b/packages/e2e-tests/specs/editor/blocks/navigation.test.js @@ -910,6 +910,35 @@ describe( 'Navigation', () => { } ); } ); + it( 'applies accessible label to block element', async () => { + await createNewPost(); + await insertBlock( 'Navigation' ); + const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH ); + await startEmptyButton.click(); + + const appender = await page.waitForSelector( + '.wp-block-navigation .block-list-appender' + ); + await appender.click(); + + // Add a link to the Link block. + await updateActiveNavigationLink( { + url: 'https://wordpress.org', + label: 'WP', + type: 'url', + } ); + + const previewPage = await openPreviewPage(); + await previewPage.bringToFront(); + await previewPage.waitForNetworkIdle(); + + const isAccessibleLabelPresent = await previewPage.$( + 'nav[aria-label="Navigation"]' + ); + + expect( isAccessibleLabelPresent ).toBeTruthy(); + } ); + it( 'does not load the frontend script if no navigation blocks are present', async () => { await createNewPost(); await insertBlock( 'Paragraph' ); From 4ba0574358a463a876c3cf6de840e8f3c31e0e4c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Fri, 4 Mar 2022 06:44:14 +0000 Subject: [PATCH 3/5] Ensure unique aria label across renders --- packages/block-library/src/navigation/index.php | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 1f5f3087a0bdb..2c8e0ff7a765f 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -361,6 +361,8 @@ function block_core_navigation_get_fallback_blocks() { */ function render_block_core_navigation( $attributes, $content, $block ) { + static $seen_menu_names = array(); + // Flag used to indicate whether the rendered output is considered to be // a fallback (i.e. the block has no menu associated with it). $is_fallback = false; @@ -432,6 +434,12 @@ function render_block_core_navigation( $attributes, $content, $block ) { $nav_menu_name = $navigation_post->post_title; + if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { + $seen_menu_names[ $nav_menu_name ] = $seen_menu_names[ $nav_menu_name ] + 1; + } else { + $seen_menu_names[ $nav_menu_name ] = 1; + } + $parsed_blocks = parse_blocks( $navigation_post->post_content ); // 'parse_blocks' includes a null block with '\n\n' as the content when @@ -512,6 +520,13 @@ function render_block_core_navigation( $attributes, $content, $block ) { $block_styles = isset( $attributes['styles'] ) ? $attributes['styles'] : ''; + // If the menu name has been used previously then append an ID + // to the name to ensure uniqueness across a given post. + if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) { + $count = $seen_menu_names[ $nav_menu_name ]; + $nav_menu_name = $nav_menu_name . ' ' . ( $count - 1 ); + } + $wrapper_attributes = get_block_wrapper_attributes( array( 'class' => implode( ' ', $classes ), From d671630b4a1242b3329edd50054a03ab30a66a1c Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 8 Mar 2022 17:36:23 +0000 Subject: [PATCH 4/5] Simplify increment Co-authored-by: Anton Vlasenko <43744263+anton-vlasenko@users.noreply.github.com> --- packages/block-library/src/navigation/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index 2c8e0ff7a765f..b1a9eacd1c365 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -435,7 +435,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { $nav_menu_name = $navigation_post->post_title; if ( isset( $seen_menu_names[ $nav_menu_name ] ) ) { - $seen_menu_names[ $nav_menu_name ] = $seen_menu_names[ $nav_menu_name ] + 1; + ++$seen_menu_names[ $nav_menu_name ]; } else { $seen_menu_names[ $nav_menu_name ] = 1; } From 2a43c00fca38d7a1d9ebf9198ca7d7bfe6b44b9f Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Fri, 11 Mar 2022 09:30:57 +0000 Subject: [PATCH 5/5] label the second block with a 2 not a 1 --- packages/block-library/src/navigation/index.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index b1a9eacd1c365..fa524bf61703b 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -524,7 +524,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { // to the name to ensure uniqueness across a given post. if ( isset( $seen_menu_names[ $nav_menu_name ] ) && $seen_menu_names[ $nav_menu_name ] > 1 ) { $count = $seen_menu_names[ $nav_menu_name ]; - $nav_menu_name = $nav_menu_name . ' ' . ( $count - 1 ); + $nav_menu_name = $nav_menu_name . ' ' . ( $count ); } $wrapper_attributes = get_block_wrapper_attributes(