Use buttons rather than links for js-clickable elements

Add some missing attributes for correct behavior/accessibility
This commit is contained in:
Andrew Croce 2018-10-18 10:00:38 -04:00
parent c531680b44
commit 8da22f5941
3 changed files with 7 additions and 6 deletions

View File

@ -22,7 +22,7 @@
</p> </p>
<div class='action-group'> <div class='action-group'>
<button type='submit' class='action-group__action usa-button' tabindex='0'>{{ action_text }} Project</button> <button autofocus type='submit' class='action-group__action usa-button' tabindex='0'>{{ action_text }} Project</button>
<button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button> <button type='button' v-on:click="handleCancelSubmit" class='icon-link action-group__action' tabindex='0'>Cancel</button>
</div> </div>
{% endcall %} {% endcall %}

View File

@ -12,7 +12,7 @@
{% include 'fragments/pending_financial_verification.html' %} {% include 'fragments/pending_financial_verification.html' %}
<div class='action-group'> <div class='action-group'>
<a v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</a> <button autofocus type=button v-on:click="closeModal('pendingFinancialVerification')" class='action-group__action usa-button'>Close</button>
</div> </div>
{% endcall %} {% endcall %}
@ -22,7 +22,7 @@
{% include 'fragments/pending_ccpo_approval_modal.html' %} {% include 'fragments/pending_ccpo_approval_modal.html' %}
<div class='action-group'> <div class='action-group'>
<a v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</a> <button autofocus type='button' v-on:click="closeModal('pendingCCPOApproval')" class='action-group__action usa-button'>Close</button>
</div> </div>
{% endcall %} {% endcall %}
@ -32,7 +32,7 @@
{% include 'fragments/pending_ccpo_acceptance_alert.html' %} {% include 'fragments/pending_ccpo_acceptance_alert.html' %}
<div class='action-group'> <div class='action-group'>
<a v-on:click="closeModal('pendingCCPOAcceptance')" class='action-group__action usa-button'>Close</a> <button autofocus type='button' v-on:click="closeModal('pendingCCPOAcceptance')" class='action-group__action usa-button'>Close</button>
</div> </div>
{% endcall %} {% endcall %}

View File

@ -99,6 +99,7 @@
value='{{ choice[0] }}' value='{{ choice[0] }}'
{% if role == choice[0] %} {% if role == choice[0] %}
checked='checked' checked='checked'
autofocus
{% endif %} {% endif %}
/> />
<label for="env_{{ env.id }}_{{ choice[0] }}"> <label for="env_{{ env.id }}_{{ choice[0] }}">
@ -118,8 +119,8 @@
<input type='hidden' name='env_{{ env.id }}' v-bind:value='new_role'/> <input type='hidden' name='env_{{ env.id }}' v-bind:value='new_role'/>
<div class='block-list__footer'> <div class='block-list__footer'>
<div class='action-group'> <div class='action-group'>
<a v-on:click="closeModal('{{ env.name }}RolesModal')" class='action-group__action usa-button'>Select Access Role</a> <button type='button' v-on:click="closeModal('{{ env.name }}RolesModal')" class='action-group__action usa-button'>Select Access Role</button>
<a class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ env.name }}RolesModal'); cancel();" value="{{ value if value == role else role }}" >Cancel</a> <button type='button' class='action-group__action icon-link icon-link--danger' v-on:click="closeModal('{{ env.name }}RolesModal'); cancel();" value="{{ value if value == role else role }}" >Cancel</button>
</div> </div>
</div> </div>
</div> </div>