Skip to content

Instantly share code, notes, and snippets.

@TatuLund
Created June 11, 2024 05:37
Show Gist options
  • Save TatuLund/75920b7177db6e0fd416eb2241fec0cb to your computer and use it in GitHub Desktop.
Save TatuLund/75920b7177db6e0fd416eb2241fec0cb to your computer and use it in GitHub Desktop.
Accessibility makes things less obvious. It is trivial to use Spinner in Button component by just using button.setIcon(new Spinner()). But that is not accessible. Spinner does have aria alert label, but it wont be announced when Spinner is a child of disabled button. Hence Spinner needs to be placed outside button. Here is an example how to do it.
package org.vaadin.addons.componentfactory.spinner;
/*
Add this depenency to get Spinner component
<dependency>
<groupId>org.vaadin.addons.componentfactory</groupId>
<artifactId>spinner</artifactId>
<version>24.1.0</version>
</dependency>
*/
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.html.Div;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.dom.Style.Position;
import com.vaadin.flow.router.Route;
@Route("button")
public class SpinnerButton extends VerticalLayout {
public SpinnerButton() {
setSizeFull();
setJustifyContentMode(JustifyContentMode.CENTER);
setAlignItems(Alignment.CENTER);
Div div = new Div();
div.getStyle().setPosition(Position.RELATIVE);
Button button = new Button("Click");
button.setWidth("50px");
button.addClickListener(e -> {
button.setText(null);
Spinner spinner = new Spinner();
// I recommend to move the styles to your CSS file in a real app.
spinner.getStyle().setTop("10px");
spinner.getStyle().setLeft("24px");
spinner.getStyle().setPosition(Position.ABSOLUTE);
div.add(spinner);
});
button.setDisableOnClick(true);
div.add(button);
add(div);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment