Replace .sr-only with .visually-hidden, use static Helper.screenReade…

…rOnly class where applicable, fix SpinnerAjax(Button|Link) label rendering (#1010) * Only add class .sr-only when the label is empty - check in onConfigure * Update helper class name for screenReaderOnly content * Replace .sr-only -> .visually-hidden, use static Helper where applicable * rename all references from "srOnly" to "visuallyHidden" for consistency
martin-g · Dec 5, 2023 · a0c58cf · a0c58cf
1 parent 0868fa8
commit a0c58cf
Show file tree

Hide file tree

Showing 10 changed files with 30 additions and 18 deletions.
diff --git a/...in/java/de/agilecoders/wicket/core/markup/html/bootstrap/button/dropdown/SplitButton.html b/...in/java/de/agilecoders/wicket/core/markup/html/bootstrap/button/dropdown/SplitButton.html
@@ -7,7 +7,7 @@
             <button type="button" class="btn" wicket:id="button"></button>
             <button type="button" class="btn dropdown-toggle dropdown-toggle-split" wicket:id="caret" 
                     data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-                <span class="sr-only"></span>
+                <span class="visually-hidden"></span>
             </button>
             <div wicket:id="dropdown-menu" class="dropdown-menu">
                 <wicket:container wicket:id="buttons">

diff --git a/...main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.html b/...main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html xmlns:wicket="http://wicket.apache.org">
     <body>
-        <wicket:panel><span wicket:id="srOnly" class="sr-only"></span></wicket:panel>
+        <wicket:panel><span wicket:id="visuallyHidden"></span></wicket:panel>
     </body>
 </html>
diff --git a/...main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.java b/...main/java/de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/Stack.java
@@ -1,5 +1,6 @@
 package de.agilecoders.wicket.core.markup.html.bootstrap.components.progress;
 
+import org.apache.wicket.AttributeModifier;
 import org.apache.wicket.markup.ComponentTag;
 import org.apache.wicket.markup.head.IHeaderResponse;
 import org.apache.wicket.markup.head.OnDomReadyHeaderItem;
@@ -9,6 +10,7 @@
 
 import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
 import de.agilecoders.wicket.core.util.Attributes;
+import de.agilecoders.wicket.core.util.CssClassNames.Helper;
 
 /**
  * Represents a stack of the progress bar.
@@ -19,7 +21,7 @@ public class Stack extends GenericPanel<Integer> {
     /**
      * A label for the stack's progress
      */
-    private Label srOnly;
+    private Label visuallyHidden;
 
     /**
      * The color type of the stack
@@ -56,8 +58,9 @@ public Stack(String id, IModel<Integer> model) {
     protected void onInitialize() {
         super.onInitialize();
 
-        srOnly = new Label("srOnly", createLabelModel());
-        add(srOnly);
+        visuallyHidden = new Label("visuallyHidden", createLabelModel());
+        visuallyHidden.add(AttributeModifier.append("class", Helper.visuallyHidden));
+        add(visuallyHidden);
     }
 
     public BackgroundColorBehavior.Color color() {
@@ -105,7 +108,7 @@ protected void onConfigure() {
         super.onConfigure();
 
         if (labeled()) {
-            srOnly.setRenderBodyOnly(true);
+            visuallyHidden.setRenderBodyOnly(true);
         }
     }
 

diff --git a/bootstrap-core/src/main/java/de/agilecoders/wicket/core/util/CssClassNames.java b/bootstrap-core/src/main/java/de/agilecoders/wicket/core/util/CssClassNames.java
@@ -236,7 +236,7 @@ public boolean contains(final String className) {
     @SuppressWarnings("UnusedDeclaration")
     public static final class Helper {
         public static final String clearfix = "clearfix";
-        public static final String screenReaderOnly = "sr-only";
+        public static final String visuallyHidden = "visually-hidden";
     }
 
     @SuppressWarnings("UnusedDeclaration")

diff --git a/...de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBarTest.java b/...de/agilecoders/wicket/core/markup/html/bootstrap/components/progress/ProgressBarTest.java
@@ -7,6 +7,7 @@
 
 import de.agilecoders.wicket.core.WicketApplicationTest;
 import de.agilecoders.wicket.core.markup.html.bootstrap.utilities.BackgroundColorBehavior;
+import de.agilecoders.wicket.core.util.CssClassNames.Helper;
 
 /**
  * Tests for ProgressBar
@@ -58,7 +59,7 @@ void progressBarWithDefaultStackMarkup() {
         assertEquals("" + ProgressBar.MIN, stackTester.getAttribute("aria-valuemin"));
         assertEquals("" + ProgressBar.MAX, stackTester.getAttribute("aria-valuemax"));
 
-        TagTester stackLabelTester = stackTester.getChild("class", "sr-only");
+        TagTester stackLabelTester = stackTester.getChild("class", Helper.visuallyHidden);
         assertEquals("" + progress + "%", stackLabelTester.getValue());
     }
 

diff --git a/...ava/de/agilecoders/wicket/extensions/markup/html/bootstrap/spinner/SpinnerAjaxButton.java b/...ava/de/agilecoders/wicket/extensions/markup/html/bootstrap/spinner/SpinnerAjaxButton.java
@@ -11,6 +11,7 @@
 
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxButton;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
+import de.agilecoders.wicket.core.util.CssClassNames.Helper;
 
 /**
  * A specialization of {@link de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxButton}
@@ -103,11 +104,11 @@ protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
     }
 
     @Override
-    protected <L extends Serializable> Component newLabel(String markupId, IModel<L> model) {
-        Component label = super.newLabel(markupId, model);
+    protected void onConfigure() {
+    	super.onConfigure();
+    	Component label = get("label");
         if (Strings.isEmpty(label.getDefaultModelObjectAsString())) {
-            label.add(AttributeModifier.append("class", "sr-only"));
+        	label.add(AttributeModifier.append("class", Helper.visuallyHidden));
         }
-        return label;
     }
 }
diff --git a/.../java/de/agilecoders/wicket/extensions/markup/html/bootstrap/spinner/SpinnerAjaxLink.java b/.../java/de/agilecoders/wicket/extensions/markup/html/bootstrap/spinner/SpinnerAjaxLink.java
@@ -10,6 +10,7 @@
 
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink;
 import de.agilecoders.wicket.core.markup.html.bootstrap.button.Buttons;
+import de.agilecoders.wicket.core.util.CssClassNames.Helper;
 
 /**
  * A specialization of {@link de.agilecoders.wicket.core.markup.html.bootstrap.button.BootstrapAjaxLink}
@@ -94,9 +95,15 @@ protected void updateAjaxAttributes(AjaxRequestAttributes attributes) {
     protected <L extends Serializable> Component newLabel(String markupId, IModel<L> model) {
         Component label = super.newLabel(markupId, model);
         label.setRenderBodyOnly(false);
+        return label;
+    }
+
+    @Override
+    protected void onConfigure() {
+    	super.onConfigure();
+    	Component label = get("label");
         if (Strings.isEmpty(label.getDefaultModelObjectAsString())) {
-            label.add(AttributeModifier.append("class", "sr-only"));
+        	label.add(AttributeModifier.append("class", Helper.visuallyHidden));
         }
-        return label;
     }
 }
diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/BasePage.html
@@ -13,7 +13,7 @@
 
     <body style="padding-top: 60px">
         <a name="top" style="display: none;"></a>
-        <a class="sr-only" href="#content">Skip navigation</a>
+        <a class="visually-hidden" href="#content">Skip navigation</a>
 
         <header wicket:id="navbar" class="bs-docs-nav"></header>
 

diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/ComponentsPage.html
@@ -1538,14 +1538,14 @@ <h3>Pills</h3>
         <div class="mb-2 p-2">
             <a href="#" wicket:id="button-with-badge">
                 Submit <span wicket:id="badge"></span>
-                <span class="sr-only">unread messages</span>
+                <span class="visually-hidden">unread messages</span>
             </a>
         </div>
 
         <pre class="prettyprint linenum">
             &lt;button wicket:id="badge-button"&gt;
                 Submit &lt;span wicket:id="button-count"&gt;&lt;/span&gt;
-                &lt;span class="sr-only"&gt;unread messages&lt;/span&gt;
+                &lt;span class="visually-hidden"&gt;unread messages&lt;/span&gt;
             &lt;/button&gt;
         </pre>
     </div>

diff --git a/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SelectPage.html b/bootstrap-samples/src/main/java/de/agilecoders/wicket/samples/pages/SelectPage.html
@@ -82,7 +82,7 @@ <h2>Example</h2>
                                     <div class="modal-header">
                                         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
                                         <button type="button" class="btn-close" data-bs-dismiss="modal">
-                                            <span class="sr-only">Close</span>
+                                            <span class="visually-hidden">Close</span>
                                         </button>
                                     </div>
                                     <div class="modal-body">