Skip to content

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

@yjbanov

Description

@yjbanov

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:

Metadata

Metadata

Assignees

Labels

P1High-priority issues at the top of the work lista: accessibilityAccessibility, e.g. VoiceOver or TalkBack. (aka a11y)c: new featureNothing broken; request for a new capabilitycustomer: huggsy (g3)customer: samehereengineflutter/engine related. See also e: labels.platform-webWeb applications specifically

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions