angular_components icon indicating copy to clipboard operation
angular_components copied to clipboard

Fix Material Button by Backing it with HTML Button

Open chances opened this issue 7 years ago • 2 comments

According to #132, material-button is not backed by a HTML button.

This breaks form accessibility. If a form has no explicitly declared submit button it cannot be submitted with the Enter key when a form control is focused.

In order to preserve expected behavior for forms I have to wrap a material-button with a HTML button type="submit" and add some hacky CSS to keep the material button presentable.

<button type="submit">
    <material-button (trigger)="form.onSubmit($event)">Submit</material-button>
</button>
button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    padding: 0;
    font-size: inherit;
    background: transparent;
  }

This is really backwards given I'm already using a button component. material-button should be fixed by backing it with a HTML button.

chances avatar May 25 '18 19:05 chances

We are reworking how the button works for the new material design, and it will be backed by a button, but we won't be fixing this for the previous version.

TedSander avatar May 25 '18 19:05 TedSander

Any progress on this? I was surprised to have to do a lot of troubleshooting to figure out why the material button doesn't submit a form and learn that it isn't an actual html button and can't be used for form submission without some sort of workaround. Seems like a common use case for a button component.

jlefley avatar Nov 30 '19 23:11 jlefley