Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[web:a11y] implement scopesRoute and namesRoute applied to separate nodes #126030

Closed
2 tasks done
yjbanov opened this issue May 4, 2023 · 1 comment · Fixed by flutter/engine#42108
Closed
2 tasks done

[web:a11y] implement scopesRoute and namesRoute applied to separate nodes #126030

yjbanov opened this issue May 4, 2023 · 1 comment · Fixed by flutter/engine#42108
Assignees
@yjbanov
Labels
a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) c: new feature Nothing broken; request for a new capability customer: huggsy (g3) customer: samehere engine flutter/engine repository. See also e: labels. P1 High-priority issues at the top of the work list platform-web Web applications specifically

Comments

@yjbanov
Copy link
Contributor

yjbanov commented May 4, 2023

Is there an existing issue for this?

Use case

Splitting off the discussion in flutter/engine#41681 into a standalone issue. That PR implements scopesRoute, namesRoute and label when all three are applied on the same node, in which case we use a combination of aria-label + role="dialog". However, scopesRoute and namesRoute do not have to be on the same node, which requires a different strategy.

Proposal

When scopesRoute and namesRoute are not on the same node, we look for the nearest scopesRoute ancestor of the namesRoute node and set aria-labelledby on the ancestor pointing down to the descendant.

Example:

Consider the following hypothetical structure of the Flutter semantics tree:

SemanticsObject(
  scopesRoute: true,
  children: [
    SemanticsObject(
      namesRoute: true,
      label: 'Dialog title',
    ),
  ]
)

This structure can be translated to ARIA tree as follows:

<flt-semantics id="flt-node-1" role="dialog" aria-labelled-by="flt-node-2">
  <flt-semantics id="flt-node-2" role="text" aria-label="Dialog title">
  </flt-semantics>
</flt-semantics>

See also:
@yjbanov yjbanov added c: new feature Nothing broken; request for a new capability engine flutter/engine repository. See also e: labels. a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) platform-web Web applications specifically P1 High-priority issues at the top of the work list customer: samehere customer: huggsy (g3) labels May 4, 2023
@yjbanov yjbanov self-assigned this May 4, 2023
@yjbanov yjbanov mentioned this issue May 17, 2023
Merged
auto-submit bot pushed a commit to flutter/engine that referenced this issue May 19, 2023
@yjbanov
[web:a11y] support dialogs described by descendants (#42108)
bca11a4 
Add a new `RouteName` semantic role for nodes with `namesRoute` set without a `scopesRoute`. Such nodes provide a description for the nearest ancestor dialog node. The web equivalent of this is when an element `role="dialog"` is described by pointing to one of its children using `aria-labelledby` and `aria-describedby`. Here's an example:

```
<div
  role="dialog"
  aria-labelledby="dialog1Title"
  aria-describedby="dialog1Desc">
  <h2 id="dialog1Title">Your personal details were successfully updated</h2>
  <p id="dialog1Desc">
    You can change your details at any time in the user account section.
  </p>
  <button>Close</button>
</div>
```

([Source](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/dialog_role))

Flutter currently does not distinguish between "labelled by" and "described by". In my testing, only `aria-describedby` resulted in an announcement of the dialog's description upon opening. `aria-labelledby` required that the dialog element itself be focusable, which is not the case. So I went with `aria-describedby`.

Fixes flutter/flutter#126030
@github-actions
Copy link

github-actions bot commented Jun 2, 2023

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

@github-actions github-actions bot locked as resolved and limited conversation to collaborators Jun 2, 2023
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees

@yjbanov yjbanov

Labels
a: accessibility Accessibility, e.g. VoiceOver or TalkBack. (aka a11y) c: new feature Nothing broken; request for a new capability customer: huggsy (g3) customer: samehere engine flutter/engine repository. See also e: labels. P1 High-priority issues at the top of the work list platform-web Web applications specifically
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

[web:a11y] support dialogs described by descendants yjbanov/engine
1 participant
@yjbanov