fix(tool-bar): ensure tooltip labels are reliably announced for icon-only controls

[michal-sanoma]

Summary

This PR fixes accessibility labeling in the Tool Bar stories where tooltip text was not consistently announced as the button name by screen readers.

Problem

In Tooltips and Icon Only stories, some icon-only controls relied on tooltip-based labeling only.
In certain browser/AT combinations, that setup is not reliably exposed as an accessible name.

Changes

Updated tooltip directive usage in the Tooltips story to use label relation (ariaRelation: 'label').
Added explicit aria-label fallbacks to icon-only sl-button and sl-menu-button examples in the tooltip-based Icon Only story.
Kept tooltip aria-labelledby wiring in place, so tooltip text still acts as the primary label where supported.
Removed an obsolete ESLint disable comment (slds/button-has-label).

[changeset-bot]

⚠️ No Changeset found

Latest commit: 184a031

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

💥 An error occurred when fetching the changed packages and changesets in this PR

Some errors occurred when validating the changesets config:
The package "@sl-design-system/grid" depends on the ignored package "@sl-design-system/example-data", but "@sl-design-system/grid" is not being ignored. Please add "@sl-design-system/grid" to the `ignore` option.

[github-actions]

🕸 Website preview

You can view a preview here (commit 184a031f7a1869384fc9370840c91391a6a1a9b4).

[github-actions]

🕸 Storybook preview

You can view a preview here (commit 184a031f7a1869384fc9370840c91391a6a1a9b4).

[Copilot]

Pull request overview

This PR updates the tool-bar Storybook stories to improve how icon-only controls are labeled for assistive technologies, focusing on tooltip-driven labeling patterns.

Changes:

• Removes a local disable for the slds/button-has-label ESLint rule in the tool-bar stories file.
• Updates tooltip-directive usage to explicitly use ariaRelation: 'label' for icon-only buttons.
• Adds explicit aria-label attributes to icon-only sl-button / sl-menu-button examples that also use tooltips.

Comments suppressed due to low confidence (2)

packages/components/tool-bar/src/tool-bar.stories.ts:545

• For sl-menu-button, the host aria-label may be forwarded to the inner sl-button, but the explicit aria-labelledby still takes precedence for the accessible name. If the goal is a reliable label from aria-label, consider using aria-describedby for the tooltip hookup and leaving aria-label as the name source.

          <sl-menu-button aria-label="Settings" aria-labelledby="tooltip-settings" fill="outline">
            <sl-icon name="far-gear" slot="button"></sl-icon>
            <sl-menu-item>
              <sl-icon name="far-pen"></sl-icon>
              Rename...

packages/components/tool-bar/src/tool-bar.stories.ts:558

• Same concern as the Settings menu-button: with both aria-label and aria-labelledby present, aria-labelledby will generally override the new aria-label. If you want aria-label to be the stable accessible name and the tooltip to remain an additional hint, prefer aria-describedby for the tooltip relation.

          <sl-menu-button aria-label="Edit" aria-labelledby="tooltip-edit" fill="outline">
            <sl-icon name="far-pen" slot="button"></sl-icon>
            <sl-menu-item>
              <sl-icon name="far-pen"></sl-icon>
              Rename...

[Copilot]

Pull request overview

Copilot reviewed 1 out of 1 changed files in this pull request and generated no new comments.

[a11ymiko]

This change fixes the issue with accessibility names of buttons not being announced, but it can be improved to use aria-labelledby instead of aria-label. Issue for that improvement #3275

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 4 comments.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 3 comments.

[Copilot]

Pull request overview

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

[a11ymiko]

Great work!
I'd like only to add aria-hidden='true' to each <span> that has tooltip's text. This way when user would use screen reader's Browse mode instead of Focus mode still only buttons with accessibility names would be focusable and spans would be ignored.
Is this possible to add this aria-haidden='true' for span?

[michal-sanoma]

Closing due to #3368