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.

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

[web] Add 'flt-semantics-identifier' attribute to semantics nodes #53278

Merged
merged 4 commits into from
Jun 20, 2024

Conversation

mdebbar
Copy link
Contributor

@mdebbar mdebbar commented Jun 7, 2024

Make Semantics(identifier: '...') useful on the web. This PR plugs the Semantics identifier property as an HTML attribute flt-semantics-identifier onto semantics elements.

This is useful in some scenarios:

  • In testing to check if a certain semantics node has made it to the page (example).
  • In apps and/or packages to be able to lookup the DOM element that corresponds to a certain semantics node (example).

Fixes flutter/flutter#97455

@mdebbar mdebbar requested a review from yjbanov June 7, 2024 17:26
@github-actions github-actions bot added the platform-web Code specifically for the web engine label Jun 7, 2024

void _updateIdentifier() {
if (semanticsObject.hasIdentifier) {
setAttribute('semantics-identifier', semanticsObject.identifier!);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if it would be better to prefix it with data-?
https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data- sounds like a good idea, but only works if we move from the flt- convention to it. For this PR, let's continue with the flt- convention and file an issue to move to data- (we'll also have to evaluate the pros and cons of using data attributes).

Copy link
Contributor

@yjbanov yjbanov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm


void _updateIdentifier() {
if (semanticsObject.hasIdentifier) {
setAttribute('semantics-identifier', semanticsObject.identifier!);
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

data- sounds like a good idea, but only works if we move from the flt- convention to it. For this PR, let's continue with the flt- convention and file an issue to move to data- (we'll also have to evaluate the pros and cons of using data attributes).

@mdebbar mdebbar changed the title [web] Add 'semantics-identifier' attribute to semantics nodes [web] Add 'flt-semantics-identifier' attribute to semantics nodes Jun 20, 2024
@mdebbar mdebbar added the autosubmit Merge PR when tree becomes green via auto submit App label Jun 20, 2024
@auto-submit auto-submit bot merged commit 241f8ea into flutter:main Jun 20, 2024
29 checks passed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
@mdebbar mdebbar deleted the semantics_identifier branch June 21, 2024 17:16
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Jun 21, 2024
auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Jun 21, 2024
…150637)

flutter/engine@dda82d9...33415c6

2024-06-21 [email protected] Roll Dart SDK from 4483d67ba725 to fc1e5912fc94 (1 revision) (flutter/engine#53503)
2024-06-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fix focus management for text fields (#51009)" (flutter/engine#53502)
2024-06-21 [email protected] Roll Dart SDK from 19d3e659f49a to 4483d67ba725 (2 revisions) (flutter/engine#53501)
2024-06-20 [email protected] [web] Add 'flt-semantics-identifier' attribute to semantics nodes (flutter/engine#53278)
2024-06-20 [email protected] [web] Don't add `href="#"` to semantics links (flutter/engine#53395)
2024-06-20 [email protected] Roll Dart SDK from be6b533e07e7 to 19d3e659f49a (1 revision) (flutter/engine#53495)
2024-06-20 [email protected] Roll Fuchsia Linux SDK from tD5pof7jVnbXPwP7l... to iU-B6rJxy0wUYSmmp... (flutter/engine#53493)

Also rolling transitive DEPS:
  fuchsia/sdk/core/linux-amd64 from tD5pof7jVnbX to iU-B6rJxy0wU

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 [email protected],[email protected],[email protected] 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://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
sigurdm pushed a commit to sigurdm/flutter that referenced this pull request Jun 26, 2024
…lutter#150637)

flutter/engine@dda82d9...33415c6

2024-06-21 [email protected] Roll Dart SDK from 4483d67ba725 to fc1e5912fc94 (1 revision) (flutter/engine#53503)
2024-06-21 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Fix focus management for text fields (flutter#51009)" (flutter/engine#53502)
2024-06-21 [email protected] Roll Dart SDK from 19d3e659f49a to 4483d67ba725 (2 revisions) (flutter/engine#53501)
2024-06-20 [email protected] [web] Add 'flt-semantics-identifier' attribute to semantics nodes (flutter/engine#53278)
2024-06-20 [email protected] [web] Don't add `href="#"` to semantics links (flutter/engine#53395)
2024-06-20 [email protected] Roll Dart SDK from be6b533e07e7 to 19d3e659f49a (1 revision) (flutter/engine#53495)
2024-06-20 [email protected] Roll Fuchsia Linux SDK from tD5pof7jVnbXPwP7l... to iU-B6rJxy0wUYSmmp... (flutter/engine#53493)

Also rolling transitive DEPS:
  fuchsia/sdk/core/linux-amd64 from tD5pof7jVnbX to iU-B6rJxy0wU

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 [email protected],[email protected],[email protected] 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://issues.skia.org/issues/new?component=1389291&template=1850622

Documentation for the AutoRoller is here:
https://skia.googlesource.com/buildbot/+doc/main/autoroll/README.md
auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Jul 9, 2024
Updating the docs to reflect the change in flutter/engine#53278.

`Semantics(identifier: '...')` can now be used on web to facilitate testing and DOM lookup when it comes to semantics nodes.
@nank1ro
Copy link

nank1ro commented Sep 4, 2024

Hey @mdebbar
Just tried using the Semantics identifier on both the Stable (3.24.1) and Master channel (3.25.0-1.0.pre.251), but in the source code there isn't any flt-semantics-identifier.

The code I'm using is

Semantics(
  identifier: 'myid',
  child: MyChild(),
),

What I want to do, is to get the HTML element and prevent the default context menu on that element.
But the identifier cannot be found. I tried searching manually with the "Elements" tab of Chrome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
autosubmit Merge PR when tree becomes green via auto submit App platform-web Code specifically for the web engine
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[flutter-web] Add support for classes or testID attribute that can be used to identify html tags
4 participants