[ZBX-10901] Visual highlight is missing for some UI elements in focused state Created: 2016 Jun 14  Updated: 2017 May 30  Resolved: 2016 Aug 22

Status: Closed
Project: ZABBIX BUGS AND ISSUES
Component/s: Frontend (F)
Affects Version/s: 3.0.2, 3.0.3
Fix Version/s: 3.0.5rc1, 3.2.0alpha2

Type: Incident report Priority: Minor
Reporter: Pavel Amosov (Inactive) Assignee: Unassigned
Resolution: Fixed Votes: 0
Labels: usability
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File border-in-menu.png     PNG File menu.png     PNG File multiselect.png     PNG File overlay.png     PNG File search.png     PNG File tabs-in-firefox.png    

 Description   

When navigating the front-end with a keyboard, some UI elements that are currently in focus, are not highlighted in any way.

Currently highlighting is absent for:

  • Buttons with "btn-link" class
  • Items in action menu
  • "Action links" that open menu overlays or overlays with tables. Visually look like text with a dotted underline. For example: Monitoring>Triggers, Dashboard>Last 20 issues. These are <span> containers, so no option to navigate using a keyboard in the current implementation. The same issue with [X] icon in overlay windows and treeview


 Comments   
Comment by richlv [ 2016 Jun 14 ]

you might want to list exact pages & elements, otherwise it's very easy to forget

Comment by Pavel Amosov (Inactive) [ 2016 Jul 05 ]

This is not resolved yet:

"Action links" that open menu overlays or overlays with tables. Visually look like text with a dotted underline. For example: Monitoring>Triggers, Dashboard>Last 20 issues. These are <span> containers, so no option to navigate using a keyboard in the current implementation. The same issue with [X] icon in overlay windows and treeview

PavelA Made new styles and replaced [X] icon <span> with a button in r60905
PavelA Made new styles and replaced treeview icon <div> with a button in r60911

Comment by Aleksandrs Saveljevs [ 2016 Jul 20 ]

Design available in development branch svn://svn.zabbix.com/branches/dev/ZBX-10901 .

Comment by Aleksandrs Saveljevs [ 2016 Jul 25 ]

(1) Hovering over a cross in a multiselect seems to be broken:

PavelA RESOLVED in r61216

asaveljevs CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Jul 26 ]

(2) In overlay dialogs, the close button outline goes over the dialog itself. In messages, this leads to the upper and right borders of the outline not being visible when the dialog hides itself:

PavelA RESOLVED in r61229

asaveljevs CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Jul 26 ]

(3) In Firefox, the focused main menu entries (and also the logo) are highlighted as follows:

PavelA This is browser specific style for outlines and shouldn't be changed. But there's a bug in logo outline in FF.

PavelA RESOLVED in r61249

asaveljevs Added that to frontend in r61298. CLOSED.

Comment by Aleksandrs Saveljevs [ 2016 Aug 01 ]

(4) The magnifying glass in IE9 does not look good:

PavelA RESOLVED in r61498

asaveljevs CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 09 ]

Design looks good. Someone should now take a look at changes in frontend code.

Comment by Aleksandrs Saveljevs [ 2016 Aug 09 ]

(5) Not related to this task, but there are double quotes around confirmation messages in screen editing.

asaveljevs RESOLVED in r61514.

asaveljevs In these messages, we may also wish to change "screen-row" and "screen-column" to "screen row" and "screen column" (also in *.po files).

sasha TESTED. Added escaping of html entities in r61586.

asaveljevs Commit r61586 seems to have broken confirmation messages with double quotes, so I have reverted that in r61628. RESOLVED.

sasha Thanks! CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 15 ]

(6) From (5), we should change "screen-row" and "screen-column" to "screen row" and "screen column" (also in *.po files).

asaveljevs RESOLVED in r61638.

sasha CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 15 ]

(7) Removed translation strings:

This screen-row is not empty. Delete it?
This screen-column is not empty. Delete it?

Added translation strings (but translations were preserved, see (6)):

This screen row is not empty. Delete it?
This screen column is not empty. Delete it?

sasha CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 15 ]

(8) We have the following function in js/common.js:

function Confirm(msg) {
	return confirm(msg, 'title');
}

According to https://developer.mozilla.org/en-US/docs/Web/API/Window/confirm , it only accepts one parameter, so it is unclear why the second parameter is needed.

That second parameter appeared in the following commit, but without any explanation:

$ svn log -v -c 2547
------------------------------------------------------------------------
r2547 | osmiy | 2006-01-20 13:51:40 +0200 (Fri, 20 Jan 2006) | 2 lines
Changed paths:
   M /trunk/frontends/php/css.css
   M /trunk/frontends/php/hosts.php
   M /trunk/frontends/php/include/classes/cbutton.inc.php
   A /trunk/frontends/php/include/classes/cspan.inc.php
   M /trunk/frontends/php/include/config.inc.php
   M /trunk/frontends/php/include/forms.inc.php
   M /trunk/frontends/php/include/hosts.inc.php
   M /trunk/frontends/php/include/locales/en_gb.inc.php

 - Frontend improvements (Eugene)

------------------------------------------------------------------------

asaveljevs Removed it in r61640. RESOLVED.

sasha CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 16 ]

Merged in pre-3.0.5rc1 r61660 and r61661, and pre-3.2.0alpha2 (trunk) r61662.

Comment by Aleksandrs Saveljevs [ 2016 Aug 17 ]

(9) Tabs do not look good in Firefox:

PavelA RESOLVED in r61714

asaveljevs CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 17 ]

(10) Let's try to remove border around menu elements in Firefox!

PavelA RESOLVED in r61727

asaveljevs CLOSED

Comment by Aleksandrs Saveljevs [ 2016 Aug 17 ]

Issues (9) and (10) merged in pre-3.0.5rc1 r61728 and pre-3.2.0alpha2 (trunk) r61729.

Generated at Thu Apr 18 07:26:49 EEST 2024 using Jira 9.12.4#9120004-sha1:625303b708afdb767e17cb2838290c41888e9ff0.