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

[web:a11y] make header a <header> when non-empty and heading when empty #55996

Merged
merged 3 commits into from
Nov 7, 2024

Conversation

yjbanov
Copy link
Contributor

@yjbanov yjbanov commented Oct 21, 2024

This relands the reverted original PR 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

@github-actions github-actions bot added the platform-web Code specifically for the web engine label Oct 21, 2024
@yjbanov yjbanov changed the title Reapply "[web:a11y] make header a proper <header> (#55747)" (#55993) [web:a11y] make header a <header> when non-empty and heading when empty Nov 6, 2024
@yjbanov yjbanov force-pushed the reland-header-semantics branch from 745ef77 to a1d5bdf Compare November 6, 2024 19:30
@yjbanov yjbanov requested a review from hannah-hyj November 6, 2024 19:31
Copy link
Member

@hannah-hyj hannah-hyj left a comment

Choose a reason for hiding this comment

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

LGTM, thanks!

@yjbanov yjbanov added the autosubmit Merge PR when tree becomes green via auto submit App label Nov 7, 2024
@auto-submit auto-submit bot merged commit 076688d into flutter:main Nov 7, 2024
30 checks passed
engine-flutter-autoroll added a commit to engine-flutter-autoroll/flutter that referenced this pull request Nov 7, 2024
auto-submit bot pushed a commit to flutter/flutter that referenced this pull request Nov 7, 2024
…158303)

flutter/engine@94dac95...076688d

2024-11-07 yjbanov@google.com [web:a11y] make header a <header> when non-empty and heading when empty (flutter/engine#55996)
2024-11-06 jonahwilliams@google.com [Impeller] make sure binding nullptr texture does not crash. (flutter/engine#56381)

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 jsimmons@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://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
nick9822 pushed a commit to nick9822/flutter that referenced this pull request Dec 18, 2024
…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.
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.

[web:a11y] switch header from role "heading" to role "banner"
2 participants