PS-675 Added accessibility text to password show/hide toggles (#1926)

* PS-675 Added accessibility text to password show hide toggles

* PS-675 refactor string resource key name

src/App/Pages/Accounts/BaseChangePasswordViewModel.cs

@@ -46,7 +46,11 @@ namespace Bit.App.Pages
         {
             get => _showPassword;
             set => SetProperty(ref _showPassword, value,
-                additionalPropertyNames: new[] { nameof(ShowPasswordIcon) });
+                additionalPropertyNames: new[]
+                {
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
+                });
         }
 
         public bool IsPolicyInEffect
@@ -68,6 +72,7 @@ namespace Bit.App.Pages
         }
 
         public string ShowPasswordIcon => ShowPassword ? "" : "";
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public string MasterPassword { get; set; }
         public string ConfirmMasterPassword { get; set; }
         public string Hint { get; set; }

src/App/Pages/Accounts/LockPage.xaml

@@ -80,7 +80,8 @@
                                 Grid.Column="1"
                                 Grid.RowSpan="2"
                                 AutomationProperties.IsInAccessibleTree="True"
-                                AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                                AutomationProperties.Name="{u:I18n ToggleVisibility}" 
+                                AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}"/>
                         </Grid>
                         <Grid
                             x:Name="_passwordGrid"
@@ -119,7 +120,8 @@
                                 Grid.Column="1"
                                 Grid.RowSpan="2"
                                 AutomationProperties.IsInAccessibleTree="True"
-                                AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                                AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                                AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                         </Grid>
                         <StackLayout
                             StyleClass="box-row"

src/App/Pages/Accounts/LockPageViewModel.cs

@@ -72,7 +72,8 @@ namespace Bit.App.Pages
             set => SetProperty(ref _showPassword, value,
                 additionalPropertyNames: new string[]
                 {
-                    nameof(ShowPasswordIcon)
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText),
                 });
         }
 
@@ -128,6 +129,7 @@ namespace Bit.App.Pages
         public Command SubmitCommand { get; }
         public Command TogglePasswordCommand { get; }
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public string MasterPassword { get; set; }
         public string Pin { get; set; }
         public Action UnlockedAction { get; set; }

src/App/Pages/Accounts/LoginPage.xaml

@@ -101,7 +101,8 @@
                                 Grid.Column="1"
                                 Grid.RowSpan="2"
                                 AutomationProperties.IsInAccessibleTree="True"
-                                AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                                AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                                AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}"/>
                         </Grid>
                     </StackLayout>
                     <StackLayout Padding="10, 0">

src/App/Pages/Accounts/LoginPageViewModel.cs

@@ -58,7 +58,8 @@ namespace Bit.App.Pages
             set => SetProperty(ref _showPassword, value,
                 additionalPropertyNames: new string[]
                 {
-                    nameof(ShowPasswordIcon)
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
                 });
         }
 
@@ -85,6 +86,7 @@ namespace Bit.App.Pages
         public Command LogInCommand { get; }
         public Command TogglePasswordCommand { get; }
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public Action StartTwoFactorAction { get; set; }
         public Action LogInSuccessAction { get; set; }
         public Action UpdateTempPasswordAction { get; set; }

src/App/Pages/Accounts/RegisterPage.xaml

@@ -68,7 +68,8 @@
                         Grid.Column="1"
                         Grid.RowSpan="2"
                         AutomationProperties.IsInAccessibleTree="True"
-                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                        AutomationProperties.Name="{u:I18n ToggleVisibility}" 
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}"/>
                 </Grid>
                 <Label
                     Text="{u:I18n MasterPasswordDescription}"
@@ -106,7 +107,8 @@
                         Grid.Column="1"
                         Grid.RowSpan="2"
                         AutomationProperties.IsInAccessibleTree="True"
-                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                        AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                 </Grid>
                 <StackLayout StyleClass="box-row">
                     <Label

src/App/Pages/Accounts/RegisterPageViewModel.cs

@@ -51,7 +51,8 @@ namespace Bit.App.Pages
             set => SetProperty(ref _showPassword, value,
                 additionalPropertyNames: new string[]
                 {
-                    nameof(ShowPasswordIcon)
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
                 });
         }
 
