[web:a11y] support dialogs described by descendants #42108

yjbanov · 2023-05-17T22:31:39Z

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)

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

mdebbar

LGTM with a couple questions/comments.

mdebbar · 2023-05-18T14:48:46Z

lib/web_ui/lib/src/engine/semantics/dialog.dart

+        // Setting the label for the first time. Wait for the DOM tree to be
+        // established, then find the nearest dialog and update its label.
+        semanticsObject.owner.addOneTimePostUpdateCallback(() {
+          _lookUpNearestAncestorDialog();


Do we need to check that this hasn't been disposed?

Good catch!

mdebbar · 2023-05-18T15:00:31Z

lib/web_ui/lib/src/engine/semantics/semantics.dart

+  /// rely on this value in the middle of a semantics tree update. It is safe to
+  /// use this value in post-update callback (see
+  /// [EngineSemanticsOwner.addOneTimePostUpdateCallback]).
+  SemanticsObject? get parent => _parent;


Would be nice to have an assert that throws if we are in the middle of an update. Not sure what's the best way to do that though. Maybe a flag EngineSemanticsOwner.isUpdating and then:

Suggested change

SemanticsObject? get parent => _parent;

SemanticsObject? get parent {

assert(!owner.isUpdating);

return _parent;

}

mdebbar · 2023-05-18T15:08:38Z

lib/web_ui/lib/src/engine/semantics/dialog.dart

+        }
+        return true;
+      }());
+      semanticsObject.element.setAttribute('aria-label', label ?? '');


I don't see where the aria-label is set for the case where namesRoute is a descendant of scopesRoute.

Does it happen through the LabelAndValue role manager? If yes, then why are we doing it in the Dialog role manager too?

No, we don't set aria-label when a descendant provides a description. We use aria-describedby="ID_OF_DESCENDANT" instead.

And then that descendant is supposed to set the aria-label, right? I don't see RouteName doing it, so I'm assuming that LabelAndValue is doing it. But LabelAndValue should be doing it for Dialog as well. Maybe I'm missing something here.

Nope, the final state is like this:

<div role="dialog" aria-describedby="describer"> <div id="describer">Dialog description</div> </div>

No aria-label.

Ah I see. I was confused by this test:

expectSemanticsTree(''' <sem aria-describedby="flt-semantic-node-2" style="$rootSemanticStyle"> <sem-c> <sem> <sem-c> <sem aria-label="$label"></sem> </sem-c> </sem> </sem-c> </sem> ''');

Oh, it's because the descendant can provide the description by applying aria-label to itself, but it can also be a group of elements that provide a description together.

mdebbar

Thanks for all the improvements! LGTM again!

…r/engine#42108)

…127156) flutter/engine@9039c2d...bca11a4 2023-05-19 yjbanov@google.com [web:a11y] support dialogs described by descendants (flutter/engine#42108) 2023-05-18 47866232+chunhtai@users.noreply.github.com Makes android embedding to send full uri (flutter/engine#41836) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC rmistry@google.com,zra@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

…lutter#127156) flutter/engine@9039c2d...bca11a4 2023-05-19 yjbanov@google.com [web:a11y] support dialogs described by descendants (flutter/engine#42108) 2023-05-18 47866232+chunhtai@users.noreply.github.com Makes android embedding to send full uri (flutter/engine#41836) If this roll has caused a breakage, revert this CL and stop the roller using the controls here: https://autoroll.skia.org/r/flutter-engine-flutter-autoroll Please CC rmistry@google.com,zra@google.com on the revert to ensure that a human is aware of the problem. To file a bug in Flutter: https://github.com/flutter/flutter/issues/new/choose To report a problem with the AutoRoller itself, please file a bug: https://bugs.chromium.org/p/skia/issues/entry?template=Autoroller+Bug Documentation for the AutoRoller is here: https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md

support dialogs described by descendants

17af65f

flutter-dashboard bot added the platform-web Code specifically for the web engine label May 17, 2023

typo fixes

415b6ed

mdebbar approved these changes May 18, 2023

View reviewed changes

yjbanov added 3 commits May 18, 2023 13:50

isDisposed

b97a7cd

add semantics update phase and phase checks.

35de9e4

typo

374464a

mdebbar approved these changes May 18, 2023

View reviewed changes

yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label May 19, 2023

auto-submit bot merged commit bca11a4 into flutter:main May 19, 2023
26 checks passed

engine-flutter-autoroll mentioned this pull request May 19, 2023

Roll Flutter Engine from 9039c2dfb74c to bca11a423f9c (2 revisions) flutter/flutter#127156

Merged

engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request May 19, 2023

bca11a423 [web:a11y] support dialogs described by descendants (flutte…

b61febe

…r/engine#42108)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[web:a11y] support dialogs described by descendants #42108

[web:a11y] support dialogs described by descendants #42108

yjbanov commented May 17, 2023 •

edited

mdebbar left a comment

mdebbar May 18, 2023

yjbanov May 18, 2023

yjbanov May 18, 2023

mdebbar May 18, 2023

yjbanov May 18, 2023

mdebbar May 18, 2023

yjbanov May 18, 2023

mdebbar May 18, 2023

yjbanov May 18, 2023

mdebbar May 18, 2023

yjbanov May 18, 2023

mdebbar left a comment

-  SemanticsObject? get parent => _parent;
+  SemanticsObject? get parent {
+    assert(!owner.isUpdating);
+    return _parent;
+  }

[web:a11y] support dialogs described by descendants #42108

[web:a11y] support dialogs described by descendants #42108

Conversation

yjbanov commented May 17, 2023 • edited

mdebbar left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mdebbar left a comment

Choose a reason for hiding this comment

yjbanov commented May 17, 2023 •

edited