[framework]Add semantics role to table rows. #163337

hannah-hyj · 2025-02-14T19:57:43Z

1. framework side:
This PR Create semantics node for rows in table's assembleSemanticsNode function.

2. web side:
I tested on my mac, and i need to remove the
<flt-semantics-container> between table and row, row and cell to traverse inside table, removing those transfom intermediate containers on web will be a bit of hassle and will be in another separate PR.

For example this code can only announce table but can’t get into cells.

<flt-semantics id="flt-semantic-node-4" role="table" style="position: absolute; overflow: visible; width: 751px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 56); pointer-events: none; z-index: 1;">
    <flt-semantics-container style="position: absolute; pointer-events: none; top: 0px; left: 0px;">
        <flt-semantics id="flt-semantic-node-6" role="row" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: none;">
            <flt-semantics-container style="position: absolute; pointer-events: none; top: 0px; left: 0px;">
                <flt-semantics id="flt-semantic-node-5" role="columnheader" aria-label="Name" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: all;"></flt-semantics>
            </flt-semantics-container>
        </flt-semantics>
    </flt-semantics-container>
</flt-semantics>

If I removed the in between </flt-semantics-container>, the code come

<flt-semantics id="flt-semantic-node-4" role="table" style="position: absolute; overflow: visible; width: 751px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 56); pointer-events: none; z-index: 1;">
    <flt-semantics id="flt-semantic-node-6" role="row" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: none;">
        <flt-semantics id="flt-semantic-node-5" role="columnheader" aria-label="Name" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: all;"></flt-semantics>
    </flt-semantics>
</flt-semantics>

And I can get into table cells.

3. Other aria-attributes:
aria-colcount ,aria-rowcount aria-colindex aria-rowindex

theres attributes are only needed if some rows and columns are hidden in the Dom tree. havn't added them yet

aria-rowspan , aria-colspan :
*we currently don't support row span and col span in our widgets. related issue: #21594

related: #162339
issue: #45205

Pre-launch Checklist