@@ -73,6 +74,7 @@ namespace Bit.App.Pages
         public Command TogglePasswordCommand { get; }
         public Command ToggleConfirmPasswordCommand { get; }
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public string Name { get; set; }
         public string Email { get; set; }
         public string MasterPassword { get; set; }

src/App/Pages/Accounts/SetPasswordPage.xaml

@@ -107,7 +107,8 @@
                         Grid.Column="1"
                         Grid.RowSpan="2"
                         AutomationProperties.IsInAccessibleTree="True"
-                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                        AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                 </Grid>
                 <Label
                     Text="{u:I18n MasterPasswordDescription}"
@@ -145,7 +146,8 @@
                         Grid.Column="1"
                         Grid.RowSpan="2"
                         AutomationProperties.IsInAccessibleTree="True"
-                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                        AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                 </Grid>
                 <StackLayout StyleClass="box-row">
                     <Label

src/App/Pages/Accounts/SetPasswordPageViewModel.cs

@@ -55,7 +55,11 @@ namespace Bit.App.Pages
         {
             get => _showPassword;
             set => SetProperty(ref _showPassword, value,
-                additionalPropertyNames: new[] { nameof(ShowPasswordIcon) });
+                additionalPropertyNames: new[]
+                {
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
+                });
         }
 
         public bool IsPolicyInEffect
@@ -86,6 +90,7 @@ namespace Bit.App.Pages
         public Command TogglePasswordCommand { get; }
         public Command ToggleConfirmPasswordCommand { get; }
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public string MasterPassword { get; set; }
         public string ConfirmMasterPassword { get; set; }
         public string Hint { get; set; }

src/App/Pages/Accounts/UpdateTempPasswordPage.xaml

@@ -105,7 +105,8 @@
                         Grid.Column="1"
                         Grid.RowSpan="2"
                         AutomationProperties.IsInAccessibleTree="True"
-                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                        AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                 </Grid>
             </StackLayout>
             <StackLayout StyleClass="box">
@@ -140,7 +141,8 @@
                         Grid.Column="1"
                         Grid.RowSpan="2"
                         AutomationProperties.IsInAccessibleTree="True"
-                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                        AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                 </Grid>
                 <StackLayout StyleClass="box-row">
                     <Label

src/App/Pages/Send/SendAddEditPage.xaml

@@ -444,7 +444,8 @@
                                         Command="{Binding TogglePasswordCommand}"
                                         Margin="10,0,0,0"
                                         AutomationProperties.IsInAccessibleTree="True"
-                                        AutomationProperties.Name="{u:I18n ToggleVisibility}" />
+                                        AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}" />
                                 </StackLayout>
                                 <Label
                                     Text="{u:I18n PasswordInfo}"

src/App/Pages/Send/SendAddEditPageViewModel.cs

@@ -220,7 +220,8 @@ namespace Bit.App.Pages
             set => SetProperty(ref _showPassword, value,
                 additionalPropertyNames: new[]
                 {
-                    nameof(ShowPasswordIcon)
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
                 });
         }
         public bool DisableHideEmail
@@ -240,6 +241,7 @@ namespace Bit.App.Pages
         public bool ShowDeletionCustomPickers => EditMode || DeletionDateTypeSelectedIndex == 6;
         public bool ShowExpirationCustomPickers => EditMode || ExpirationDateTypeSelectedIndex == 7;
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public string FileTypeAccessibilityLabel => IsFile ? AppResources.FileTypeIsSelected : AppResources.FileTypeIsNotSelected;
         public string TextTypeAccessibilityLabel => IsText ? AppResources.TextTypeIsSelected : AppResources.TextTypeIsNotSelected;
 

src/App/Pages/Settings/ExportVaultPage.xaml

@@ -105,6 +105,7 @@
                         Grid.Column="1"
                         AutomationProperties.IsInAccessibleTree="True"
                         AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                        AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}"
                         IsVisible="{Binding UseOTPVerification, Converter={StaticResource inverseBool}}"/>
                     <Label
                         Text="{u:I18n ConfirmYourIdentity}"

src/App/Pages/Settings/ExportVaultPageViewModel.cs

@@ -109,7 +109,11 @@ namespace Bit.App.Pages
         {
             get => _showPassword;
             set => SetProperty(ref _showPassword, value,
-                additionalPropertyNames: new string[] { nameof(ShowPasswordIcon) });
+                additionalPropertyNames: new string[]
+                {
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText),
+                });
         }
 
         public bool UseOTPVerification
