Merge pull request #25939 from abpframework/maliming/password-toggle-accessibility

Make password visibility toggles accessible

framework/src/Volo.Abp.MudBlazorUI/wwwroot/volo.abp.mudblazorui.css

@@ -110,3 +110,24 @@
     padding-inline-end: 16px;
 }
 
+
+
+/* Password visibility toggle: MudBlazor renders the input end-adornment with a hard-coded
+   tabindex="-1", so a toggle placed there can never be reached by keyboard. The toggle is
+   rendered as a normal MudIconButton next to the field and pinned over the input row instead.
+   The offset is measured from the top of the control because the label sits above the input row
+   and validation text is rendered below it, so the control's own height is not a stable anchor. */
+.abp-password-field {
+    position: relative;
+}
+
+.abp-password-field .abp-password-visibility-toggle {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 38px;
+    transform: translateY(-50%);
+}
+
+.abp-password-field .mud-input:not(.mud-select-input) .mud-input-slot.mud-input-root {
+    padding-inline-end: 40px !important;
+}

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ar.json

@@ -62,6 +62,7 @@
     "Theme": "سمة",
     "NotAssigned": "غيرمعتمد",
     "EntityActionsDisabledTooltip": "ليس لديك إذن لتنفيذ أي إجراء.",
-    "ResourcePermissions": "أذونات"
+    "ResourcePermissions": "أذونات",
+    "ShowPassword": "عرض كلمة المرور"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/cs.json

@@ -62,6 +62,7 @@
     "Theme": "Téma",
     "NotAssigned": "Nepřiřazena",
     "EntityActionsDisabledTooltip": "Nemáte oprávnění provést žádnou akci.",
-    "ResourcePermissions": "Oprávnění"
+    "ResourcePermissions": "Oprávnění",
+    "ShowPassword": "Zobrazit heslo"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/de.json

@@ -62,6 +62,7 @@
     "Theme": "Thema",
     "NotAssigned": "Nicht zugeordnet",
     "EntityActionsDisabledTooltip": "Sie haben keine Berechtigung, Aktionen auszuführen.",
-    "ResourcePermissions": "Berechtigungen"
+    "ResourcePermissions": "Berechtigungen",
+    "ShowPassword": "Passwort anzeigen"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/el.json

@@ -57,5 +57,6 @@
     "Apply": "Ισχύουν",
     "EntityActionsDisabledTooltip": "Δεν έχετε δικαίωμα να εκτελέσετε καμία ενέργεια.",
     "ResourcePermissions": "Δικαιώματα",
+    "ShowPassword": "Εμφάνιση κωδικού πρόσβασης"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en-GB.json

@@ -57,6 +57,7 @@
     "Today": "Today",
     "Apply": "Apply",
     "EntityActionsDisabledTooltip": "You do not have permission to perform any action.",
-    "ResourcePermissions": "Permissions"
+    "ResourcePermissions": "Permissions",
+    "ShowPassword": "Show password"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/en.json

@@ -62,6 +62,7 @@
     "Theme": "Theme",
     "NotAssigned": "Not Assigned",
     "EntityActionsDisabledTooltip": "You do not have permission to perform any action.",
-    "ResourcePermissions": "Permissions"
+    "ResourcePermissions": "Permissions",
+    "ShowPassword": "Show password"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/es.json

@@ -62,6 +62,7 @@
     "Theme": "Tema",
     "NotAssigned": "No asignado",
     "EntityActionsDisabledTooltip": "No tienes permisos para realizar ninguna acción.",
-    "ResourcePermissions": "Permisos"
+    "ResourcePermissions": "Permisos",
+    "ShowPassword": "Mostrar contraseña"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/fa.json

@@ -56,6 +56,7 @@
     "Today": "امروز",
     "Apply": "درخواست دادن",
     "EntityActionsDisabledTooltip": "شما دسترسی به انجام هر گونه عملیات ندارید.",
-    "ResourcePermissions": "مجوزها"
+    "ResourcePermissions": "مجوزها",
+    "ShowPassword": "نمایش رمز عبور"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/fi.json

