pinafore/src/routes/_components/IconButton.html

<!-- Toggle buttons should have an immutable label, e.g. a mute/unmute button should just always say
     "mute." For sighted users, though, I think it's nice if the title changes when the action changes.
     See http://w3c.github.io/aria-practices/#button
     We also have toggleButton === false which can make it just a normal button that changes its aria-label.
     -->
<button type="button"
        {title}
        aria-label={ariaLabel}
        aria-pressed={ariaPressed}
        aria-hidden={ariaHidden ? 'true' : undefined}
        tabindex="{ariaHidden ? '-1' : '0'}"
        class={computedClass}
        {disabled}
        ref:node
>
  <SvgIcon className="icon-button-svg {svgClassName || ''}" ref:svg {href} />
</button>
<style>
  .icon-button {
    padding: 6px 10px;
    background: none;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  :global(.icon-button-svg) {
    width: 24px;
    height: 24px;
    fill: var(--action-button-fill-color);
    pointer-events: none; /* hack for Edge */
  }

  :global(.icon-button.big-icon .icon-button-svg) {
    width: 32px;
    height: 32px;
  }

  /*
   * regular styles
   */

  :global(.icon-button:hover .icon-button-svg) {
    fill: var(--action-button-fill-color-hover);
  }

  :global(.icon-button.not-pressable:active .icon-button-svg,
  .icon-button.same-pressed:active .icon-button-svg) {
    fill: var(--action-button-fill-color-active);
  }

  :global(.icon-button.pressed.not-same-pressed .icon-button-svg) {
    fill: var(--action-button-fill-color-pressed);
  }

  :global(.icon-button.pressed.not-same-pressed:hover .icon-button-svg) {
    fill: var(--action-button-fill-color-pressed-hover);
  }

  :global(.icon-button.pressed.not-same-pressed:active .icon-button-svg) {
    fill: var(--action-button-fill-color-pressed-active);
  }

  /*
   * muted
   */

  :global(.icon-button.muted-style .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color);
  }

  :global(.icon-button.muted-style:hover .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-hover);
  }

  :global(.icon-button.muted-style.not-pressable:active .icon-button-svg,
  .icon-button.muted-style.same-pressed:active .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-active);
  }

  :global(.icon-button.muted-style.pressed.not-same-pressed .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-pressed);
  }

  :global(.icon-button.muted-style.pressed.not-same-pressed:hover .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-pressed-hover);
  }

  :global(.icon-button.muted-style.pressed.not-same-pressed:active .icon-button-svg) {
    fill: var(--action-button-deemphasized-fill-color-pressed-active);
  }

</style>
<script>
  import { classname } from '../_utils/classname'
  import { store } from '../_store/store'
  import SvgIcon from './SvgIcon.html'

  export default {
    oncreate () {
      const { clickListener, elementId } = this.get()
      if (clickListener) {
        this.onClick = this.onClick.bind(this)
        this.refs.node.addEventListener('click', this.onClick)
      }
      if (elementId) {
        this.refs.node.setAttribute('id', elementId)
      }
      if (process.env.NODE_ENV !== 'production') {
        const { pressable, pressedLabel, label } = this.get()
        if (pressable && ((!pressedLabel || !label) || pressedLabel === label)) {
          throw new Error('pressable buttons should have a label and a pressedLabel different from each other')
        }
      }
    },
    ondestroy () {
      const { clickListener } = this.get()
      if (clickListener) {
        this.refs.node.removeEventListener('click', this.onClick)
      }
    },
    data: () => ({
      big: false,
      muted: false,
      disabled: false,
      svgClassName: undefined,
      elementId: undefined,
      pressable: false,
      pressed: false,
      pressedLabel: undefined,
      className: undefined,
      sameColorWhenPressed: false,
      ariaHidden: false,
      clickListener: true,
      toggleButton: true // whether or not to actually present it as a toggle button to screen readers (when pressable)
    }),
    store: () => store,
    computed: {
      computedClass: ({ pressable, pressed, big, muted, sameColorWhenPressed, className }) => (classname(
        'icon-button',
        !pressable && 'not-pressable',
        pressed && 'pressed',
        big && 'big-icon',
        muted && 'muted-style',
        sameColorWhenPressed ? 'same-pressed' : 'not-same-pressed',
        className
      )),
      title: ({ pressable, pressed, pressedLabel, label }) => pressable ? (pressed ? pressedLabel : label) : label,
      ariaLabel: ({ toggleButton, pressable, pressed, label, pressedLabel }) => {
        if (!pressable || toggleButton) {
          return label // per Aria Practices, toggleButtons never change their label
        } else {
          return pressed ? pressedLabel : label
        }
      },
      ariaPressed: ({ toggleButton, pressable, pressed }) => (toggleButton && pressable) ? !!pressed : undefined
    },
    methods: {
      animate (animation) {
        this.refs.svg.animate(animation)
      },
      onClick (e) {
        this.fire('click', e)
      }
    },
    components: {
      SvgIcon
    }
  }
</script>