Change footer's todo item filter anchor tag components to button tag

[krapie]

I suggest change anchor tag to button tag in footer's todo item filter list.

There are 2 reasons for this suggestion.

1. Anchor tag <a> is meant for routing/redirecting to other pages. In the other hand, button tag <button> is meant for all actions that is not routing/redirecting. This is recommended for sematic web. Since todo item filter is meant for filtering todo items and not routing, components for filter should be button instead for anchor.
2. Anchor tag can cause unexpected routing in some conditions. For example, anchor tags as button in iframe will redirect to iframe's parent page. In https://yorkie.dev/examples/todomvc example, when you click filtering options (All, Active, Completed), you will be redirected to iframe's parent url, which is https://yorkie.dev/#. Below is demo for demonstrating this problem.
   

For this two reasons, I suggest change anchor tag to button tag in footer's todo item filter list.
Code for React/Typescript will look like:

export default function Footer(props: FooterProps) {
  const {
    activeCount,
    completedCount,
    filter: selectedFilter,
    onClearCompleted,
    onShow
  } = props;
  return (
    <footer className="footer">
      <span className="todo-count">
        <strong>{activeCount || 'No'}</strong>
        &nbsp;{activeCount === 1 ? 'item' : 'items'} left
      </span>
      <ul className="filters">
        {
          ['SHOW_ALL', 'SHOW_ACTIVE', 'SHOW_COMPLETED'].map((filter) => (
            <li key={filter}>
              <button
                type="button"
                className={classnames({ selected: filter === selectedFilter })}
                style={{ cursor: 'pointer' }}
                onClick={() => onShow(filter)}
              >
                {FILTER_TITLES[filter]}
              </button>
            </li>
          ))
        }
      </ul>
      {!!completedCount && (
        <button type="button" className="clear-completed" onClick={onClearCompleted}>
          Clear completed
        </button>
      )}
    </footer>
  );
}

To keep appearance same as before, this CSS should be applied.

.filters li button {
  color: inherit;
  margin: 0px 3px 0px 3px;
  padding: 0px 3px 0px 3px;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 3px;
}

.filters li button:hover {
  border-color: #DB7676;
}

.filters li button.selected {
  border-color: #CE4646;
}