Skip to content

Commit

Permalink
Add accessible labelling to submenu buttons. (#36631)
Browse files Browse the repository at this point in the history 
* Add accessible labelling to submenu buttons.

* Make strings translatable.

* Fix php lint error.
  • Loading branch information
@tellthemachines
tellthemachines committed Nov 30, 2021
1 parent b04980c commit f43cfbc
Show file tree
Hide file tree
Showing 2 changed files with 35 additions and 54 deletions.
75 changes: 30 additions & 45 deletions packages/block-library/src/navigation-submenu/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,32 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
'style' => $style_attribute,
)
);
$html = '<li ' . $wrapper_attributes . '>';

$label = '';

if ( isset( $attributes['label'] ) ) {
$label .= wp_kses(
$attributes['label'],
array(
'code' => array(),
'em' => array(),
'img' => array(
'scale' => array(),
'class' => array(),
'style' => array(),
'src' => array(),
'alt' => array(),
),
's' => array(),
'span' => array(
'style' => array(),
),
'strong' => array(),
)
);
}

$html = '<li ' . $wrapper_attributes . '>';

// If Submenus open on hover, we render an anchor tag with attributes.
// If submenu icons are set to show, we also render a submenu button, so the submenu can be opened on click.
Expand Down Expand Up @@ -193,64 +218,24 @@ function render_block_core_navigation_submenu( $attributes, $content, $block ) {
$html .= '>';
// End appending HTML attributes to anchor tag.

if ( isset( $attributes['label'] ) ) {
$html .= wp_kses(
$attributes['label'],
array(
'code' => array(),
'em' => array(),
'img' => array(
'scale' => array(),
'class' => array(),
'style' => array(),
'src' => array(),
'alt' => array(),
),
's' => array(),
'span' => array(
'style' => array(),
),
'strong' => array(),
)
);
}
$html .= $label;

$html .= '</a>';
// End anchor tag content.

if ( $show_submenu_indicators ) {
// The submenu icon is rendered in a button here
// so that there's a clickable elment to open the submenu.
$html .= '<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
$html .= '<button aria-label="' . $label . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">' . block_core_navigation_submenu_render_submenu_icon() . '</button>';
}
} else {
// If menus open on click, we render the parent as a button.
$html .= '<button class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';
$html .= '<button aria-label="' . $label . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation-item__content wp-block-navigation-submenu__toggle" aria-expanded="false">';

// Wrap title with span to isolate it from submenu icon.
$html .= '<span class="wp-block-navigation-item__label">';

if ( isset( $attributes['label'] ) ) {
$html .= wp_kses(
$attributes['label'],
array(
'code' => array(),
'em' => array(),
'img' => array(
'scale' => array(),
'class' => array(),
'style' => array(),
'src' => array(),
'alt' => array(),
),
's' => array(),
'span' => array(
'style' => array(),
),
'strong' => array(),
)
);
}
$html .= $label;

$html .= '</span>';

Expand Down
14 changes: 5 additions & 9 deletions packages/block-library/src/page-list/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -173,24 +173,20 @@ function block_core_page_list_render_nested_page_list( $open_submenus_on_click,
}
}

$title = wp_kses( $page['title'], wp_kses_allowed_html( 'post' ) );

$markup .= '<li class="wp-block-pages-list__item' . $css_class . '"' . $style_attribute . '>';

if ( isset( $page['children'] ) && $is_navigation_child && $open_submenus_on_click ) {
$markup .= '<button class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . wp_kses(
$page['title'],
wp_kses_allowed_html( 'post' )
) . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
$markup .= '<button aria-label="' . $title . ' ' . __( 'submenu', 'gutenberg' ) . '" class="' . $navigation_child_content_class . ' wp-block-navigation-submenu__toggle" aria-expanded="false">' . $title . '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>' .
'</button>';
} else {
$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . wp_kses(
$page['title'],
wp_kses_allowed_html( 'post' )
) . '</a>';
$markup .= '<a class="wp-block-pages-list__item__link' . $navigation_child_content_class . '" href="' . esc_url( $page['link'] ) . '"' . $aria_current . '>' . $title . '</a>';
}

if ( isset( $page['children'] ) ) {
if ( $is_navigation_child && $show_submenu_icons && ! $open_submenus_on_click ) {
$markup .= '<button class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
$markup .= '<button aria-label="' . $title . ' ' . __( 'submenu', 'gutenberg' ) . '" class="wp-block-navigation__submenu-icon wp-block-navigation-submenu__toggle" aria-expanded="false">';
$markup .= '<span class="wp-block-page-list__submenu-icon wp-block-navigation__submenu-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none" role="img" aria-hidden="true" focusable="false"><path d="M1.50002 4L6.00002 8L10.5 4" stroke-width="1.5"></path></svg></span>';
$markup .= '</button>';
}
Expand Down

0 comments on commit f43cfbc

Please sign in to comment.