Describe your motivation

Icon-only buttons and badges should in most cases have tooltips that help users identify their purpose. For assistive technologies, the element also needs to have an accessible name, either as an internal text node, or through a aria-labelledby relationship to the tooltip.

The Button and Badge components achieve this in slightly different ways:

• Buttons have an ICON variant that only adjusts paddings without hiding text that may be set.
• Buttons have a setTooltipText method that create a tooltip associated with the button through aria-describedby.
• Badges have an ICON_ONLY variant that hides the text set on the badge, but keeps it available for screen readers.
• Badges can have tooltips through the Tooltip.forComponent(c) method, which also associates the tooltip through aria-describedby.

vaadin/flow-components#8905 proposes an API for changing the ARIA relationship of the tooltip to be aria-labelledby instead, which provides better conformance with the ARIA spec.

But there are problems with these approaches:

1. These two similar components have different ways of achieving the same thing.
2. Setting an aria-labelledby on a Badge replaces its entire text content, including the number if sets through the dedicated number property. Whenever the number updates, the tooltip would also need to be updated.
3. We're planning on making it easy to switch buttons and badges to icon-only mode automatically based on the viewport or container size. This means that the same component can be in normal or icon-only mode depending on that, and you typically don't want to show a tooltip for a button/badge that has the same text as is displayed inside it.

Describe the solution you'd like

• Introduce an ICON_ONLY variant to the Button component that hides the text part (but leaves it available to screen readers).
• Introduce an API for enabling automatic tooltips on Badges and Buttons (e.g. setAutomaticTooltip(true)) that
  • uses the component's text content (including the number on badges) as its text content, and
  • does not associate it with the component via ARIA attributes (making it invisible to screen readers, which can announce the component's text content instead).
• Display the tooltip only when the component is in ICON_ONLY mode.

While we don't want a component style variant to trigger any non-css side-effects in the component, this could be achieved by setting a css custom property (e.g. --vaadin-icon-only) in the variant's css, that the Tooltip reads to decide whether it's displayed.

This way, the following would render icon-only buttons and badges with tooltips that are only shown when they are in icon-only mode:

var btn = new Button("Close", VaadinIcon.CLOSE.create());
btn.addThemeVariants(ButtonVariant.ICON_ONLY);
btn.setAutomaticTooltip(true);

var badge = new Badge("Pending", VaadinIcon.CLOCK.create());
badge.addThemeVariants(BadgeVariant.ICON_ONLY);
badge.setAutomaticTooltip(true);

As an alternative to setting the property separately on each button/badge, we could also consider toggling it globally through a feature flag.

The same css custom property could also be used in media/container queries to achieve the viewport/container-size based automatic icon-only switching:

@media (max-width: 600px) {
  vaadin-button, vaadin-badge {
    --vaadin-icon-only: 1;
  }
}

NB: I have not spent much time thinking through this, and it might be a silly idea, but I wanted to get it written down to get the idea out of my head and to collect feedback.

Describe alternatives you've considered

No response

Additional context

No response