Skip to content

Latest commit

 

History

History
30 lines (25 loc) · 945 Bytes

dev-notes.md

File metadata and controls

30 lines (25 loc) · 945 Bytes

We use the native button element for the component library. This means that the browser will apply default styles to the button. We want to remove these default styles so that we can control the look and feel of the button.

It also makes our custom component inherit the accessibility features of the native button element. This means we don't need to add those features ourselves.

If we were to use a div element instead of a button element, we would need to add the accessibility features ourselves like this, assuming we used a div element:

<div role="button" tabindex="0" aria-disabled="false">
  <span>Click me</span>
</div>
div.addEventListener('keydown', (e) => {
  // The ENTER key
  if (e.keyCode === 13) {
    // do something
  }
});
div.addEventListener('keyup', (e) => {
  // The SPACE key
  if (e.keyCode === 32) {
    // do something
  }
});

div.addEventListener('click', () => {
  // do something
});