MDL-74800 core: action menu role fix

The action menu could have a role button or menubar depending on the
number of options available.
This commit is contained in:
Jun Pataleta 2022-07-03 16:47:19 +08:00 committed by Ferran Recio
parent dc63d643b8
commit 950d617aec
4 changed files with 20 additions and 3 deletions

View File

@ -4577,6 +4577,12 @@ class action_menu implements renderable, templatable {
*/
public function export_for_template(renderer_base $output) {
$data = new stdClass();
// Assign a role of menubar to this action menu when:
// - it contains 2 or more primary actions; or
// - if it contains a primary action and secondary actions.
if (count($this->primaryactions) > 1 || (!empty($this->primaryactions) && !empty($this->secondaryactions))) {
$this->attributes['role'] = 'menubar';
}
$attributes = $this->attributes;
$attributesprimary = $this->attributesprimary;
$attributessecondary = $this->attributessecondary;
@ -4617,6 +4623,12 @@ class action_menu implements renderable, templatable {
$actionicon = new pix_icon('t/edit_menu', '', 'moodle', $iconattributes);
}
// If the menu trigger is within the menubar, assign a role of menuitem. Otherwise, assign as a button.
$primary->triggerrole = 'button';
if (isset($attributes['role']) && $attributes['role'] === 'menubar') {
$primary->triggerrole = 'menuitem';
}
if ($actionicon instanceof pix_icon) {
$primary->icon = $actionicon->export_for_pix();
if (!empty($actionicon->attributes['alt'])) {

View File

@ -38,7 +38,7 @@
}
}
}}
<div class="action-menu {{classes}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}} role="menu">
<div class="action-menu {{classes}}"{{#attributes}} {{name}}="{{value}}"{{/attributes}}>
{{#primary}}
<div class="{{classes}} d-flex "{{#attributes}} {{name}}="{{value}}"{{/attributes}}>

View File

@ -79,7 +79,7 @@
}
}}
<div class="dropdown{{^secondary.items}} hidden{{/secondary.items}}">
<a href="#" tabindex="0" class="{{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
<a href="#" tabindex="0" class="{{triggerextraclasses}} dropdown-toggle icon-no-margin" id="action-menu-toggle-{{instance}}" aria-label="{{title}}" data-toggle="dropdown" role="{{triggerrole}}" aria-haspopup="true" aria-expanded="false" aria-controls="action-menu-{{instance}}-menu">
{{{actiontext}}}
{{{menutrigger}}}
{{#icon}}

View File

@ -50,7 +50,12 @@ class behat_action_menu extends behat_base {
*/
public function i_open_the_action_menu_in($element, $selectortype) {
// Gets the node based on the requested selector type and locator.
$node = $this->get_node_in_container("css_element", "[role=button][aria-haspopup=true]", $selectortype, $element);
$node = $this->get_node_in_container(
"css_element",
"[role=button][aria-haspopup=true],[role=menuitem][aria-haspopup=true]",
$selectortype,
$element
);
// Check if it is not already opened.
if ($node->getAttribute('aria-expanded') === 'true') {