Skip to content

feat!: make disabled buttons and menu items accessible by default #9967

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
vursen wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

feat!: make disabled buttons and menu items accessible by default #9967

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 12 additions & 82 deletions ...flow-parent/vaadin-button-flow/src/main/java/com/vaadin/flow/component/button/Button.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@
*/
package com.vaadin.flow.component.button;

import com.vaadin.experimental.Feature;
import com.vaadin.experimental.FeatureFlags;
import com.vaadin.flow.component.ClickEvent;
import com.vaadin.flow.component.ClickNotifier;
import com.vaadin.flow.component.Component;
Expand All @@ -33,7 +31,6 @@
import com.vaadin.flow.component.SignalPropertySupport;
import com.vaadin.flow.component.Tag;
import com.vaadin.flow.component.Text;
import com.vaadin.flow.component.UI;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.dependency.NpmPackage;
import com.vaadin.flow.component.html.Image;
Expand Down Expand Up @@ -452,24 +449,11 @@ public boolean isDisableOnClick() {

/**
* Sets the button explicitly disabled or enabled. When disabled, the button
* is rendered as "dimmed".
* <p>
* By default, disabled buttons are not focusable and don't react to hover.
* As a result, they are hidden from assistive technologies, and it's not
* possible to show a tooltip to explain why they are disabled. This can be
* addressed by enabling the feature flag {@code accessibleDisabledButtons},
* which makes disabled buttons focusable and hoverable, while still
* preventing them from being activated. To enable this feature flag, add
* the following line to
* {@code src/main/resources/vaadin-featureflags.properties}:
*
* <pre>
* com.vaadin.experimental.accessibleDisabledButtons = true
* </pre>
* is rendered as "dimmed" and prevented from being activated. Disabled
* buttons remain focusable and hoverable, so they stay visible to assistive
* technologies and can show a tooltip to explain why they are disabled.
* Focus events and focus shortcuts also remain active for disabled buttons.
*
* This feature flag will also enable focus events and focus shortcuts for
* disabled buttons.
*
* @since 24.3.8
*/
@Override
Expand Down Expand Up @@ -506,85 +490,49 @@ public SignalBinding<Boolean> bindEnabled(Signal<Boolean> enabledSignal) {
/**
* {@inheritDoc}
* <p>
* By default, focus shortcuts are only active when the button is enabled.
* To make disabled buttons also focusable, enable the following feature
* flag in {@code src/main/resources/vaadin-featureflags.properties}:
*
* <pre>
* com.vaadin.experimental.accessibleDisabledButtons = true
* </pre>
* Focus shortcuts are also active when the button is disabled.
*
* This feature flag will enable focus events and focus shortcuts for
* disabled buttons.
*
* @since 24.7
*/
@Override
public ShortcutRegistration addFocusShortcut(Key key,
KeyModifier... keyModifiers) {
ShortcutRegistration registration = Focusable.super.addFocusShortcut(
key, keyModifiers);
if (isFeatureFlagEnabled(FeatureFlags.ACCESSIBLE_DISABLED_BUTTONS)) {
registration.setDisabledUpdateMode(DisabledUpdateMode.ALWAYS);
}
registration.setDisabledUpdateMode(DisabledUpdateMode.ALWAYS);
return registration;
}

/**
* {@inheritDoc}
* <p>
* By default, buttons are only focusable in the enabled state. To make
* disabled buttons also focusable, enable the following feature flag in
* {@code src/main/resources/vaadin-featureflags.properties}:
* Focus events are also fired when the button is disabled.
*
* <pre>
* com.vaadin.experimental.accessibleDisabledButtons = true
* </pre>
*
* This feature flag will enable focus events and focus shortcuts for
* disabled buttons.
*
* @since 24.7
*/
@SuppressWarnings({ "unchecked", "rawtypes" })
@Override
public Registration addFocusListener(
ComponentEventListener<FocusEvent<Button>> listener) {
return getEventBus().addListener(FocusEvent.class,
(ComponentEventListener) listener, registration -> {
if (isFeatureFlagEnabled(
FeatureFlags.ACCESSIBLE_DISABLED_BUTTONS)) {
registration.setDisabledUpdateMode(
DisabledUpdateMode.ALWAYS);
}
});
(ComponentEventListener) listener, registration -> registration
.setDisabledUpdateMode(DisabledUpdateMode.ALWAYS));
}

/**
* {@inheritDoc}
* <p>
* By default, buttons are only focusable in the enabled state. To make
* disabled buttons also focusable, enable the following feature flag in
* {@code src/main/resources/vaadin-featureflags.properties}:
* Blur events are also fired when the button is disabled.
*
* <pre>
* com.vaadin.experimental.accessibleDisabledButtons = true
* </pre>
*
* @since 24.7
*/
@SuppressWarnings({ "unchecked", "rawtypes" })
@Override
public Registration addBlurListener(
ComponentEventListener<BlurEvent<Button>> listener) {
return getEventBus().addListener(BlurEvent.class,
(ComponentEventListener) listener, registration -> {
if (isFeatureFlagEnabled(
FeatureFlags.ACCESSIBLE_DISABLED_BUTTONS)) {
registration.setDisabledUpdateMode(
DisabledUpdateMode.ALWAYS);
}
});
(ComponentEventListener) listener, registration -> registration
.setDisabledUpdateMode(DisabledUpdateMode.ALWAYS));
}

