Skip to content
This repository was archived by the owner on Feb 25, 2025. It is now read-only.

[web:a11y] make header a proper <header> #55747

Merged
merged 6 commits into from
Oct 9, 2024
Merged

[web:a11y] make header a proper <header> #55747

merged 6 commits into from
Oct 9, 2024

Conversation

yjbanov
Copy link
Contributor

@yjbanov yjbanov commented Oct 8, 2024 •
edited
Loading

Now that we have proper headings, headers should become proper headers.

Fixes flutter/flutter#152268

@github-actions github-actions bot added the platform-web Code specifically for the web engine label Oct 8, 2024
@yjbanov yjbanov requested a review from mdebbar October 8, 2024 18:27
navaronbracke
navaronbracke reviewed Oct 9, 2024
View reviewed changes
yjbanov and others added 2 commits October 9, 2024 11:18
@yjbanov @navaronbracke
command update
225dae4 
Co-authored-by: Navaron Bracke <[email protected]>
@yjbanov @navaronbracke
link is not text field
a9c47b3 
Co-authored-by: Navaron Bracke <[email protected]>
@yjbanov yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Oct 9, 2024
@auto-submit auto-submit bot merged commit 2fbb0c1 into flutter:main Oct 9, 2024
30 checks passed
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Oct 10, 2024
Closed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Oct 10, 2024
@engine-flutter-autoroll
2fbb0c107 [web:a11y] make header a proper <header> (flutter/engine#55747
cc48b2e 
)
@engine-flutter-autoroll engine-flutter-autoroll mentioned this pull request Oct 10, 2024
Merged
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Oct 10, 2024
@engine-flutter-autoroll
2fbb0c107 [web:a11y] make header a proper <header> (flutter/engine#55747
26236d6 
)
auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Oct 10, 2024
@engine-flutter-autoroll
Roll Flutter Engine from 590babc1581b to 3ce72a28934c (13 revisions) (#…
82ebb74 
…156541)

flutter/engine@590babc...3ce72a2

2024-10-10 [email protected] Roll Skia from 0a9bfc90496e to 1e269594df9d (1 revision) (flutter/engine#55801)
2024-10-10 [email protected] Roll Skia from 6e4a2f266a17 to 0a9bfc90496e (2 revisions) (flutter/engine#55799)
2024-10-10 [email protected] Roll Skia from 3a9e6b6a4721 to 6e4a2f266a17 (1 revision) (flutter/engine#55797)
2024-10-10 [email protected] Roll buildroot to pick up change to --time executions (flutter/engine#55792)
2024-10-10 [email protected] Roll Skia from 8c95b719bf05 to 3a9e6b6a4721 (1 revision) (flutter/engine#55793)
2024-10-09 [email protected] Move some `et` tests around and delete unused files. (flutter/engine#55764)
2024-10-09 [email protected] [web:a11y] make header a proper <header> (flutter/engine#55747)
2024-10-09 [email protected] Roll Skia from cf9a558b3abb to 8c95b719bf05 (1 revision) (flutter/engine#55788)
2024-10-09 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Reverts "Run gen_snapshot under /usr/bin/time (#55777)" (#55787)" (flutter/engine#55789)
2024-10-09 98614782+auto-submit[bot]@users.noreply.github.com Reverts "Run gen_snapshot under /usr/bin/time (#55777)" (flutter/engine#55787)
2024-10-09 [email protected] Roll Skia from 1349ddc074ad to cf9a558b3abb (2 revisions) (flutter/engine#55785)
2024-10-09 [email protected] Run gen_snapshot under /usr/bin/time (flutter/engine#55777)
2024-10-09 [email protected] [Impeller] libImpeller: Publish SDK artifacts. (flutter/engine#55783)

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] 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
@math1man
Copy link
Contributor

Hey folks, this change broke our app. We're running into two issues.

  1. The label of our page headers used to be read as "header, This is my page". Now the label is dropped and it's just read as "banner".

  2. According to documentation, banner is meant for

    defining a global site header, which usually includes a logo, company name, search feature, and possibly the global navigation or a slogan

    In our web app, we have a corresponding banner, which can logically be labeled as "banner", but the in-page headers that are impacted by this change should still be labeled as "header" rather than "banner.

Internal bug b/374695603.

@math1man
Copy link
Contributor

Regarding my point #2, here's the issue using Wikipedia as a proxy, given that it has a very similar layout to our app:
image

@yjbanov yjbanov added the revert Label used to revert changes in a closed and merged pull request. label Oct 21, 2024
@auto-submit Auto-submit
Copy link
Contributor

auto-submit bot commented Oct 21, 2024

Time to revert pull request flutter/engine/55747 has elapsed.
You need to open the revert manually and process as a regular pull request.

@auto-submit auto-submit bot removed the revert Label used to revert changes in a closed and merged pull request. label Oct 21, 2024
yjbanov added a commit to yjbanov/engine that referenced this pull request Oct 21, 2024
@yjbanov
Revert "[web:a11y] make header a proper <header> (flutter#55747)"
436b4f1 
This reverts commit 2fbb0c1.
@yjbanov yjbanov mentioned this pull request Oct 21, 2024
Merged
auto-submit bot pushed a commit that referenced this pull request Oct 21, 2024
@yjbanov
Revert "[web:a11y] make header a proper <header> (#55747)" (#55993)
d302cc9 
This reverts commit 2fbb0c1.

This broke a customer: #55747 (comment)
yjbanov added a commit to yjbanov/engine that referenced this pull request Oct 21, 2024
@yjbanov
Reapply "[web:a11y] make header a proper <header> (flutter#55747)" (f…
745ef77 
…lutter#55993)

This reverts commit d302cc9.
@yjbanov yjbanov mentioned this pull request Oct 21, 2024
Merged
yjbanov added a commit to yjbanov/engine that referenced this pull request Nov 6, 2024
@yjbanov
Reapply "[web:a11y] make header a proper <header> (flutter#55747)" (f…
fdcf682 
…lutter#55993)

This reverts commit d302cc9.
auto-submit bot pushed a commit that referenced this pull request Nov 7, 2024
@yjbanov
[web:a11y] make header a <header> when non-empty and heading when emp…
076688d 
…ty (#55996)

This relands the [reverted](#55993) [original PR](#55747) with one important adjustment: if the header is empty and has a label, it is rendered as a heading (`<h1>`, `<h2>`, etc) instead of a `<header>`. This is to be consistent with mobile, where headers are frequently used as headings, and screen readers do indeed read it as "heading". Changing all headers to the `<header>` tag turned to out to be too disruptive to existing usages of `SemanticsProperties.header`.

Long-term, when flutter/flutter#155928 is implemented, we could migrate the framework to use `SemanticsProperties.headingLevel` to communicate that something is a heading, and encourage our users to move from `header` to `headingLevel` as well. After that migration is done, we could make all headers proper `<header>` tags, and not special-case empty headers.

Fixes flutter/flutter#152268
nick9822 pushed a commit to nick9822/flutter that referenced this pull request Dec 18, 2024
@yjbanov
[web:a11y] make header a proper <header> (flutter/engine#55747)
e478ea9 
Now that we have [proper headings](https://github.com/flutter/engine/blob/main/lib/web_ui/lib/src/engine/semantics/heading.dart), headers should become proper headers.

Fixes flutter#152268
nick9822 pushed a commit to nick9822/flutter that referenced this pull request Dec 18, 2024
@yjbanov
Revert "[web:a11y] make header a proper <header> (flutter#55747)" (fl…
1e4d3fa 
…utter/engine#55993)

This reverts commit e478ea9.

This broke a customer: flutter/engine#55747 (comment)
nick9822 pushed a commit to nick9822/flutter that referenced this pull request Dec 18, 2024
@yjbanov
[web:a11y] make header a <header> when non-empty and heading when emp…
c799bc6 
…ty (flutter/engine#55996)

This relands the [reverted](flutter/engine#55993) [original PR](flutter/engine#55747) with one important adjustment: if the header is empty and has a label, it is rendered as a heading (`<h1>`, `<h2>`, etc) instead of a `<header>`. This is to be consistent with mobile, where headers are frequently used as headings, and screen readers do indeed read it as "heading". Changing all headers to the `<header>` tag turned to out to be too disruptive to existing usages of `SemanticsProperties.header`.

Long-term, when flutter#155928 is implemented, we could migrate the framework to use `SemanticsProperties.headingLevel` to communicate that something is a heading, and encourage our users to move from `header` to `headingLevel` as well. After that migration is done, we could make all headers proper `<header>` tags, and not special-case empty headers.

Fixes flutter#152268
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Reviewers

@navaronbracke navaronbracke navaronbracke left review comments

@mdebbar mdebbar mdebbar approved these changes

Assignees
No one assigned
Labels
autosubmit Merge PR when tree becomes green via auto submit App platform-web Code specifically for the web engine
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

[web:a11y] switch header from role "heading" to role "banner"
4 participants
@yjbanov @math1man @mdebbar @navaronbracke