mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1688007 - [devtools] Add localized inspectIconTitle prop in Accessible.js . r=jdescottes. 

This will add proper titles to the icons we display in the accessibility
panel to select a node in the Accessibility Tree or in the inspector (if it's
a dom node).
Assertions are added in tests to ensure we don't regress.

Differential Revision: https://phabricator.services.mozilla.com/D154406
This commit is contained in:
Nicolas Chevobbe 2022-08-12 13:10:04 +00:00
Родитель 9baf41e46c
Коммит 484afc4d26
4 изменённых файлов: 37 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

7
devtools/client/accessibility/components/Accessible.js
Просмотреть файл

@ -294,6 +294,10 @@ class Accessible extends Component {
valueProps.onDOMNodeMouseOut = () => this.hideHighlighter(); valueProps.onDOMNodeMouseOut = () => this.hideHighlighter();
valueProps.onDOMNodeMouseOver = () => valueProps.onDOMNodeMouseOver = () =>
this.showHighlighter(this.props.nodeFront); this.showHighlighter(this.props.nodeFront);
valueProps.inspectIconTitle = L10N.getStr(
"accessibility.accessible.selectNodeInInspector.title"
);
valueProps.onInspectIconClick = () => valueProps.onInspectIconClick = () =>
this.selectNode(this.props.nodeFront); this.selectNode(this.props.nodeFront);
} else if (isAccessibleFront(object)) { } else if (isAccessibleFront(object)) {
@ -303,6 +307,9 @@ class Accessible extends Component {
this.hideAccessibleHighlighter(target); this.hideAccessibleHighlighter(target);
valueProps.onAccessibleMouseOver = () => valueProps.onAccessibleMouseOver = () =>
this.showAccessibleHighlighter(target); this.showAccessibleHighlighter(target);
valueProps.inspectIconTitle = L10N.getStr(
"accessibility.accessible.selectElement.title"
);
valueProps.onInspectIconClick = (obj, e) => { valueProps.onInspectIconClick = (obj, e) => {
e.stopPropagation(); e.stopPropagation();
this.selectAccessible(target); this.selectAccessible(target);

14
devtools/client/accessibility/test/browser/browser_accessibility_relation_navigation.js
Просмотреть файл

@ -3,6 +3,8 @@
"use strict"; "use strict";
const { L10N } = require("devtools/client/accessibility/utils/l10n");
const TEST_URI = `<html> const TEST_URI = `<html>
<head> <head>
<meta charset="utf-8"/> <meta charset="utf-8"/>
@ -122,9 +124,19 @@ const tests = [
// activated. // activated.
nonNegativeTabIndexRule: false, nonNegativeTabIndexRule: false,
}); });
const selectElementInTreeButton = containingDocRelation.querySelector(
".open-accessibility-inspector"
);
ok(!!selectElementInTreeButton, "There's a button to select the element");
is(
selectElementInTreeButton.getAttribute("title"),
L10N.getStr("accessibility.accessible.selectElement.title"),
"The button has the expected title"
);
EventUtils.sendMouseEvent( EventUtils.sendMouseEvent(
{ type: "click" }, { type: "click" },
containingDocRelation.querySelector(".open-accessibility-inspector"), selectElementInTreeButton,
win win
); );
AccessibilityUtils.resetEnv(); AccessibilityUtils.resetEnv();

7
devtools/client/accessibility/test/browser/browser_accessibility_sidebar_dom_nodes.js
Просмотреть файл

@ -3,6 +3,8 @@
"use strict"; "use strict";
const { L10N } = require("devtools/client/accessibility/utils/l10n");
// Check that DOM nodes in the sidebar can be highlighted and that clicking on the icon // Check that DOM nodes in the sidebar can be highlighted and that clicking on the icon
// next to them opens the inspector. // next to them opens the inspector.
@ -38,6 +40,11 @@ addA11YPanelTask(
const openInspectorButton = domNodeEl.querySelector(".open-inspector"); const openInspectorButton = domNodeEl.querySelector(".open-inspector");
ok(openInspectorButton, "The open inspector button is displayed"); ok(openInspectorButton, "The open inspector button is displayed");
is(
openInspectorButton.getAttribute("title"),
L10N.getStr("accessibility.accessible.selectNodeInInspector.title"),
"The open inspector button has expected title"
);
info("Check that hovering DOMNode triggers the highlight"); info("Check that hovering DOMNode triggers the highlight");
// Loading the inspector panel at first, to make it possible to listen for // Loading the inspector panel at first, to make it possible to listen for

10
devtools/client/locales/en-US/accessibility.properties
Просмотреть файл

@ -30,6 +30,16 @@ accessibility.properties=Properties
# Accessibility tree (that represents accessible element name) container. # Accessibility tree (that represents accessible element name) container.
accessibility.treeName=Accessibility Tree accessibility.treeName=Accessibility Tree
# LOCALIZATION NOTE (accessibility.accessible.selectElement.title): A title text
# displayed on buttons next to accessible elements in the `relations` section, allowing the
# user to select the element in the accessibility tree.
accessibility.accessible.selectElement.title=Click to select the node in the Accessibility Tree
# LOCALIZATION NOTE (accessibility.accessible.selectNodeInInspector.title): A title text
# displayed on buttons next to nodes in the sidebar, allowing the user to select the node
# in the Inspector panel.
accessibility.accessible.selectNodeInInspector.title=Click to select the node in the inspector
# LOCALIZATION NOTE (accessibility.accessible.notAvailable): A title text # LOCALIZATION NOTE (accessibility.accessible.notAvailable): A title text
# displayed when accessible sidebar panel does not have an accessible object to # displayed when accessible sidebar panel does not have an accessible object to
# display. # display.