PlainLink

Structure

PlainLink renders as a native HTML <a> element by default, or through the application's provider-supplied link component when one is configured for client-side routing. When the as prop is set to "button", PlainLink renders a native HTML <button> instead. Rendering through these native elements gives PlainLink inherent keyboard interactivity and the correct accessible role, even though the component applies no visual styling of its own.

External links always render as an <a> element, bypassing the provider's link component, and have the safe HTML attributes target="_blank" and rel="noopener noreferrer" applied automatically so the destination page can't access the originating tab.

ARIA

Disabled

The native disabled attribute has no effect on <a> elements, so PlainLink relies on aria-disabled and tabIndex="-1" to communicate and enforce its disabled state consistently across both element types it can render as. Disabling a PlainLink removes it from the tab order, drops its href, and blocks the click event before it reaches any handler. The native disabled attribute is applied as well, which takes effect when PlainLink renders as a <button>.

Interactive elements

Nesting one interactive element inside another is bad practice with regards to accessibility. Assistive technology may behave unpredictably such as breaking keyboard navigation or skipping elements entirely. Additionally, mouse clicks become confusing as click events from nested elements may or may not bubble up and interfere with the user's intentions.

Be sure to limit PlainLink's children to static elements like text, icons, and images.

Keyboard