@@ -62,6 +62,7 @@
     "Theme": "Teema",
     "NotAssigned": "Ei määritetty",
     "EntityActionsDisabledTooltip": "Sinulla ei ole oikeutta suorittaa mitään toimintoa.",
-    "ResourcePermissions": "Käyttöoikeudet"
+    "ResourcePermissions": "Käyttöoikeudet",
+    "ShowPassword": "Näytä salasana"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/fr.json

@@ -62,6 +62,7 @@
     "Theme": "Thème",
     "NotAssigned": "Non attribué",
     "EntityActionsDisabledTooltip": "Vous n'avez pas les permissions pour effectuer une action.",
-    "ResourcePermissions": "Autorisations"
+    "ResourcePermissions": "Autorisations",
+    "ShowPassword": "Afficher le mot de passe"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/hi.json

@@ -62,6 +62,7 @@
     "Theme": "विषय",
     "NotAssigned": "सौंपा नहीं गया है",
     "EntityActionsDisabledTooltip": "आपके पास कोई कार्रवाई नहीं है जो करने के लिए है।",
-    "ResourcePermissions": "अनुमतियाँ"
+    "ResourcePermissions": "अनुमतियाँ",
+    "ShowPassword": "पासवर्ड दिखाएं"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/hr.json

@@ -62,6 +62,7 @@
     "Theme": "Tema",
     "NotAssigned": "Nije dodijeljeno",
     "EntityActionsDisabledTooltip": "Nemate dozvolu za izvođenje bilo kakve akcije.",
-    "ResourcePermissions": "Dozvole"
+    "ResourcePermissions": "Dozvole",
+    "ShowPassword": "Pokaži lozinku"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/hu.json

@@ -62,6 +62,7 @@
     "Theme": "Téma",
     "NotAssigned": "Nem kijelölt",
     "EntityActionsDisabledTooltip": "Nincs jogosultsága bármely művelethez.",
-    "ResourcePermissions": "Engedélyek"
+    "ResourcePermissions": "Engedélyek",
+    "ShowPassword": "Jelszó megjelenítése"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/is.json

@@ -62,6 +62,7 @@
     "Theme": "Þema",
     "NotAssigned": "Ekki skráður",
     "EntityActionsDisabledTooltip": "Þú hefur ekki aðgang að þessum aðgerðum.",
-    "ResourcePermissions": "Aðgangsheimildir"
+    "ResourcePermissions": "Aðgangsheimildir",
+    "ShowPassword": "Sýna lykilorð"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/it.json

@@ -62,6 +62,7 @@
     "Theme": "Tema",
     "NotAssigned": "Non assegnato",
     "EntityActionsDisabledTooltip": "Non hai i permessi per eseguire alcuna azione.",
-    "ResourcePermissions": "Autorizzazioni"
+    "ResourcePermissions": "Autorizzazioni",
+    "ShowPassword": "Mostra password"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ko.json

@@ -62,6 +62,7 @@
     "Theme": "테마",
     "NotAssigned": "할당되지 않음",
     "EntityActionsDisabledTooltip": "작업을 수행할 권한이 없습니다.",
-    "ResourcePermissions": "권한"
+    "ResourcePermissions": "권한",
+    "ShowPassword": "비밀번호 표시"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/nl.json

@@ -62,6 +62,7 @@
     "Theme": "Thema",
     "NotAssigned": "Niet toegekend",
     "EntityActionsDisabledTooltip": "U hebt geen toegang tot deze acties.",
-    "ResourcePermissions": "Machtigingen"
+    "ResourcePermissions": "Machtigingen",
+    "ShowPassword": "Wachtwoord tonen"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/pl-PL.json

@@ -62,6 +62,7 @@
     "Theme": "Temat",
     "NotAssigned": "Nie przypisano",
     "EntityActionsDisabledTooltip": "Nie masz uprawnień do wykonania żadnej akcji.",
-    "ResourcePermissions": "Uprawnienia"
+    "ResourcePermissions": "Uprawnienia",
+    "ShowPassword": "Pokaż hasło"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/pt-BR.json

