You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
While rare, there are certain scenarios where it makes sense for something to appear visually as a button but semantically be a link.
Here's one example:
Using semantic links (backed by the <a> element) have the advantage of appearing as a link to assistive technologies like screen readers and allowing users to right-click and open in a new tab (or Ctrl/Cmd-click it to do the same).
To accomplish this, we should introduce a <d2l-button-link> component.
The component will:
Take href and target attributes similar to d2l-link
Support the primary attribute to style it like a primary button
Take a text attribute for the stuff to put inside the <a> element instead of using a slot like <d2l-button> and <d2l-link> do. This gives us more control over.
Not extend the ButtonMixin like the other button-like components, since we don't want it to have button-only attributes like disabled, form, type, etc.
Expose and use buttonLinkStyles (similar to button-styles.js) such that the styles could just be applied directly to an <a class="d2l-button-link"> element
Support the FocusVisiblePolyfillMixin
Be a supported child of the <d2l-overflow-group> component
Have visual diff tests, unit tests, accessibility tests
Be included in the existing button documentation
The text was updated successfully, but these errors were encountered:
While rare, there are certain scenarios where it makes sense for something to appear visually as a button but semantically be a link.
Here's one example:
Using semantic links (backed by the
<a>
element) have the advantage of appearing as a link to assistive technologies like screen readers and allowing users to right-click and open in a new tab (or Ctrl/Cmd-click it to do the same).To accomplish this, we should introduce a
<d2l-button-link>
component.The component will:
href
andtarget
attributes similar tod2l-link
primary
attribute to style it like a primary buttontext
attribute for the stuff to put inside the<a>
element instead of using a slot like<d2l-button>
and<d2l-link>
do. This gives us more control over.ButtonMixin
like the other button-like components, since we don't want it to have button-only attributes likedisabled
,form
,type
, etc.buttonLinkStyles
(similar tobutton-styles.js
) such that the styles could just be applied directly to an<a class="d2l-button-link">
elementFocusVisiblePolyfillMixin
<d2l-overflow-group>
componentThe text was updated successfully, but these errors were encountered: