Focus indication clashes with active tab indication

Problem/Motivation

The current major section of the toolbar is indicated via a difference in contrast. However, Focus is also indicated by the same difference and contrast. Further, the contrast between the inactive unfocused sections and the active and inactive focused sections is insufficient.

For instance, while on /admin/modules, with Local tasks active, I tabbed to Manage.

- Manage and local tasks have the same appearance.
- The contrast between the backgrounds of the inactive unfocused sections (#3E6E9A) and the active and inactive focused sections (#175186) is only 1.52 to 1 where I would expect 3.1.

Steps to reproduce

1. Log in as admin
2. Go to /admin/modules

Expected result: It is clear which submenus are active, whether or not I have low vision.
Actual result: The Local task menus has a lighter background, and there is insufficient contrast to distinguish them from the other menus

3. Tab to Manage

Expected result: The currently active menu item is distinguishable from the focused menu item.
Actual result: Both Manage and List are underlined. It is also not clear that List belongs to the Local task menu and not to the Manage menu.

4. Refresh the page (Command-R on Mac Safari)

Expected result: It is clear which submenu is active, whether or not I have low vision.
Actual result: Both the Manage and Local tasks menus are highlighted, and there is insufficient contrast to distinguish them from the other menus.

Proposed resolution

• Use a different method than underline, such as a border, to indicate either current focus or currently active item.
• Increase contrast between active main menu items and inactive main menu items.

Remaining tasks

User interface changes

API changes

Data model changes