@@ -62,6 +62,7 @@
     "Theme": "Tema",
     "NotAssigned": "Não atribuído",
     "EntityActionsDisabledTooltip": "Você não tem permissão para executar qualquer ação.",
-    "ResourcePermissions": "Permissões"
+    "ResourcePermissions": "Permissões",
+    "ShowPassword": "Mostrar senha"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ro-RO.json

@@ -62,6 +62,7 @@
     "Theme": "Temă",
     "NotAssigned": "Nealocat",
     "EntityActionsDisabledTooltip": "Nu aveți permisiune să efectuați nicio acțiune.",
-    "ResourcePermissions": "Permisiuni"
+    "ResourcePermissions": "Permisiuni",
+    "ShowPassword": "Afișează parola"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/ru.json

@@ -62,6 +62,7 @@
     "Theme": "Тема",
     "NotAssigned": "Не назначен",
     "EntityActionsDisabledTooltip": "У вас нет прав на выполнение каких-либо действий.",
-    "ResourcePermissions": "Разрешения"
+    "ResourcePermissions": "Разрешения",
+    "ShowPassword": "Показать пароль"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/sk.json

@@ -62,6 +62,7 @@
     "Theme": "Téma",
     "NotAssigned": "Nepridelené",
     "EntityActionsDisabledTooltip": "Nemáte oprávnenie vykonávať žiadnu akciu.",
-    "ResourcePermissions": "Oprávnenia"
+    "ResourcePermissions": "Oprávnenia",
+    "ShowPassword": "Zobraziť heslo"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/sl.json

@@ -62,6 +62,7 @@
     "Theme": "Tema",
     "NotAssigned": "Ni dodeljena",
     "EntityActionsDisabledTooltip": "Nimate pravic za izvajanje kakršne koli dejanje.",
-    "ResourcePermissions": "Dovoljenja"
+    "ResourcePermissions": "Dovoljenja",
+    "ShowPassword": "Pokaži geslo"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/sv.json

@@ -61,6 +61,7 @@
     "Theme": "Tema",
     "NotAssigned": "Ej tilldelad",
     "EntityActionsDisabledTooltip": "Du har inte tillgång till dessa åtgärder.",
-    "ResourcePermissions": "Behörigheter"
+    "ResourcePermissions": "Behörigheter",
+    "ShowPassword": "Visa lösenord"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/tr.json

@@ -62,6 +62,7 @@
     "Theme": "Tema",
     "NotAssigned": "Atanmadı",
     "EntityActionsDisabledTooltip": "Bu işlemi gerçekleştirmek için yeterli yetkiniz yok.",
-    "ResourcePermissions": "İzinler"
+    "ResourcePermissions": "İzinler",
+    "ShowPassword": "Şifreyi göster"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/vi.json

@@ -62,6 +62,7 @@
     "Theme": "chủ đề",
     "NotAssigned": "Không được chỉ định",
     "EntityActionsDisabledTooltip": "Bạn không có quyền thực hiện bất kỳ hành động nào.",
-    "ResourcePermissions": "Quyền"
+    "ResourcePermissions": "Quyền",
+    "ShowPassword": "Hiện mật khẩu"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/zh-Hans.json

@@ -62,6 +62,7 @@
     "Theme": "主题",
     "NotAssigned": "未分配",
     "EntityActionsDisabledTooltip": "您没有权限执行任何操作。",
-    "ResourcePermissions": "权限"
+    "ResourcePermissions": "权限",
+    "ShowPassword": "显示密码"
   }
 }

framework/src/Volo.Abp.UI/Localization/Resources/AbpUi/zh-Hant.json

@@ -62,6 +62,7 @@
     "Theme": "主題",
     "NotAssigned": "未分配",
     "EntityActionsDisabledTooltip": "您沒有權限執行任何操作。",
-    "ResourcePermissions": "權限"
+    "ResourcePermissions": "權限",
+    "ShowPassword": "顯示密碼"
   }
 }

