Search and Top Navigation
#10692 closed bug (fixed)
Opened November 07, 2014 01:40PM UTC
Closed January 21, 2015 05:08PM UTC
Menu: Use consistent styling for focused and "active" items
| Reported by: | jzaefferer | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.12.0 |
| Component: | ui.menu | Version: | 1.11.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
We currently style active parent menu items with "ui-state-active", while everything else gets "ui-state-focus" (or hover, which we style the same as focus). When a menu item in a submenu has focus, the parent menu item gets "ui-state-active", which is inconsistent and confusing.
We probably shouldn't use "ui-state-active" in menu at all.
From this discussion: https://github.com/jquery/jquery-ui/pull/1384#issuecomment-62140254
Attachments (0)
Change History (6)
Changed November 07, 2014 01:42PM UTC by comment:1
| milestone: | none → 1.12.0 |
|---|---|
| priority: | minor → major |
| status: | new → open |
Changed November 07, 2014 03:48PM UTC by comment:2
Somewhat related, the documentation mentions "active item" a lot. Maybe we should apply "ui-state-active" everywhere? If not, maybe we need to change the documentation to use "focus" or "focused" consistently.
Changed January 12, 2015 06:19PM UTC by comment:3
This is what the menu, with the new base theme applied, currently looks like: http://bassistance.de/i/e8f9a2.png
If we were to use ui-state-focus consistently, we'd get this: http://bassistance.de/i/3dac32.png (here the triangle icon switches to white, which looks bad)
If we'd use ui-state-active instead, we'd get this: http://bassistance.de/i/1940f0.png
I prefer the last option. It matches the menus on OSX.
Changed January 12, 2015 09:07PM UTC by comment:4
I brought this up in the #css-chassis channel. After some discussion, the consensus was to use ui-state-active for both parent and child. I'll look into implementing that. Its definitely more than just replacing ui-state-focus with ui-state-active everywhere in menu.js.
Changed January 19, 2015 04:15PM UTC by comment:5
Also discussed this at the weekly meeting last Wednesday, also agreed to use ui-state-active there. Created a PR to implement that: https://github.com/jquery/jquery-ui/pull/1429
Changed January 21, 2015 05:08PM UTC by comment:6
| resolution: | → fixed |
|---|---|
| status: | open → closed |
Menu: Use ui-state-active consistently
So far we were using ui-state-active on active parent items,
ui-state-focus on active child items. The theme update highlighted the
visual inconsistency. With this change, only ui-state-active is used.
Fixes #10692
Changeset: 0bbd1569182bc03e8dc4f5f8aa203e8edbe15f99