WCF icon indicating copy to clipboard operation
WCF copied to clipboard

Strip all styling from `<button>`

Open dtdesign opened this issue 3 years ago • 0 comments

The button element is incredibly versatile and benefits from good a11y when used correctly. However, the current default styling creates all sort of issues that makes <button> not feasible in most cases. The alternative is to resort to a[href="#"] with role="button" plus extra event listeners to handle the keyboard interaction.

  • [x] Strip the default styling from <button>.
  • [x] Disable the default appearance of buttons to make them easier to style.
  • [x] Add the .button class to all elements that should continue to look like a button.
  • [ ] Convert a[href="#"] into <button>, this includes stripping extra keydown events that are no longer required.
  • [ ] Convert non-link buttons (*) into <button>.

(*) Non-link buttons are HTML constructs such as span.pointer that pretend to be buttons but do not fully behave like those.

dtdesign avatar May 29 '22 14:05 dtdesign