Google Git
Sign in
chromium/devtools/devtools-frontend/0d5c0051788720d86c4278f89f35fa72b307d158
commit
0d5c0051788720d86c4278f89f35fa72b307d158
[log]
author
Michael Liao <michael.liao@microsoft.com>
Thu Dec 10 02:17:12 2020
committer
Commit Bot <commit-bot@chromium.org>
Fri Dec 11 18:38:07 2020
tree
4c879ac6af6df89217c26b02a9ca71341da99463
parent
d44fddf3c85356821c9147a27868702dfaf76e95 [diff]
[Accessibility]: Improve screen reader text to include count and position of suggest box (e.g. 'suggestion 3 of 5')

Issue:
- Suggest box does not announce count and position for screen reader users

Changes:
- Adding count and position to the SR text

Before: https://imgur.com/ZAXjEMX
After: https://imgur.com/Pfo3bi1

Why do we need to use ARIAUtils.alert to mimic screen reader behavior?

The issue here is that the suggestion box is not actually attached to the DOM of the text input like most listbox-type inputs.  SuggestBox uses a glassPane object which renders the suggestion box at the coordinates of the text input.  Because of this structure, focus is never actually placed on the suggestion box and therefore the screen reader cannot read the list properly.  We use ARIAUtils.alert to mimic what a screen reader would say given the context of the suggestion box and the selected item.

Bug: 1157329
Change-Id: Id668246ecc08b22e5b4ca86b1a767ba36b11c4f2
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2582503
Reviewed-by: Patrick Brosset <patrick.brosset@microsoft.com>
Reviewed-by: Alex Rudenko <alexrudenko@chromium.org>
Commit-Queue: Michael Liao <michael.liao@microsoft.com>
2 files changed
tree: 4c879ac6af6df89217c26b02a9ca71341da99463
  1. build_overrides/
  2. docs/
  3. front_end/
  4. inspector_overlay/
  5. node_modules/
  6. scripts/
  7. test/
  8. third_party/
  9. v8/
  10. .clang-format
  11. .editorconfig
  12. .eslintignore
  13. .eslintrc.js
  14. .gitattributes
  15. .gitignore
  16. .gn
  17. .npmignore
  18. .npmrc
  19. .style.yapf
  20. .stylelintignore
  21. .stylelintrc.json
  22. all_devtools_files.gni
  23. all_devtools_modules.gni
  24. AUTHORS
  25. BUILD.gn
  26. COMMON_OWNERS
  27. DEPS
  28. devtools_grd_files.gni
  29. devtools_image_files.gni
  30. devtools_module_entrypoints.gni
  31. ENG_REVIEW_OWNERS
  32. INFRA_OWNERS
  33. LICENSE
  34. LIGHTHOUSE_OWNERS
  35. OWNERS
  36. package-lock.json
  37. package.json
  38. PRESUBMIT.py
  39. README.md
  40. tsconfig.base.json
  41. tsconfig.json
  42. WATCHLISTS
README.md

Chrome DevTools frontend

npm package

The client-side of the Chrome DevTools, including all JS & CSS to run the DevTools webapp.

Source code

The frontend is available on chromium.googlesource.com.

Design guidelines

Please be aware that DevTools follows additional development guidelines.

Issue triage

The issue triage guidelines can be found here.

Workflows

Instructions to set up, use, and maintain a DevTools frontend checkout can be found here.

Additional references

Source mirrors

DevTools frontend repository is mirrored on GitHub.

DevTools frontend is also available on NPM as the chrome-devtools-frontend package. It's not currently available via CJS or ES modules, so consuming this package in other tools may require some effort.

The version number of the npm package (e.g. 1.0.373466) refers to the Chromium commit position of latest frontend git commit. It's incremented with every Chromium commit, however the package is updated roughly daily.

Getting in touch