empty labeled header is a heading

Author: yjbanov

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

@@ -20,7 +20,7 @@ class SemanticHeading extends SemanticRole {
 
   @override
   DomElement createElement() {
-    final element = createDomElement('h${semanticsObject.headingLevel}');
+    final element = createDomElement('h${semanticsObject.effectiveHeadingLevel}');
     element.style
       // Browser adds default non-zero margins/paddings to <h*> tags, which
       // affects the size of the element. As the element size is fully defined

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

@@ -1122,11 +1122,23 @@ class SemanticsObject {
     _dirtyFields |= _platformViewIdIndex;
   }
 
-  /// See [ui.SemanticsUpdateBuilder.updateNode].
-  int get headingLevel => _headingLevel;
+  // This field is not exposed publicly because code that applies heading levels
+  // should use [effectiveHeadingLevel] instead.
   int _headingLevel = 0;
 
-  int get effectiveHeadingLevel => isHeader ? 2 : headingLevel;
+  /// The effective heading level value to be used when rendering this node as
+  /// a heading.
+  ///
+  /// If a heading is rendered from a header, uses heading level 2.
+  int get effectiveHeadingLevel {
+    if (_headingLevel != 0) {
+      return _headingLevel;
+    } else {
+      // This branch may be taken when a heading is rendered from a header,
+      // where the heading level is not provided.
+      return 2;
+    }
+  }
 
   static const int _headingLevelIndex = 1 << 24;
 
@@ -1137,6 +1149,36 @@ class SemanticsObject {
     _dirtyFields |= _headingLevelIndex;
   }
 
+  /// Whether this object represents a heading.
+  ///
+  /// Typically, a heading is a prominent piece of text that provides a title
+  /// for a section in the UI.
+  ///
+  /// Labeled empty headers are treated as headings too.
+  ///
+  /// See also:
+  ///
+  /// * [isHeader], which also describes the rest of the screen, and is
+  ///   sometimes presented to the user as a heading.
+  bool get isHeading => _headingLevel != 0 || isHeader && hasLabel && !hasChildren;
+
+  /// Whether this object represents a header.
+  ///
+  /// A header is used for one of two purposes:
+  ///
+  /// * Introduce the content of the main screen or a page. In this case, the
+  ///   header is a, possibly labeled, container of widgets that together
+  ///   provide the description of the screen.
+  /// * Provide a heading (like [isHeading]). Native mobile apps do not have a
+  ///   notion of "heading". It is common to mark headings as headers instead
+  ///   and the screen readers will announce "heading". Labeled empty headers
+  ///   are treated as heading by the web engine.
+  ///
+  /// See also:
+  ///
+  ///  * [isHeading], which determines whether this node represents a heading.
+  bool get isHeader => hasFlag(ui.SemanticsFlag.isHeader);
+
   /// See [ui.SemanticsUpdateBuilder.updateNode].
   String? get identifier => _identifier;
   String? _identifier;
@@ -1272,39 +1314,9 @@ class SemanticsObject {
   /// Whether this object represents an editable text field.
   bool get isTextField => hasFlag(ui.SemanticsFlag.isTextField);
 
-  /// Whether this object represents a heading.
-  ///
-  /// Typically, a heading is a prominent piece of text that provides a title
-  /// for a section in the UI.
-  ///
-  /// Labeled empty headers are treated as headings too.
-  ///
-  /// See also:
-  ///
-  /// * [isHeader], which also describes the rest of the screen, and is
-  ///   sometimes presented to the user as a heading.
-  bool get isHeading => headingLevel != 0 || isHeader && hasLabel && !hasChildren;
-
   /// Whether this object represents an interactive link.
   bool get isLink => hasFlag(ui.SemanticsFlag.isLink);
 
-  /// Whether this object represents a header.
-  ///
-  /// A header is used for one of two purposes:
-  ///
-  /// * Introduce the content of the main screen or a page. In this case, the
-  ///   header is a, possibly labeled, container of widgets that together
-  ///   provide the description of the screen.
-  /// * Provide a heading (like [isHeading]). Native mobile apps do not have a
-  ///   notion of "heading". It is common to mark headings as headers instead
-  ///   and the screen readers will announce "heading". Labeled empty headers
-  ///   are treated as heading by the web engine.
-  ///
-  /// See also:
-  ///
-  ///  * [isHeading], which determines whether this node represents a heading.
-  bool get isHeader => hasFlag(ui.SemanticsFlag.isHeader);
-
   /// Whether this object needs screen readers attention right away.
   bool get isLiveRegion =>
       hasFlag(ui.SemanticsFlag.isLiveRegion) &&

lib/web_ui/test/engine/semantics/semantics_test.dart

@@ -742,7 +742,7 @@ class MockSemanticsEnabler implements SemanticsEnabler {
 }
 
 void _testHeader() {
-  test('renders a header with a label and uses a sized span for label', () {
+  test('renders an empty labeled header as a heading with a label and uses a sized span for label', () {
     semantics()
       ..debugOverrideTimestampFunction(() => _testTime)
       ..semanticsEnabled = true;
@@ -757,9 +757,27 @@ void _testHeader() {
     );
 
     owner().updateSemantics(builder.build());
-    expectSemanticsTree(owner(), '''
-<header><span>Header of the page</span></header>
-''');
+    expectSemanticsTree(owner(), '<h2>Header of the page</span></h2>');
+
+    semantics().semanticsEnabled = false;
+  });
+
+  // This is a useless case, but we should at least not crash if it happens.
+  test('renders an empty unlabeled header', () {
+    semantics()
+      ..debugOverrideTimestampFunction(() => _testTime)
+      ..semanticsEnabled = true;
+
+    final ui.SemanticsUpdateBuilder builder = ui.SemanticsUpdateBuilder();
+    updateNode(
+      builder,
+      flags: 0 | ui.SemanticsFlag.isHeader.index,
+      transform: Matrix4.identity().toFloat64(),
+      rect: const ui.Rect.fromLTRB(0, 0, 100, 50),
+    );
+
+    owner().updateSemantics(builder.build());
+    expectSemanticsTree(owner(), '<header></header>');
 
     semantics().semanticsEnabled = false;
   });