modules/account/src/Volo.Abp.Account.Web/Pages/Account/Components/ProfileManagementGroup/Password/Default.cshtml

@@ -1,7 +1,9 @@
-@using Volo.Abp.Account.Localization
+@using Localization.Resources.AbpUi
+@using Volo.Abp.Account.Localization
 @using Volo.Abp.Users
 @using Microsoft.AspNetCore.Mvc.Localization
 @inject IHtmlLocalizer<AccountResource> L
+@inject IHtmlLocalizer<AbpUiResource> UiL
 @inject ICurrentUser CurrentUser
 @model Volo.Abp.Account.Web.Pages.Account.Components.ProfileManagementGroup.Password.AccountProfilePasswordManagementGroupViewComponent.ChangePasswordInfoModel
 
@@ -13,21 +15,21 @@
             <label asp-for="CurrentPassword" class="form-label"></label>
             <div class="input-group">
                 <input type="password" class="form-control" autocomplete="new-password" asp-for="CurrentPassword"/>
-                <button class="btn btn-secondary password-visibility-button" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+                <button class="btn btn-secondary password-visibility-button" type="button" aria-label="@UiL["ShowPassword"]" aria-pressed="false"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
             </div>
             <span asp-validation-for="CurrentPassword"></span><br/>
         }
         <label asp-for="NewPassword" class="form-label"></label>
         <div class="input-group">
             <input type="password" class="form-control" autocomplete="new-password" asp-for="NewPassword"/>
-            <button class="btn btn-secondary password-visibility-button" type="button" ><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary password-visibility-button" type="button" aria-label="@UiL["ShowPassword"]" aria-pressed="false"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
         </div>
         <span asp-validation-for="NewPassword"></span><br/>
     
         <label asp-for="NewPasswordConfirm" class="form-label"></label>
         <div class="input-group">
             <input type="password" class="form-control" autocomplete="new-password" asp-for="NewPasswordConfirm"/>
-            <button class="btn btn-secondary password-visibility-button" type="button"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+            <button class="btn btn-secondary password-visibility-button" type="button" aria-label="@UiL["ShowPassword"]" aria-pressed="false"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
         </div>
         <span asp-validation-for="NewPasswordConfirm"></span>
     </div>

modules/account/src/Volo.Abp.Account.Web/Pages/Account/Components/ProfileManagementGroup/Password/Default.js

@@ -6,12 +6,9 @@
             return;
         }
 
