Skip to content

Commit

Permalink
Replace .sr-only with .visually-hidden, use static Helper.screenReade…
Browse files Browse the repository at this point in the history
…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
vrozkovec authored Dec 5, 2023
1 parent 0868fa8 commit a0c58cf
Showing 10 changed files with 30 additions and 18 deletions.
Original file line number Diff line number Diff line change
@@ -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">
Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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);
}
}

Original file line number Diff line number Diff line change
@@ -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")
Original file line number Diff line number Diff line change
@@ -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());
}

Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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;
}
}
Original file line number Diff line number Diff line change
@@ -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>

Original file line number Diff line number Diff line change
@@ -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>
Original file line number Diff line number Diff line change
@@ -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">

0 comments on commit a0c58cf

Please sign in to comment.