private void updateIconSlot() {
Expand Down Expand Up @@ -628,24 +576,6 @@ private void updateThemeAttribute() {
}
}

/**
* Checks whether the given feature flag is active.
*
* @param feature
* the feature flag to check
* @return {@code true} if the feature flag is active, {@code false}
* otherwise
*/
private boolean isFeatureFlagEnabled(Feature feature) {
UI ui = UI.getCurrent();
if (ui == null) {
return false;
}

return FeatureFlags.get(ui.getSession().getService().getContext())
.isEnabled(feature);
}

/**
* Checks whether the component is icon-only, which is needed for automatic
* assignment of icon slot name and theme attribute.
Expand Down
56 changes: 3 additions & 53 deletions ...ow/src/test/java/com/vaadin/flow/component/button/tests/AccessibleDisabledButtonTest.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@
import org.junit.jupiter.api.extension.RegisterExtension;
import org.mockito.Mockito;

import com.vaadin.experimental.FeatureFlags;
import com.vaadin.flow.component.Component;
import com.vaadin.flow.component.ComponentEventListener;
import com.vaadin.flow.component.ComponentUtil;
Expand All @@ -31,15 +30,11 @@
import com.vaadin.flow.dom.Element;
import com.vaadin.flow.internal.JacksonUtils;
import com.vaadin.flow.internal.nodefeature.ElementListenerMap;
import com.vaadin.tests.EnableFeatureFlagExtension;
import com.vaadin.tests.MockUIExtension;

class AccessibleDisabledButtonTest {
@RegisterExtension
MockUIExtension ui = new MockUIExtension();
@RegisterExtension
EnableFeatureFlagExtension featureFlagExtension = new EnableFeatureFlagExtension(
FeatureFlags.ACCESSIBLE_DISABLED_BUTTONS);

private Button button = Mockito.spy(Button.class);

Expand All @@ -58,20 +53,7 @@ void setUp() {

@SuppressWarnings("unchecked")
@Test
void accessibleButtonsDisabled_focusListenerDisabled() {
featureFlagExtension.disableFeature();

button.addFocusListener(mockFocusListener);

fakeClientDomEvent(button, "focus");

Mockito.verify(mockFocusListener, Mockito.never())
.onComponentEvent(Mockito.any());
}

@SuppressWarnings("unchecked")
@Test
void accessibleButtonsEnabled_focusListenerEnabled() {
void focusListenerActiveWhenDisabled() {
button.addFocusListener(mockFocusListener);

fakeClientDomEvent(button, "focus");
Expand All @@ -82,20 +64,7 @@ void accessibleButtonsEnabled_focusListenerEnabled() {

@SuppressWarnings("unchecked")
@Test
void accessibleButtonsDisabled_blurListenerDisabled() {
featureFlagExtension.disableFeature();

button.addBlurListener(mockBlurListener);

fakeClientDomEvent(button, "blur");

Mockito.verify(mockBlurListener, Mockito.never())
.onComponentEvent(Mockito.any());
}

@SuppressWarnings("unchecked")
@Test
void accessibleButtonsEnabled_blurListenerEnabled() {
void blurListenerActiveWhenDisabled() {
button.addBlurListener(mockBlurListener);

fakeClientDomEvent(button, "blur");
Expand All @@ -105,26 +74,7 @@ void accessibleButtonsEnabled_blurListenerEnabled() {
}

@Test
void accessibleButtonsDisabled_focusShortcutDisabled() {
featureFlagExtension.disableFeature();

button.addFocusShortcut(Key.KEY_A);
ui.add(button);
ui.fakeClientCommunication();

var keydownEvent = new KeyDownEvent(button, "A"); // actual key of the
// event doesn't
// matter with this
// test setup, as the
// filtering happens
// on the client side
ComponentUtil.fireEvent(ui.getUI(), keydownEvent);

Mockito.verify(button, Mockito.never()).focus();
}

@Test
void accessibleButtonsEnabled_focusShortcutEnabled() {
void focusShortcutActiveWhenDisabled() {
button.addFocusShortcut(Key.KEY_A);
ui.add(button);
ui.fakeClientCommunication();
Expand Down
1 change: 0 additions & 1 deletion ...din-context-menu-flow-integration-tests/src/main/resources/vaadin-featureflags.properties
View file
Open in desktop

This file was deleted.

38 changes: 0 additions & 38 deletions ...com/vaadin/flow/component/contextmenu/AccessibleDisabledMenuItemsFeatureFlagProvider.java
View file
Open in desktop

This file was deleted.

18 changes: 4 additions & 14 deletions ...aadin-context-menu-flow/src/main/java/com/vaadin/flow/component/contextmenu/MenuItem.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,21 +47,11 @@ protected SubMenu createSubMenu() {

/**
* Sets the menu item explicitly disabled or enabled. When disabled, menu
* items are rendered as "dimmed".
* <p>
* By default, disabled items are not focusable and don't react to hover. As
* a result, they are hidden from assistive technologies, and it's not
* possible to show a tooltip to explain why they are disabled. This can be
* addressed by enabling the feature flag
* {@code accessibleDisabledMenuItems}, which makes disabled items focusable
* and hoverable, while still preventing them from being activated. To
* enable this feature flag, add the following line to
* {@code src/main/resources/vaadin-featureflags.properties}:
* items are rendered as "dimmed" and prevented from being activated.
* Disabled items remain focusable and hoverable, so they stay visible to
* assistive technologies and can show a tooltip to explain why they are
* disabled.
*
* <pre>
* com.vaadin.experimental.accessibleDisabledMenuItems = true
* </pre>
*
* @since 25.2
*/
@Override
Expand Down
1 change: 0 additions & 1 deletion ...enu-flow/src/main/resources/META-INF/services/com.vaadin.experimental.FeatureFlagProvider
View file
Open in desktop

