Skip to content

Instantly share code, notes, and snippets.

@TatuLund
Created April 17, 2023 06:12
Show Gist options
  • Select an option

  • Save TatuLund/03d9a8d70f17e03325f2c9dd53657dea to your computer and use it in GitHub Desktop.

Select an option

Save TatuLund/03d9a8d70f17e03325f2c9dd53657dea to your computer and use it in GitHub Desktop.
Example of tweaking Vaadin's loading indicator to be announced by NVDA screen reader in Windows
package org.vaadin.tatu;
import com.vaadin.flow.component.UI;
public class AccessibleLoadingIndicator {
private static void loading() {
UI.getCurrent().getPage().executeJs(
"""
const indicator = document.getElementsByClassName('v-loading-indicator ')[0];
if (indicator) {
const label = document.createElement('label');
label.innerText = 'Loading';
label.setAttribute('role','alert');
label.id = 'indicator-label'
label.style.top = '-1000px';
label.style.left = '-1000px';
label.style.position = 'absolute';
indicator.innerText = '';
indicator.appendChild(label);
indicator.setAttribute('aria-live','assertive');
indicator.setAttribute('aria-labelledby','indicator-label');
}
""");
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment