# a11y: Settings UI \(\#59429\) · gitcafe/zed

[View on GitCafe](https://git.cafe/gitcafe/zed/commit/83d4847462e57a6f72dc314abea05d57d3bdcfb6)

Repository: [gitcafe/zed](https://git.cafe/gitcafe/zed)

Visibility: public

Requested revision: 83d4847462e57a6f72dc314abea05d57d3bdcfb6

Requested commit: 83d4847462e57a6f72dc314abea05d57d3bdcfb6

Commit: 83d4847462e57a6f72dc314abea05d57d3bdcfb6

Tree: c48610e17f8b03da7c14534625d9b35f0c8c4a58

Author: Cameron Mcloughlin

Committer: GitHub

## Message

```
a11y: Settings UI (#59429)

Adds:
- aria attributes to most UI elements in settings UI
- a new a11y API to GPUI
- a fix for a GPUI keyboard focus bug

## Accesible settings UI

Settings UI should now be fully accessible to users of assistive
technology.

**However**, there are some caveats:
- accessibility features require zed to be launched with the
`ZED_EXPERIMENTAL_A11Y=1` env var to be set
- I have not exhaustively checked every control
- There are some quite surprising keyboard focus behaviours which
predate this code
- The main Zed UI is still largely inaccessible, though a handful of
shared components will now report themselves, but the experience is
suboptimal.

For anyone wishing to try out the settings UI:
- make sure `ZED_EXPERIMENTAL_A11Y=1` is set
- open zed
- press `ctrl-,` (or `cmd+,` on a mac) to open settings UI in a separate
window

## `aria_active_descendant`

This is equivalent to the
[`aria-activedescendant`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-activedescendant)
API on the web.

It allows a container to maintain focus, while indicating that one of
its children should be active. Zed uses this for menus and combo boxes,
for example.

GPUI will report a div with `.aria_active_descendant()` as long as:
- an ancestor is focused
- only one descendant of the focused ancestor has
`.aria_active_descendant()`

Two descendants with this property where the focused node is a common
ancestor is an error.

## GPUI keyboard fix

GPUI will map a space or enter keypress to a div's `on_click` handler,
if it exists. However, the keyboard-driven path was missing some checks
that the mouseclick path has.

With this PR, for an enter/space keypress to be considered a click,
between the "key down" and "key up" events:
- there must be no other key events
- focus must not move to a different node

This fixes an existing bug with combo boxes in zed where:
- enter maps to `menu::Confirm` **on key down*
- the menu item is selected
- focus moves to the combo box
- enter then triggers the combo box's `on_click` **on key up**,
re-opening the menu

---

Release Notes:

- N/A or Added/Fixed/Improved ...

---------

Co-authored-by: zed-zippy[bot] <234243425+zed-zippy[bot]@users.noreply.github.com>
```

## Parents

- [c4e30593b16fa57ebe7230f2181b35149a3689c6](https://git.cafe/gitcafe/zed/commit/c4e30593b16fa57ebe7230f2181b35149a3689c6?format=markdown)

[Source at this commit](https://git.cafe/gitcafe/zed/tree/83d4847462e57a6f72dc314abea05d57d3bdcfb6?format=markdown)