-        if (passwordInput.attr("type") === "password") {
-            passwordInput.attr("type", "text");
-        }
-        else {
-            passwordInput.attr("type", "password");
-        }
+        let isRevealing = passwordInput.attr("type") === "password";
+        passwordInput.attr("type", isRevealing ? "text" : "password");
+        button.attr("aria-pressed", isRevealing);
 
         let icon = button.find("i");
         if (icon) {

modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.cshtml

@@ -1,4 +1,5 @@
 @page
+@using Localization.Resources.AbpUi
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Volo.Abp.Account.Localization
 @using Volo.Abp.Account.Settings
@@ -8,6 +9,7 @@
 @using Volo.Abp.Settings
 @model Volo.Abp.Account.Web.Pages.Account.LoginModel
 @inject IHtmlLocalizer<AccountResource> L
+@inject IHtmlLocalizer<AbpUiResource> UiL
 @inject IThemeManager ThemeManager
 @inject Volo.Abp.Settings.ISettingProvider SettingProvider
 
@@ -53,7 +55,7 @@
                     <label asp-for="LoginInput.Password" class="form-label"></label>
                     <div class="input-group">
                         <input type="password" class="form-control" autocomplete="new-password" maxlength="@IdentityUserConsts.MaxPasswordLength" asp-for="LoginInput.Password" />
-                        <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+                        <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton" aria-label="@UiL["ShowPassword"]" aria-pressed="false"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
                     </div>
                     <span asp-validation-for="LoginInput.Password"></span>
                 </div>

modules/account/src/Volo.Abp.Account.Web/Pages/Account/Login.js

@@ -6,12 +6,9 @@ $(function () {
             return;
         }
 
-        if (passwordInput.attr("type") === "password") {
-            passwordInput.attr("type", "text");
-        }
-        else {
-            passwordInput.attr("type", "password");
-        }
+        let isRevealing = passwordInput.attr("type") === "password";
+        passwordInput.attr("type", isRevealing ? "text" : "password");
+        button.attr("aria-pressed", isRevealing);
 
         let icon = button.find("i");
         if (icon) {

modules/identity/src/Volo.Abp.Identity.Blazor.MudBlazor/Pages/Identity/UserManagement.razor

@@ -62,14 +62,18 @@
                                      Label="@L["DisplayName:Name"]" />
                         <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.Surname"
                                      Label="@L["DisplayName:Surname"]" />
-                        <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.Password"
-                                     Label="@L["DisplayName:Password"]"
-                                     InputType="@(_showPassword ? InputType.Text : InputType.Password)"
-                                     Required="true"
-                                     RequiredError="@L["The {0} field is required.", L["DisplayName:Password"]]"
-                                     Adornment="Adornment.End"
-                                     AdornmentIcon="@(_showPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
-                                     OnAdornmentClick="@(() => _showPassword = !_showPassword)" />
+                        <div class="abp-password-field">
+                            <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.Password"
+                                         Label="@L["DisplayName:Password"]"
+                                         InputType="@(_showPassword ? InputType.Text : InputType.Password)"
+                                         Required="true"
+                                         RequiredError="@L["The {0} field is required.", L["DisplayName:Password"]]" />
+                            <MudIconButton Class="abp-password-visibility-toggle"
+                                           Icon="@(_showPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
+                                           aria-label="@UiLocalizer["ShowPassword"]"
+                                           aria-pressed="@(_showPassword ? "true" : "false")"
+                                           OnClick="@(() => _showPassword = !_showPassword)" />
+                        </div>
                         <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.Email"
                                      Label="@L["DisplayName:Email"]"
                                      Required="true"
@@ -128,12 +132,16 @@
                                      Label="@L["DisplayName:Name"]" />
                         <MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.Surname"
                                      Label="@L["DisplayName:Surname"]" />
-                        <MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.Password"
-                                     Label="@L["DisplayName:Password"]"
-                                     InputType="@(_showPassword ? InputType.Text : InputType.Password)"
-                                     Adornment="Adornment.End"
-                                     AdornmentIcon="@(_showPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
-                                     OnAdornmentClick="@(() => _showPassword = !_showPassword)" />
+                        <div class="abp-password-field">
+                            <MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.Password"
+                                         Label="@L["DisplayName:Password"]"
+                                         InputType="@(_showPassword ? InputType.Text : InputType.Password)" />
+                            <MudIconButton Class="abp-password-visibility-toggle"
+                                           Icon="@(_showPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
+                                           aria-label="@UiLocalizer["ShowPassword"]"
+                                           aria-pressed="@(_showPassword ? "true" : "false")"
+                                           OnClick="@(() => _showPassword = !_showPassword)" />
+                        </div>
                         <MudTextField Margin="Margin.Dense" @bind-Value="@EditingEntity.Email"
                                      Label="@L["DisplayName:Email"]"
                                      Required="true"

modules/identity/src/Volo.Abp.Identity.Blazor/Pages/Identity/UserManagement.razor

@@ -102,8 +102,9 @@
                                                     </TextInput>
                                                 </Addon>
                                                 <Addon AddonType="AddonType.End">
-                                                    <Button Color="Color.Secondary" Clicked="@(() => ChangePasswordTextRole(null))">
-                                                        <Icon Name="ShowPassword ? IconName.Eye : IconName.EyeSlash" />
+                                                    <Button Color="Color.Secondary" Clicked="@(() => ChangePasswordTextRole(null))"
+                                                            aria-label="@UiLocalizer["ShowPassword"]" aria-pressed="@(ShowPassword ? "true" : "false")">
+                                                        <Icon Name="ShowPassword ? IconName.Eye : IconName.EyeSlash" aria-hidden="true" />
                                                     </Button>
                                                 </Addon>
                                             </Addons>
@@ -228,8 +229,9 @@
                                                     </TextInput>
                                                 </Addon>
                                                 <Addon AddonType="AddonType.End">
-                                                    <Button Color="Color.Secondary" Clicked="@(() => ChangePasswordTextRole(null))">
-                                                        <Icon Name="ShowPassword ? IconName.Eye : IconName.EyeSlash" />
+                                                    <Button Color="Color.Secondary" Clicked="@(() => ChangePasswordTextRole(null))"
+                                                            aria-label="@UiLocalizer["ShowPassword"]" aria-pressed="@(ShowPassword ? "true" : "false")">
+                                                        <Icon Name="ShowPassword ? IconName.Eye : IconName.EyeSlash" aria-hidden="true" />
                                                     </Button>
                                                 </Addon>
                                             </Addons>

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/CreateModal.cshtml

@@ -1,4 +1,5 @@
 @page
+@using Localization.Resources.AbpUi
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Microsoft.Extensions.Localization
 @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@@ -10,6 +11,7 @@
 @using Volo.Abp.Identity
 @model CreateModalModel
 @inject IHtmlLocalizer<IdentityResource> L
+@inject IHtmlLocalizer<AbpUiResource> UiL
 @inject IStringLocalizerFactory StringLocalizerFactory
 
 @{
@@ -30,7 +32,7 @@
                             <label asp-for="UserInfo.Password" class="form-label">@L["Password"] *</label>
                             <div class="input-group">
                                 <input type="password" class="form-control" autocomplete="new-password" maxlength="@IdentityUserConsts.MaxPasswordLength" asp-for="UserInfo.Password" />
-                                <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
+                                <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton" aria-label="@UiL["ShowPassword"]" aria-pressed="false"><i class="fa fa-eye-slash" aria-hidden="true"></i></button>
                             </div>
                             <span asp-validation-for="UserInfo.Password"></span>
                         </div>

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/EditModal.cshtml

@@ -1,4 +1,5 @@
 @page
+@using Localization.Resources.AbpUi
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Microsoft.Extensions.Localization
 @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@@ -10,6 +11,7 @@
 @using Volo.Abp.Identity
 @model EditModalModel
 @inject IHtmlLocalizer<IdentityResource> L
+@inject IHtmlLocalizer<AbpUiResource> UiL
 @inject IStringLocalizerFactory StringLocalizerFactory
 @{
     Layout = null;
@@ -30,7 +32,7 @@
                             <label asp-for="UserInfo.Password" class="form-label">@L["Password"]</label>
                             <div class="input-group">
                                 <input type="password" class="form-control" autocomplete="new-password" maxlength="@IdentityUserConsts.MaxPasswordLength" asp-for="UserInfo.Password"/>
-                                <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton">
+                                <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton" aria-label="@UiL["ShowPassword"]" aria-pressed="false">
                                     <i class="fa fa-eye-slash" aria-hidden="true"></i>
                                 </button>
                             </div>

modules/identity/src/Volo.Abp.Identity.Web/Pages/Identity/Users/index.js

@@ -11,12 +11,9 @@
                 return;
             }
 
-            if(passwordInput.attr("type") === "password") {
-                passwordInput.attr("type", "text");
-            }
-            else {
-                passwordInput.attr("type", "password");
-            }
+            var isRevealing = passwordInput.attr("type") === "password";
+            passwordInput.attr("type", isRevealing ? "text" : "password");
+            button.attr("aria-pressed", isRevealing);
 
             var icon = button.find("i");
             if(icon) {

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor.MudBlazor/Pages/TenantManagement/TenantManagement.razor

@@ -48,14 +48,18 @@
                              Required="true"
                              RequiredError="@L["ThisFieldIsRequired."]"
                              InputType="InputType.Email" />
-                <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.AdminPassword"
-                             Label="@L["DisplayName:AdminPassword"]"
-                             Required="true"
-                             RequiredError="@L["ThisFieldIsRequired."]"
-                             InputType="@(ShowPassword ? InputType.Text : InputType.Password)"
-                             Adornment="Adornment.End"
-                             AdornmentIcon="@(ShowPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
-                             OnAdornmentClick="@TogglePasswordVisibility" />
+                <div class="abp-password-field">
+                    <MudTextField Margin="Margin.Dense" @bind-Value="@NewEntity.AdminPassword"
+                                 Label="@L["DisplayName:AdminPassword"]"
+                                 Required="true"
+                                 RequiredError="@L["ThisFieldIsRequired."]"
+                                 InputType="@(ShowPassword ? InputType.Text : InputType.Password)" />
+                    <MudIconButton Class="abp-password-visibility-toggle"
+                                   Icon="@(ShowPassword ? Icons.Material.Filled.Visibility : Icons.Material.Filled.VisibilityOff)"
+                                   aria-label="@UiLocalizer["ShowPassword"]"
+                                   aria-pressed="@(ShowPassword ? "true" : "false")"
+                                   OnClick="@TogglePasswordVisibility" />
+                </div>
                 <MudExtensionProperties TEntityType="TenantCreateDto" TResourceType="AbpTenantManagementResource" Entity="@NewEntity" LH="@_localizerHelper" ModalType="ExtensionPropertyModalType.CreateModal" />
             </MudForm>
         </DialogContent>

modules/tenant-management/src/Volo.Abp.TenantManagement.Blazor/Pages/TenantManagement/TenantManagement.razor

@@ -77,8 +77,9 @@
                                     </TextInput>
                                 </Addon>
                                 <Addon AddonType="AddonType.End">
-                                    <Button Color="Color.Secondary" Clicked="@(() => TogglePasswordVisibility())">
-                                        <Icon Name="ShowPassword ? IconName.Eye : IconName.EyeSlash" />
+                                    <Button Color="Color.Secondary" Clicked="@(() => TogglePasswordVisibility())"
+                                            aria-label="@UiLocalizer["ShowPassword"]" aria-pressed="@(ShowPassword ? "true" : "false")">
+                                        <Icon Name="ShowPassword ? IconName.Eye : IconName.EyeSlash" aria-hidden="true" />
                                     </Button>
                                 </Addon>
                             </Addons>

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/Pages/TenantManagement/Tenants/Create.js

@@ -6,12 +6,9 @@ $(document).ready(function () {
             return;
         }
 
-        if (passwordInput.attr("type") === "password") {
-            passwordInput.attr("type", "text");
-        }
-        else {
-            passwordInput.attr("type", "password");
-        }
+        let isRevealing = passwordInput.attr("type") === "password";
+        passwordInput.attr("type", isRevealing ? "text" : "password");
+        button.attr("aria-pressed", isRevealing);
 
         let icon = button.find("i");
         if (icon) {

modules/tenant-management/src/Volo.Abp.TenantManagement.Web/Pages/TenantManagement/Tenants/CreateModal.cshtml

@@ -1,4 +1,5 @@
 @page
+@using Localization.Resources.AbpUi
 @using Microsoft.AspNetCore.Mvc.Localization
 @using Microsoft.Extensions.Localization
 @using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal
@@ -10,6 +11,7 @@
 @using Volo.Abp.TenantManagement;
 @model CreateModalModel
 @inject IHtmlLocalizer<AbpTenantManagementResource> L
+@inject IHtmlLocalizer<AbpUiResource> UiL
 @inject IStringLocalizerFactory StringLocalizerFactory
 @{
     Layout = null;
@@ -27,7 +29,7 @@
                 <span> * </span>
                 <div class="input-group">
                     <input type="password" class="form-control" maxlength="@TenantConsts.MaxPasswordLength" asp-for="Tenant.AdminPassword" />
-                    <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton">
+                    <button class="btn btn-secondary" type="button" id="PasswordVisibilityButton" aria-label="@UiL["ShowPassword"]" aria-pressed="false">
                         <i class="fa fa-eye-slash" aria-hidden="true"></i>
                     </button>
                 </div>