This file was deleted.

2 changes: 0 additions & 2 deletions .../vaadin-menu-bar-flow-integration-tests/src/main/resources/vaadin-featureflags.properties
View file
Open in desktop

This file was deleted.

21 changes: 4 additions & 17 deletions ...ent/vaadin-menu-bar-flow/src/main/java/com/vaadin/flow/component/menubar/MenuBarItem.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,23 +43,10 @@ protected MenuBarSubMenu createSubMenu() {

/**
* Sets the menu item explicitly disabled or enabled. When disabled, menu
* bar items are rendered as "dimmed".
* <p>
* By default, disabled items are not focusable and don't react to hover. As
* a result, they are hidden from assistive technologies, and it's not
* possible to show a tooltip to explain why they are disabled. This can be
* addressed by enabling several feature flags, which make disabled items
* focusable and hoverable, while still preventing them from being
* activated. To enable the feature flags, add the following lines to
* {@code src/main/resources/vaadin-featureflags.properties}:
*
* <pre>
* # Allow focus and hover interactions with disabled menu bar root items (buttons)
* com.vaadin.experimental.accessibleDisabledButtons = true
*
* # Allow focus and hover interactions with disabled menu bar sub-menu items
* com.vaadin.experimental.accessibleDisabledMenuItems = true
* </pre>
* bar items are rendered as "dimmed" and prevented from being activated.
* Disabled items remain focusable and hoverable, so they stay visible to
* assistive technologies and can show a tooltip to explain why they are
* disabled.
*/
@Override
public void setEnabled(boolean enabled) {
Expand Down
Loading