diff --git a/docs/layout-plugin.md b/docs/layout-plugin.md index 70c8bf5bd..37f46a26f 100644 --- a/docs/layout-plugin.md +++ b/docs/layout-plugin.md @@ -43,6 +43,8 @@ The Layout Inspector not only allows you to view the hierarchy and inspect each Enable target mode by clicking on the crosshairs icon. Now, you can touch any view on the device and Layout Inspector will jump to the correct position within your layout hierarchy. +Tip: Target mode also works with Talkback running. + ### Blocking fullscreen views (Android only) The issue is that if you have some view that occupies big part of the screen but draws nothing and its Z-position is higher than your main content, then selecting view/component through Layout Inspector doesn't work as you intended, as it will always hit that transparent view and you need to manually navigate to the view you need which is time-consuming and should not be necessary. @@ -52,3 +54,12 @@ Add the following tag to your view to skip it from Flipper's view picker. The vi ```java view.setTag("sonar_skip_view_traversal", true); ``` + +## Accessibility mode (Android-only) + +Enable accessibility mode by clicking on the accessibility icon. This shows the accessibility view hierarchy next to the normal hierarchy. In the hierarchy, the currently accessibility-focused view is highlighted in green and any accessibility-focusable elements have a green icon next to their name. The hierarchy's context menu also allows you to focus accessibility services on certain elements. When selecting an element in one hierarchy, the corresponding element in the other will also be highlighted. The hierarchies expand and collapse in sync, and searching through the main hierarchy works in accessibility mode as well. + +When accessibility mode is enabled, the sidebar will show special properties that are used by accessibility services to determine their functionality. This includes things like content-description, clickable, focusable, and long-clickable among others. + +### Talkback +The accessibility mode sidebar also includes a panel with properties derived specifically to show Talkback's interpretation of a view (with logic ported over from Google's Talkback source). While generally accurate, this is not guaranteed to be accurate for all situations. It is always better to turn Talkback on for verification. diff --git a/src/fb-stubs/AXLayoutExtender.js b/src/fb-stubs/AXLayoutExtender.js deleted file mode 100644 index 5394461cd..000000000 --- a/src/fb-stubs/AXLayoutExtender.js +++ /dev/null @@ -1,34 +0,0 @@ -/** - * Copyright 2018-present Facebook. - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * @format - */ - -import {Component} from 'react'; -import type { - Element, - ElementID, - ElementSearchResultSet, - ContextMenuExtension, -} from 'sonar'; - -export class AXElementsInspector extends Component<{ - onElementExpanded: (key: ElementID, deep: boolean) => void, - onElementSelected: (key: ElementID) => void, - onElementHovered: ?(key: ?ElementID) => void, - onValueChanged: ?(path: Array, val: any) => void, - selected: ?ElementID, - focused: ?ElementID, - searchResults?: ?ElementSearchResultSet, - root: ?ElementID, - elements: {[key: ElementID]: Element}, - useAppSidebar?: boolean, - contextMenuExtensions: Array, -}> { - render() { - return null; - } -} - -export const AXToggleButtonEnabled: boolean = false; diff --git a/src/plugins/layout/index.js b/src/plugins/layout/index.js index de88387f5..756766a5b 100644 --- a/src/plugins/layout/index.js +++ b/src/plugins/layout/index.js @@ -28,11 +28,6 @@ import { import type {TrackType} from '../../fb-stubs/Logger.js'; import SidebarExtensions from '../../fb-stubs/LayoutInspectorSidebarExtensions.js'; -import { - AXElementsInspector, - AXToggleButtonEnabled, -} from '../../fb-stubs/AXLayoutExtender.js'; - // $FlowFixMe import debounce from 'lodash.debounce'; @@ -468,7 +463,7 @@ export default class Layout extends SonarPlugin { axEnabled(): boolean { // only visible internally for Android clients - return AXToggleButtonEnabled && this.realClient.query.os === 'Android'; + return this.realClient.query.os === 'Android'; } // expand tree and highlight click-to-inspect node that was found @@ -1083,14 +1078,13 @@ export default class Layout extends SonarPlugin { )} {AXinitialised && inAXMode ? : null} {AXinitialised && inAXMode ? ( - void, onValueChanged: ?(path: Array, val: any) => void, selected: ?ElementID, + focused?: ?ElementID, searchResults?: ?ElementSearchResultSet, root: ?ElementID, elements: {[key: ElementID]: Element}, useAppSidebar?: boolean, alternateRowColor?: boolean, + contextMenuExtensions?: Array, }> { static defaultProps = { alternateRowColor: true, @@ -69,6 +72,7 @@ export default class ElementsInspector extends Component<{ render() { const { selected, + focused, elements, root, onElementExpanded, @@ -76,6 +80,7 @@ export default class ElementsInspector extends Component<{ onElementHovered, searchResults, alternateRowColor, + contextMenuExtensions, } = this.props; return ( @@ -85,10 +90,12 @@ export default class ElementsInspector extends Component<{ onElementSelected={onElementSelected} onElementHovered={onElementHovered} selected={selected} + focused={focused} searchResults={searchResults} root={root} elements={elements} alternateRowColor={alternateRowColor} + contextMenuExtensions={contextMenuExtensions} /> );