Bug 508076 - [Electron app] Back, Forward, and Refresh buttons need tooltips
Summary: [Electron app] Back, Forward, and Refresh buttons need tooltips
Status: RESOLVED FIXED
Alias: None
Product: Orion (Archived)
Classification: ECD
Component: Electron (show other bugs)
Version: unspecified   Edit
Hardware: PC Windows 7
: P3 normal (vote)
Target Milestone: 13.0   Edit
Assignee: XinYi Jiang CLA
QA Contact:
URL:
Whiteboard:
Keywords: accessibility
Depends on:
Blocks:
 
Reported: 2016-11-23 16:23 EST by Carolyn MacLeod CLA
Modified: 2016-11-30 13:02 EST (History)
1 user (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Carolyn MacLeod CLA 2016-11-23 16:23:44 EST
If possible, please do not use the html title attribute - please use the green Orion tooltip. Something like:

define([ ...,
	'i18n!orion/settings/nls/messages', ...
	'orion/webui/tooltip',
	...], function(..., messages, ..., mTooltip, ...) {
...

new mTooltip.Tooltip({
	node: backButtonNode, // or forwardButtonNode or refreshButtonNode
	text: messages.back, // or messages.forward or messages.refresh
	position: ['above', 'right', 'below', 'left'] //$NON-NLS-3$ //$NON-NLS-2$ //$NON-NLS-1$ //$NON-NLS-0$
});

...

(if those buttons are ever destroyed, then need to save and .destroy(); the tooltip when the button is destroyed)
Comment 1 Eclipse Genie CLA 2016-11-24 10:33:53 EST
New Gerrit change created: https://git.eclipse.org/r/85700
Comment 2 XinYi Jiang CLA 2016-11-24 10:36:25 EST
Currently, there's no walk around for the Electron UI code to get access to Orion Client code, so we can not use any of the Orion Client code. The only way to show a green Orion look tooltip is re-implement the same code for Electron UI code, but for now, we stick to "title" attribute.
Comment 3 Carolyn MacLeod CLA 2016-11-24 11:45:50 EST
Ok for now, but if we use title, we need to also do one more thing, because title attribute is not considered to be accessible. So we need to also add an "aria-label" that has the same text as the title attribute.
For example:
   var backLabel = "Back"; // should nls, i.e. messages["back"] or messages.back
   back.title = backLabel;
   back.setAttribute("aria-label", backLabel);

(note that all aria-* attributes need to be set with setAttribute - they cannot be set with dot notation. Someday, that will be fixed, but not today <g>)
Comment 5 Michael Rennie CLA 2016-11-30 13:02:38 EST
I merged the original fix and then added the aria-label attributes with:

http://git.eclipse.org/c/orion/org.eclipse.orion.client.git/commit/?id=8c727978693062a094c07fc21fb64dcc5f07c438