Skip to content
This repository was archived by the owner on May 20, 2023. It is now read-only.
This repository was archived by the owner on May 20, 2023. It is now read-only.

Fix Material Button by Backing it with HTML Button #269

@chances

Description

@chances

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions