[#29929] - [4.0] Cassiopeia dropdown accessible
- Closed
- 4 Jul 2020
- Medium
- Build: 4.0-dev
- Draft PR
- # 29929
- Diff
- astridx:cassiopeia_dropdown_accessible
- Pending Hound Hound is busy sniffing around... Details
User tests: Successful: Unsuccessful:
Draft for #29413.
Summary of Changes
- I added https://github.com/NickDJM/accessible-menu so that the top menu can used as drop down and a11y is fine.
- I also made it possible, that
templates/cassiopeia/js/template.jsis minified viabuild and npm.
There is no styling. (I changed the font color so that you can read the texts.)
Testing Instructions
-
Apply this branch, delete the file
templates/cassiopeia/js/template.min.jsand runnpm ci -
Install
Testing Sample Data
-
Add some Menu Items in different levels to the top menu. If a menu item is drop down you should set it as system link
Actual result BEFORE applying this Pull Request
Drop Down is ignored
Expected result AFTER applying this Pull Request
Documentation Changes Required
Not sure
| Status | New | ⇒ | Pending |
joomla-cms-bot
- | Category | ⇒ | Repository JavaScript Modules Front End NPM Change Templates (site) |
| Labels |
Added:
NPM Resource Changed
?
|
||
@brianteeman Please see NickDJM/accessible-menu#77 (comment)
I have read it and I am personally not convinced in the benefit of adding yet another dependency
If we really call another dependency than I see rather an adobe megamenu more beneficial than that. Thats why I also tend to use BS4 with a proper styling.
I think it is a pity. I found it good because it is bootstrap independent (if you want to get away from it) doesn't use jQuery (adobe megamenu) and you still don't have to reinvent the wheel yourself.
| Status | Pending | ⇒ | Closed |
| Closed_Date | 0000-00-00 00:00:00 | ⇒ | 2020-07-04 06:56:00 |
| Closed_By | ⇒ | astridx |
Wow this is how the project should solve the problems, eg modular. In this case a script without any further dependencies (esp jQuery, that will be included in every page if the menu is based on the Bootstrap js) is the proper way out. Not to mention that this is really accessible (eg has key listeners for all the expected keys not just tab, which works only in non nested menus). I'm really sorry @astridx
Unless I am mistaken cassiopeia is a bootstrap 4 template. BS4 by default has an accessible dropdown menu. The problem is that the markup generated by the menu module has not been updated to that markup.
https://getbootstrap.com/docs/4.4/components/navs/