Fix screenreader behavior on site settings subpages.

On site settings subpages (chrome://settings/content/location for
example), in the list of allowed and blocked sites, there are several
issues with screenreaders:
1. The important context of whether a given site is allowed or blocked
   is never read.
2. Site URLs are read multiple times.
3. The list must be navigated with the arrow keys, but this is never
   indicated by the screenreader.

To fix this, this patch refactors the HTML structure and adds a "grid"
role to the entire list, similar to how chrome://bookmarks works. This
works because the screenreader will announce that focus has entered a
grid and read the grid label, which gives context and prompts the user
to use the arrow keys.

However, if the grid contains only a single row, the screenreader will
not treat the element as a grid. To fix this, we detect the singleton
row case and manually add the context to the aria-label attribute.

This patch only changes the generic site-list element. There are
several custom versions of this element, and will need to be changed in
follow-up patches. The element's visuals should remain unchanged.

Bug: 40280860
Change-Id: Ib388aabada7c1c33f39eb5dfd3b2525d68d7a2b9
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6530820
Reviewed-by: Filipa Senra <fsenra@google.com>
Auto-Submit: Bret Sepulveda <bsep@chromium.org>
Commit-Queue: Bret Sepulveda <bsep@chromium.org>
Reviewed-by: Rainhard Findling <rainhard@chromium.org>
Commit-Queue: Rainhard Findling <rainhard@chromium.org>
Commit-Queue: Filipa Senra <fsenra@google.com>
Cr-Commit-Position: refs/heads/main@{#1459937}
8 files changed
tree: d3d5f543f9a2758f50b3d34401b495409d63a31c
  1. android_webview/
  2. apps/
  3. ash/
  4. base/
  5. build/
  6. build_overrides/
  7. buildtools/
  8. cc/
  9. chrome/
  10. chromecast/
  11. chromeos/
  12. codelabs/
  13. components/
  14. content/
  15. crypto/
  16. dbus/
  17. device/
  18. docs/
  19. extensions/
  20. fuchsia_web/
  21. gin/
  22. google_apis/
  23. gpu/
  24. headless/
  25. infra/
  26. ios/
  27. ipc/
  28. media/
  29. mojo/
  30. native_client_sdk/
  31. net/
  32. pdf/
  33. ppapi/
  34. printing/
  35. remoting/
  36. rlz/
  37. sandbox/
  38. services/
  39. skia/
  40. sql/
  41. storage/
  42. styleguide/
  43. testing/
  44. third_party/
  45. tools/
  46. ui/
  47. url/
  48. webkit/
  49. .clang-format
  50. .clang-tidy
  51. .clangd
  52. .git-blame-ignore-revs
  53. .gitallowed
  54. .gitattributes
  55. .gitignore
  56. .gitmodules
  57. .gn
  58. .mailmap
  59. .rustfmt.toml
  60. .vpython3
  61. .yapfignore
  62. ATL_OWNERS
  63. AUTHORS
  64. BUILD.gn
  65. CODE_OF_CONDUCT.md
  66. codereview.settings
  67. CPPLINT.cfg
  68. CRYPTO_OWNERS
  69. DEPS
  70. DIR_METADATA
  71. LICENSE
  72. LICENSE.chromium_os
  73. OWNERS
  74. PRESUBMIT.py
  75. PRESUBMIT_test.py
  76. PRESUBMIT_test_mocks.py
  77. README.md
  78. WATCHLISTS
README.md

Logo Chromium

Chromium is an open-source browser project that aims to build a safer, faster, and more stable way for all users to experience the web.

The project's web site is https://www.chromium.org.

To check out the source code locally, don't use git clone! Instead, follow the instructions on how to get the code.

Documentation in the source is rooted in docs/README.md.

Learn how to Get Around the Chromium Source Code Directory Structure.

For historical reasons, there are some small top level directories. Now the guidance is that new top level directories are for product (e.g. Chrome, Android WebView, Ash). Even if these products have multiple executables, the code should be in subdirectories of the product.

If you found a bug, please file it at https://crbug.com/new.