jens/flipper
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Tooltips added on hover for AX sidebar

Browse Source 
Summary: Adds on hover descriptions for some of the more esoteric properties in the accessibility sidebar panel such as accessibility-focused and all the talkback derived properties. Also change talkback-focusable and talkback-ignored to both be talkback-focusable.

Differential Revision: D9381676

fbshipit-source-id: 55ce854da24241a7c89b0c122c4c3ebd77438dbb
This commit is contained in:
Sara Valderrama
2018-08-20 09:31:39 -07:00
committed by Facebook Github Bot
parent 02cf3a90a2
commit c428de3948
5 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/plugins/layout/index.js
View File

@@ -935,6 +935,27 @@ export default class Layout extends SonarPlugin<InspectorState> {
});
};
// returns object with all sidebar elements that should show more information
// on hover (needs to be kept up-to-date if names of properties change)
getAccessibilityTooltips() {
return {
'accessibility-focused':
'True if this element has the focus of an accessibility service',
'content-description':
'Text to label the content/functionality of this element ',
'important-for-accessibility':
'Marks this element as important to accessibility services, one of AUTO, YES, NO, NO_HIDE_DESCENDANTS',
'talkback-focusable': 'True if Talkback can focus on this element',
'talkback-focusable-reasons': 'Why Talkback can focus on this element',
'talkback-ignored': 'True if Talkback cannot focus on this element',
'talkback-ignored-reasons': 'Why Talkback cannot focus on the element',
'talkback-output':
'What Talkback will say when this element is focused (derived from role, content-description, and state of the element)',
'talkback-hint':
'What Talkback will say after output if hints are enabled',
};
}
renderSidebar = () => {
if (this.state.inAXMode) {
// empty if no element selected w/in AX node tree
@@ -942,6 +963,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
this.state.AXselected && (
<InspectorSidebar
element={this.state.AXelements[this.state.AXselected]}
tooltips={this.getAccessibilityTooltips()}
onValueChanged={this.onDataValueChanged}
client={this.client}
/>
@@ -1001,7 +1023,7 @@ export default class Layout extends SonarPlugin<InspectorState> {
onClick={this.onToggleAccessibility}
role="button"
tabIndex={-1}
title="Toggle accessibility mode within the LayoutInspector">
title="Toggle to see the accessibility hierarchy">
<Glyph
name="accessibility"
size={16}