diff --git a/packages/main/src/Link.ts b/packages/main/src/Link.ts index 7b11102b6682..97ed465fedf8 100644 --- a/packages/main/src/Link.ts +++ b/packages/main/src/Link.ts @@ -56,6 +56,21 @@ type LinkAccessibilityAttributes = Pick`) and opens the specified URL in the given target frame (`target` property). * To specify where the linked content is opened, you can use the `target` property. * + * ### Navigation vs. Action + * + * The `ui5-link` supports two distinct use cases. Choosing the right one is important for accessibility: + * + * - **Navigation**: set the `href` property (and optionally `target`). The component behaves as a + * standard anchor tag, and the browser handles navigation, which also enables native + * affordances such as open-in-new-tab, copy link, and hover preview. + * - **Action**: when the link triggers an in-page action (for example, opening a dialog) instead of + * navigating, leave `href` unset and set `accessibleRole` to `"Button"`. This exposes the component + * with a `button` role, which assistive technologies activate reliably. + * + * **Note:** A link that triggers an action but keeps the default `"Link"` role (with no `href`) cannot be + * activated by some screen readers, such as JAWS in browse mode, because a link without `href` has + * no destination to navigate to. Always set `accessibleRole="Button"` for action-only links. + * * ### Responsive behavior * * If there is not enough space, the text of the `ui5-link` becomes truncated. @@ -202,7 +217,7 @@ class Link extends UI5Element implements ITabbable { /** * Defines the ARIA role of the component. * - * **Note:** Use the LinkAccessibleRole.Button role in cases when navigation is not expected to occur and the href property is not defined. + * **Note:** Set the role to LinkAccessibleRole.Button when the link triggers an action instead of navigating (when the href property is not defined). Otherwise, the component keeps the default "Link" role, and some screen readers (for example, JAWS in browse mode) cannot activate it, as a link with no href has no destination to navigate to. * @default "Link" * @public * @since 1.9.0