I read the Contributor Guide and followed the process outlined there for submitting PRs.
I read the Tree Hygiene wiki page, which explains my responsibilities.
I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
I signed the CLA.
I listed at least one issue that this PR fixes in the description above.
I updated/added relevant documentation (doc comments with ///).
I added new tests to check the change I am making, or this PR is test-exempt.
I followed the breaking change policy and added Data Driven Fixes where supported.
All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

hannah-hyj · 2025-02-14T20:24:21Z

hmmm looks like i should not simply remove <flt-semantics-container>, it will mess up with some transform. i will mark this PR as draft and do more testing.

yjbanov · 2025-02-14T22:19:43Z

hmmm looks like i should not simply remove <flt-semantics-container>, it will mess up with some transform. i will mark this PR as draft and do more testing.

Oof, that's a tricky problem. What's the typical value of rect passed for tables in semantic updates. I wonder if they are simple enough that we could use an alternative strategy that doesn't need auxiliary child container elements. For example, I think if rect.top and rect.left are zero, we can do everything with just one element.

hannah-hyj · 2025-02-20T22:22:16Z

@chunhtai I want to merge this framework changes PR first and the "removing intermediate container layers in web engine" will be a separate effort in another PR.

chunhtai · 2025-02-21T17:46:20Z

packages/flutter/lib/src/rendering/table.dart

+
+      final SemanticsConfiguration configuration =
+          SemanticsConfiguration()
+            ..indexInParent = i


is this going to be used by the row index? if so, does the cell also uses this to set the col index? we should unify the way to set these indices in web.

updated indexInParent for cells

chunhtai · 2025-02-21T17:55:11Z

packages/flutter/test/widgets/table_test.dart

-                  children: const <TableRow>[
-                    TableRow(children: <Widget>[Text('AAAAAA'), Text('B'), Text('C')]),
-                  ],
+                TableCell(


Is this needed for semantics check? do we need to worry about this being a breaking change?

yes because the test case here before is a very corner case putting a table inside a tablerow child, so it became table-> row-> table and it failed the new a11y check, i think cases like this are very rare and they are just made up for tests

no, this is a case i replicate from internal code.

Should the tableRow assign the TableCell to its children internally?

Should the tableRow assign the TableCell to its children internally?
I'm already doing that in assembleSemanticsNode, i assign the role to its children if the children have no roles.
but if the children already have roles(in this case, it's table), do we want to override that role? or do we want to insert a semantics node with a cell role between them?

I'm already doing that in assembleSemanticsNode

Assigning child property in assembleSemanticsNode seems a bit hacky. We should do it through the TableCell widget if possible.

do we want to insert a semantics node with a cell role between them

This would be ideal, but doing it in widget layer means the Table here needs to be wrap with a semantics container. I think for now, let's just override it without creating a container. As you said this may be a rare case, we can fix it if it really is an issue

also looks like this pr will make the table to be a container so there may not be overriding role issue in this particular case

Assigning child property in assembleSemanticsNode seems a bit hacky. We should do it through the TableCell widget if possible.

We can't because we don't enforce user to use TableCell widget in table, TableRow can take any widgets as its children. User can just assign a Text widget to TableRow's children. That's why I assign the role here.

I think for now, let's just override it without creating a container.

SGTM,

there may not be overriding role issue in this particular case

in This particular case, the test case was table-> row-> table- > row-> cell, If I don't override the second table role , it will fail the check because row's children shouldn't be a table, if i override the second table role to be a cell, it will become table-> row-> cell- > row-> cell, it will fail the check because row's parent shouldn't be a cell. So I see the only way to fix this test case is to insert a cell and it will become table-> row-> cell -> table- > row-> cell,

This would be ideal

Updated this PR to insert a semantics node with a cell role between them.

hannah-hyj · 2025-02-21T21:56:02Z

I just realized I had some misunderstanding about semanticsNode rect before. I thought the tree dump rect is actual semanticsnode.rect, but it's actually semanticsnode.rect with semanticsnode.transform.

Instead of only setting row's and cell's rect, actually i should set their transform. Because rect in the a semantics node won't change their children's position, only transform will.

Updated PR.

chunhtai · 2025-03-03T20:03:50Z

packages/flutter/test/widgets/table_test.dart

-                  children: const <TableRow>[
-                    TableRow(children: <Widget>[Text('AAAAAA'), Text('B'), Text('C')]),
-                  ],
+                TableCell(


I'm already doing that in assembleSemanticsNode

Assigning child property in assembleSemanticsNode seems a bit hacky. We should do it through the TableCell widget if possible.

do we want to insert a semantics node with a cell role between them

This would be ideal, but doing it in widget layer means the Table here needs to be wrap with a semantics container. I think for now, let's just override it without creating a container. As you said this may be a rare case, we can fix it if it really is an issue

chunhtai · 2025-03-03T20:04:17Z

packages/flutter/lib/src/semantics/semantics.dart

  /// {@endtemplate}
  SemanticsRole get role => _role;
  SemanticsRole _role = _kEmptyConfig.role;
+  set role(SemanticsRole value) {


we should avoid this

I want to assign the role cell to the child in assembleSemanticsNode.
And i want to only change its role. So i think this is needed.

This is removed after offline discussion.

we won't directly change semantics node's role, just wrap them with a new semantics node with a cell role.

chunhtai · 2025-03-03T20:05:16Z

packages/flutter/test/widgets/table_test.dart

-                  children: const <TableRow>[
-                    TableRow(children: <Widget>[Text('AAAAAA'), Text('B'), Text('C')]),
-                  ],
+                TableCell(


also looks like this pr will make the table to be a container so there may not be overriding role issue in this particular case

chunhtai · 2025-03-03T21:26:40Z

We can't because we don't enforce user to use TableCell widget in table

I mean we wrap it internally in either Table widget or TableRow widget

chunhtai · 2025-03-03T21:28:38Z

I mean we wrap it internally in either Table widget or TableRow widget

looking at the code, we shouldn't add semanticsRole.cell in TableCell. It should added internally in Table or TableRow, this also avoid forcing people to use TableCell to have the correct semantics

hannah-hyj · 2025-03-03T21:42:09Z

I mean we wrap it internally in either Table widget or TableRow widget

If you mean like to wrap TableRow's every children with Semantics( role: cell: child: child), I tried that and it didn't work out because TableCell is a ParentDataWidget so it assumes its parent is a Table, insert a Semantics widget between TableCell and Table will crash it. So I chose to assign the semantics role to cells in assembleSemanticsNode although it looks a bit hack 😅 maybe there is a better way to do it ?

we shouldn't add semanticsRole.cell in TableCell

make sense, I will remove that.

…#163337)

**1. framework side:** This PR Create semantics node for rows in table's `assembleSemanticsNode` function. **2. web side:** I tested on my mac, and i need to remove the `<flt-semantics-container>` between table and row, row and cell to traverse inside table, removing those transfom intermediate containers on web will be a bit of hassle and will be in another separate PR. For example this code can only announce table but can’t get into cells. ``` <flt-semantics id="flt-semantic-node-4" role="table" style="position: absolute; overflow: visible; width: 751px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 56); pointer-events: none; z-index: 1;"> <flt-semantics-container style="position: absolute; pointer-events: none; top: 0px; left: 0px;"> <flt-semantics id="flt-semantic-node-6" role="row" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: none;"> <flt-semantics-container style="position: absolute; pointer-events: none; top: 0px; left: 0px;"> <flt-semantics id="flt-semantic-node-5" role="columnheader" aria-label="Name" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: all;"></flt-semantics> </flt-semantics-container> </flt-semantics> </flt-semantics-container> </flt-semantics> ``` If I removed the in between `</flt-semantics-container>`, the code come ``` <flt-semantics id="flt-semantic-node-4" role="table" style="position: absolute; overflow: visible; width: 751px; height: 56px; transform-origin: 0px 0px 0px; transform: matrix(1, 0, 0, 1, 0, 56); pointer-events: none; z-index: 1;"> <flt-semantics id="flt-semantic-node-6" role="row" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: none;"> <flt-semantics id="flt-semantic-node-5" role="columnheader" aria-label="Name" style="position: absolute; overflow: visible; width: 751px; height: 56px; top: 0px; left: 0px; pointer-events: all;"></flt-semantics> </flt-semantics> </flt-semantics> ``` And I can get into table cells. **3. Other aria-attributes:** [aria-colcount](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colcount) ,[aria-rowcount](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) [aria-colindex](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-colindex) [aria-rowindex](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowindex) * theres attributes are only needed if some rows and columns are hidden in the Dom tree. havn't added them yet aria-rowspan , aria-colspan : *we currently don't support row span and col span in our widgets. related issue: flutter#21594 related: flutter#162339 issue: flutter#45205 ## Pre-launch Checklist - [ ] I read the [Contributor Guide] and followed the process outlined there for submitting PRs. - [ ] I read the [Tree Hygiene] wiki page, which explains my responsibilities. - [ ] I read and followed the [Flutter Style Guide], including [Features we expect every widget to implement]. - [ ] I signed the [CLA]. - [ ] I listed at least one issue that this PR fixes in the description above. - [ ] I updated/added relevant documentation (doc comments with `///`). - [ ] I added new tests to check the change I am making, or this PR is [test-exempt]. - [ ] I followed the [breaking change policy] and added [Data Driven Fixes] where supported. - [ ] All existing and new tests are passing. If you need help, consider asking for advice on the #hackers-new channel on [Discord].  [Contributor Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#overview [Tree Hygiene]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md [test-exempt]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#tests [Flutter Style Guide]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md [Features we expect every widget to implement]: https://github.com/flutter/flutter/blob/main/docs/contributing/Style-guide-for-Flutter-repo.md#features-we-expect-every-widget-to-implement [CLA]: https://cla.developers.google.com/ [flutter/tests]: https://github.com/flutter/tests [breaking change policy]: https://github.com/flutter/flutter/blob/main/docs/contributing/Tree-hygiene.md#handling-breaking-changes [Discord]: https://github.com/flutter/flutter/blob/main/docs/contributing/Chat.md [Data Driven Fixes]: https://github.com/flutter/flutter/blob/main/docs/contributing/Data-driven-Fixes.md

hannah-hyj requested review from chunhtai, goderbauer and yjbanov and removed request for goderbauer February 14, 2025 20:08

hannah-hyj removed request for chunhtai and yjbanov February 14, 2025 20:24

hannah-hyj force-pushed the table-role-2 branch from cdd51ee to f2fbc6c Compare February 19, 2025 21:40

github-actions bot removed engine flutter/engine related. See also e: labels. platform-web Web applications specifically labels Feb 19, 2025

hannah-hyj force-pushed the table-role-2 branch from f2fbc6c to 3ecbeba Compare February 20, 2025 20:56

hannah-hyj requested a review from chunhtai February 20, 2025 20:59

hannah-hyj changed the title ~~Add semantics role to table rows.~~ [framework]Add semantics role to table rows. Feb 20, 2025

hannah-hyj force-pushed the table-role-2 branch from 9494077 to 50fcfe9 Compare February 21, 2025 03:46

chunhtai reviewed Feb 21, 2025

View reviewed changes

hannah-hyj requested a review from chunhtai February 21, 2025 21:57

chunhtai reviewed Mar 3, 2025

View reviewed changes

hannah-hyj requested review from chunhtai March 3, 2025 22:03

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 15, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

5c7618e

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

3f27289

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

9bbe1c0

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 16, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

4d8df6c

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 17, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

fc33269

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 20, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

942367f

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 25, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

ca3da94

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 25, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

883edbd

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

b9a51d1

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

16d6f44

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

e86fcdd

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

eccdfb5

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

d2c5209

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

28951c9

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

1739343

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 26, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

6c65acb

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

517f769

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

6d0476d

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

b98a54f

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

847a67d

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

105307f

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

5ea9d13

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

02bb04b

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 27, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

ae704b2

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request Mar 28, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

ce7dffd

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

c9eafd3

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 20, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

a01ce3a

…#163337)

engine-flutter-autoroll added a commit to engine-flutter-autoroll/packages that referenced this pull request May 21, 2025

6aaa4eb [framework]Add semantics role to table rows. (flutter/flutter…

bd33d13

…#163337)

tirth-patel-nc mentioned this pull request Oct 16, 2025

Tooltip in TableRow gives render error #177038

Open

[framework]Add semantics role to table rows. #163337

[framework]Add semantics role to table rows. #163337

Uh oh!

Conversation

hannah-hyj commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Pre-launch Checklist

Uh oh!

hannah-hyj commented Feb 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

yjbanov commented Feb 14, 2025

Uh oh!

hannah-hyj commented Feb 20, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hannah-hyj Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hannah-hyj Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hannah-hyj Mar 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hannah-hyj commented Feb 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

chunhtai commented Mar 3, 2025

Uh oh!

chunhtai commented Mar 3, 2025

Uh oh!

hannah-hyj commented Mar 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hannah-hyj commented Feb 14, 2025 •

edited

Loading

hannah-hyj commented Feb 14, 2025 •

edited

Loading

hannah-hyj Feb 21, 2025 •

edited

Loading

hannah-hyj Mar 3, 2025 •

edited

Loading

hannah-hyj Mar 4, 2025 •

edited

Loading

hannah-hyj commented Feb 21, 2025 •

edited

Loading

hannah-hyj commented Mar 3, 2025 •

edited

Loading