mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-25 19:48:50 +03:00
59fcc567f1
refs TryGhost/Ghost#11863 Some `a`tags with `href` attributes that are empty are used as buttons, but since the href is not linkifying anything, they appear as text nodes to assistive technologies. Give them a `"button"` role so it is guaranteed that assistive technologies will pick them up as actionable controls.
60 lines
2.2 KiB
Handlebars
60 lines
2.2 KiB
Handlebars
<header class="modal-header">
|
|
<h1>Invite a New User</h1>
|
|
</header>
|
|
{{!-- disable mouseDown so it doesn't trigger focus-out validations --}}
|
|
<a class="close" href role="button" title="Close" {{action "closeModal"}} {{action (optional this.noop) on="mouseDown"}}>
|
|
{{svg-jar "close"}}<span class="hidden">Close</span>
|
|
</a>
|
|
|
|
<div class="modal-body">
|
|
<fieldset>
|
|
<GhFormGroup @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="email">
|
|
<label for="new-user-email">Email Address</label>
|
|
<GhTextInput
|
|
@class="email"
|
|
@id="new-user-email"
|
|
@type="email"
|
|
@placeholder="Email Address"
|
|
@name="email"
|
|
@shouldFocus={{true}}
|
|
@autocapitalize="off"
|
|
@autocorrect="off"
|
|
@value={{readonly email}}
|
|
@input={{action (mut email) value="target.value"}}
|
|
@keyEvents={{hash
|
|
Enter=(action "confirm")
|
|
}}
|
|
@focus-out={{action "validate" "email"}}
|
|
/>
|
|
<GhErrorMessage @errors={{this.errors}} @property="email" />
|
|
</GhFormGroup>
|
|
|
|
|
|
<GhFormGroup @class="for-select" @errors={{this.errors}} @hasValidated={{this.hasValidated}} @property="role">
|
|
<label for="new-user-role">Role</label>
|
|
<span class="gh-select">
|
|
<OneWaySelect
|
|
@id="new-user-role"
|
|
@name="role"
|
|
@options={{readonly this.roles}}
|
|
@optionValuePath="id"
|
|
@optionLabelPath="name"
|
|
@value={{this.role}}
|
|
@update={{action "setRole"}}
|
|
/>
|
|
{{svg-jar "arrow-down-small"}}
|
|
</span>
|
|
<GhErrorMessage @errors={{this.errors}} @property="role" />
|
|
</GhFormGroup>
|
|
</fieldset>
|
|
</div>
|
|
|
|
<div class="modal-footer">
|
|
<GhTaskButton @buttonText="Send invitation now"
|
|
@successText="Sent"
|
|
@task={{this.sendInvitation}}
|
|
@class="gh-btn gh-btn-green gh-btn-icon"
|
|
@disabled={{this.fetchRoles.isRunning}}
|
|
@disableMouseDown="true" />
|
|
</div>
|