angular_components
angular_components copied to clipboard
Fix Material Button by Backing it with HTML Button
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.
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.
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.