[#40656] - [5.0] Module menu improvement
- Closed
- 25 May 2023
- Medium
- Build: 5.0-dev
- Draft PR
- # 40656
- Diff
- joomla:module-menu-improvement
- Success Download Prebuilt packages are available for download. Details
- Failure continuous-integration/drone/push Build is failing Details
- Success continuous-integration/appveyor/branch AppVeyor build succeeded Details
User tests: Successful: Unsuccessful:
Pull Request for Issue # .
Summary of Changes
Over the time, images and icons were added.
The code for images and icons was copied - the contrary of the DRY principle.
It works, but a new accessibility tool brings up a11y issues with alt texts in images and icons:
- In one case the alt attribute is missing completely,
- in an other case the alt attribute is the same as the menu title which not correct.
I would like to fix both issues in one step - the alt attribute and the multiple used code.
This PR did two things:
The whole block for generating the item menu is removed from the 8 sub templates and added to the MenuHelper, where all the other attributes are est.
Testing Instructions
We have 4 menu types
url, separator, component, heading
in "normal" menus and in metismneu overrides.
Inspect HTML-code of your menu Items before and after Patch.
Make sure that all your menuItems don't change their apparance and behaviour.
Actual result BEFORE applying this Pull Request
Alt text for images and icons is missing
If the is displayed for sighted users the alt text is the same as the title
Expected result AFTER applying this Pull Request
Alt text is always empty alt-text.
If the title is not displayed for sighted users, it is displayed as visually-hidden text.
Link to documentations
This is no b/c break. Users who have own overrides for menu modules will get a warning that overrides are not up-to-date.
A docmentation should explain the a11y issue.
Please select:
-
Documentation link for docs.joomla.org:
-
No documentation changes for docs.joomla.org needed
-
Pull Request link for manual.joomla.org:
-
No documentation changes for manual.joomla.org needed
joomla-cms-bot
- | Category | ⇒ | Modules Front End Templates (site) |
| Status | New | ⇒ | Pending |
This is why the PR is a draft. I could move the generation of link type to the default.php.
Reviewing one of my own template overrides I dont think it would be possible to replicate it with this change
$linktype = $item->title;
if ($item->menu_icon) {
// The link is an icon
if ($itemParams->get('menu_text', 1)) {
// If the link text is to be displayed, the icon is added with aria-hidden
$linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span>';
$linktype .= '<span class="d-none d-md-inline toplink">' . $item->title . '</span>';
$linktype .= '<span class="d-sm-block d-md-none bottomlink">' . $item->alias . '</span>';
} else {
// If the icon itself is the link, it needs a visually hidden text
$linktype = '<span class="p-2 ' . $item->menu_icon . '" aria-hidden="true"></span><span class="visually-hidden">' . $item->title . '</span>';
}
} elseif ($item->menu_image) {
// The link is an image, maybe with its own class
$image_attributes = [];
if ($item->menu_image_css) {
$image_attributes['class'] = $item->menu_image_css;
}
$linktype = HTMLHelper::_('image', $item->menu_image, $item->title, $image_attributes);
if ($itemParams->get('menu_text', 1)) {
$linktype .= '<span class="image-title">' . $item->title . '</span>';
}
}
The use of HTMLHelper for HTML fragments is WRONG. Use the LayoutHelper and custom layout(s)
Created a PR on this PR to move the HTML inside the ModuleHelper to it's own JLayout using both existing JLayout for an image as the JLayout for an icon.
bembelimen
- | Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2023-05-25 18:00:39 |
| Closed_By | ⇒ | bembelimen | |
| Labels |
Added:
a11y
PR-5.0-dev
|
||
This is a pretty big change that will impact all templates. In addition it moves a bootstrap class from a layout where it can be overridden to a helper where it cannot.