We were using an icon for this link, but people who can't see the icon couldn't know what the link was about. Axe was reporting the following accessibility error: ``` link-name: Links must have discernible text (serious) https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI The following 1 node violate this rule: Selector: .show-password HTML: <a href="#" class="show-password"> <span class="icon-eye"></span> </a> Fix all of the following: - Element is in tab order and does not have accessible text Fix any of the following: - Element does not have text that is visible to screen readers - aria-label attribute does not exist or is empty - aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty - Element has no title attribute ```
28 lines
1.1 KiB
Plaintext
28 lines
1.1 KiB
Plaintext
<% provide :main_class, "management-account-edit-password-manually" %>
|
|
|
|
<h2 class="not-print"><%= t("management.account.menu.reset_password_manually") %></h2>
|
|
|
|
<%= form_for user, url: change_password_management_account_path do |f| %>
|
|
<%= f.label :password %>
|
|
<p class="help-text"><%= t("management.account.edit.password.print_help") %></p>
|
|
<div class="small-12 medium-6">
|
|
|
|
<div class="input-group">
|
|
<%= f.password_field :password, class: "input-group-field", label: false, value: nil %>
|
|
<span class="input-group-label">
|
|
<a href="#" class="show-password">
|
|
<span class="icon-eye"></span>
|
|
<span class="show-for-sr"><%= t("management.account.edit.password.show") %></span>
|
|
</a>
|
|
</span>
|
|
</div>
|
|
|
|
<%= link_to t("management.account.edit.password.random"),
|
|
"#",
|
|
class: "generate-random-value float-right",
|
|
data: { "password-complexity": User.password_complexity } %>
|
|
</div>
|
|
|
|
<%= f.submit t("management.account.edit.password.save"), class: "button success" %>
|
|
<% end %>
|