@@ -139,6 +143,7 @@ namespace Bit.App.Pages
         public Command TogglePasswordCommand { get; }
 
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
 
         public void TogglePassword()
         {

src/App/Pages/Vault/AddEditPage.xaml

@@ -162,6 +162,7 @@
                             Grid.RowSpan="2"
                             AutomationProperties.IsInAccessibleTree="True"
                             AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                            AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}"
                             IsVisible="{Binding Cipher.ViewPassword}" />
                         <controls:IconButton 
                             StyleClass="box-row-button, box-row-button-platform"

src/App/Pages/Vault/AddEditPageViewModel.cs

@@ -249,7 +249,8 @@ namespace Bit.App.Pages
             set => SetProperty(ref _showPassword, value,
                 additionalPropertyNames: new string[]
                 {
-                    nameof(ShowPasswordIcon)
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
                 });
         }
         public bool ShowCardNumber
@@ -298,6 +299,7 @@ namespace Bit.App.Pages
         public int TotpColumnSpan => Cipher.ViewPassword ? 1 : 2;
         public bool AllowPersonal { get; set; }
         public bool PasswordPrompt => Cipher.Reprompt != CipherRepromptType.None;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
 
         public void Init()
         {

src/App/Pages/Vault/ViewPage.xaml

@@ -145,6 +145,7 @@
                                     Grid.RowSpan="2"
                                     AutomationProperties.IsInAccessibleTree="True"
                                     AutomationProperties.Name="{u:I18n ToggleVisibility}"
+                                    AutomationProperties.HelpText="{Binding PasswordVisibilityAccessibilityText}"
                                     IsVisible="{Binding Cipher.ViewPassword}" />
                                 <controls:IconButton 
                                     StyleClass="box-row-button, box-row-button-platform"

src/App/Pages/Vault/ViewPageViewModel.cs

@@ -120,7 +120,8 @@ namespace Bit.App.Pages
             set => SetProperty(ref _showPassword, value,
                 additionalPropertyNames: new string[]
                 {
-                    nameof(ShowPasswordIcon)
+                    nameof(ShowPasswordIcon),
+                    nameof(PasswordVisibilityAccessibilityText)
                 });
         }
         public bool ShowCardNumber
@@ -213,6 +214,7 @@ namespace Bit.App.Pages
         public string ShowPasswordIcon => ShowPassword ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
         public string ShowCardNumberIcon => ShowCardNumber ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
         public string ShowCardCodeIcon => ShowCardCode ? BitwardenIcons.EyeSlash : BitwardenIcons.Eye;
+        public string PasswordVisibilityAccessibilityText => ShowPassword ? AppResources.PasswordIsVisibleTapToHide : AppResources.PasswordIsNotVisibleTapToShow;
         public string TotpCodeFormatted
         {
             get => _totpCodeFormatted;

src/App/Resources/AppResources.Designer.cs

@@ -3971,6 +3971,18 @@ namespace Bit.App.Resources {
             }
         }
         
+        public static string PasswordIsVisibleTapToHide {
+            get {
+                return ResourceManager.GetString("PasswordIsVisibleTapToHide", resourceCulture);
+            }
+        }
+        
+        public static string PasswordIsNotVisibleTapToShow {
+            get {
+                return ResourceManager.GetString("PasswordIsNotVisibleTapToShow", resourceCulture);
+            }
+        }
+        
         public static string FilterByVault {
             get {
                 return ResourceManager.GetString("FilterByVault", resourceCulture);

src/App/Resources/AppResources.resx

@@ -2220,6 +2220,12 @@
   <data name="SpecialCharacters" xml:space="preserve">
     <value>Special Characters (!@#$%^&amp;*)</value>
   </data>
+  <data name="PasswordIsVisibleTapToHide" xml:space="preserve">
+    <value>Password is visible, tap to hide.</value>
+  </data>
+  <data name="PasswordIsNotVisibleTapToShow" xml:space="preserve">
+    <value>Password is not visible, tap to show.</value>
+  </data>
   <data name="FilterByVault" xml:space="preserve">
     <value>Filter items by vault</value>
   </data>