Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature request: d2l-button-link component #1255

Open
dlockhart opened this issue Apr 5, 2021 · 0 comments
Open

Feature request: d2l-button-link component #1255

dlockhart opened this issue Apr 5, 2021 · 0 comments
Labels
enhancement New feature or request

Comments

@dlockhart
Copy link
Member

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:
image

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
@dlockhart dlockhart added the enhancement New feature or request label Apr 5, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

1 participant