feat: Section and IFrame implements HasAriaLabel (#18590)

Fixes #17876
vaadin · Feb 2, 2024 · f8f74e6 · f8f74e6
1 parent 2c6d036
commit f8f74e6
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 10 deletions.
diff --git a/flow-html-components/src/main/java/com/vaadin/flow/component/html/IFrame.java b/flow-html-components/src/main/java/com/vaadin/flow/component/html/IFrame.java
@@ -15,6 +15,7 @@
  */
 package com.vaadin.flow.component.html;
 
+import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HtmlComponent;
 import com.vaadin.flow.component.PropertyDescriptor;
 import com.vaadin.flow.component.PropertyDescriptors;
@@ -35,7 +36,7 @@
  *      Inline Frame element</a>
  */
 @Tag(Tag.IFRAME)
-public class IFrame extends HtmlComponent {
+public class IFrame extends HtmlComponent implements HasAriaLabel {
 
     private static final PropertyDescriptor<String, String> srcDescriptor = PropertyDescriptors
             .attributeWithDefault("src", "");

diff --git a/flow-html-components/src/main/java/com/vaadin/flow/component/html/Section.java b/flow-html-components/src/main/java/com/vaadin/flow/component/html/Section.java
@@ -17,6 +17,7 @@
 
 import com.vaadin.flow.component.ClickNotifier;
 import com.vaadin.flow.component.Component;
+import com.vaadin.flow.component.HasAriaLabel;
 import com.vaadin.flow.component.HasOrderedComponents;
 import com.vaadin.flow.component.HtmlContainer;
 import com.vaadin.flow.component.Tag;
@@ -29,7 +30,7 @@
  */
 @Tag(Tag.SECTION)
 public class Section extends HtmlContainer
-        implements ClickNotifier<Section>, HasOrderedComponents {
+        implements ClickNotifier<Section>, HasOrderedComponents, HasAriaLabel {
 
     /**
      * Creates a new empty section.

diff --git a/flow-html-components/src/test/java/com/vaadin/flow/component/html/IFrameTest.java b/flow-html-components/src/test/java/com/vaadin/flow/component/html/IFrameTest.java
@@ -56,4 +56,10 @@ public void reload() throws Exception {
 
         Mockito.verify(element).executeJs("this.src = this.src");
     }
+
+    @Test
+    @Override
+    public void testHasAriaLabelIsImplemented() {
+        super.testHasAriaLabelIsImplemented();
+    }
 }
diff --git a/flow-html-components/src/test/java/com/vaadin/flow/component/html/SectionTest.java b/flow-html-components/src/test/java/com/vaadin/flow/component/html/SectionTest.java
@@ -27,17 +27,18 @@ protected void addProperties() {
 
     @Test
     @Override
-    public void testHasOrderedComponents() {
-        super.testHasOrderedComponents();
+    public void testHasAriaLabelIsImplemented() {
+        super.testHasAriaLabelIsImplemented();
     }
 
     @Test
     @Override
-    public void testHasAriaLabelIsNotImplemented() {
-        // For most assistive technology it's fine to use aria-label or
-        // aria-labelledby on the <nav>, and <main> elements but not
-        // on <footer>, <section>, <article>, or <header>.
-        // Source: https://www.w3.org/TR/using-aria/#label-support
-        super.testHasAriaLabelIsNotImplemented();
+    public void testHasOrderedComponents() {
+        // According to this article:
+        // https://www.scottohara.me/blog/2021/07/16/section.html
+        // aria-label and aria-labelled-by are the best way to provide an
+        // accessible name
+        super.testHasOrderedComponents();
     }
+
 }