♿️- Settings - Change email / Change password input fields #545

cdolm92 · 2019-01-07T20:36:42Z

📲 What

Accessibility improvements to textfields in Change Email and Change Password screens.

🤔 Why

Previously VoiceOver read both the title labels and textfields we found that this was not a good pattern because it adds to the complexity of focusable elements and doesn’t provide non-visual value.

🛠 How

We disabled accessibility on all title labels. We then set the accessibility label of the textfields to the title labels text.

👀 See

✅ Acceptance criteria

on all the following: iOS 10, iOS 11 & iOS 12
with Voice Over turned ON

Test Change Email Screen

Test Tap on row

Navigate to Settings > Account > Change email
Tap New email row, should read New email - Email Address - Text Field - double tap to edit
Tap Current password row, should read Current password - Password - Text Field - double tap to edit

Test Double Tap on TextField

Navigate to Settings > Account > Change email
Tap New email row, should read New email - Email Address - Text Field - double tap to edit
Double-tap should now read New Email - text field - is editing - "Email Address" - character mode - insertion point at start
Tap Current Password - Secure Text Field - is editing - "Password" - character mode - insertion point at start

Test Tap on row when text is present

Navigate to Settings > Account > Change email
Tap New email row, should read New email - (email address read) - Text Field - double tap to edit
Tap Current password row, should read Current password - (number of characters) - Secure Text Field - double tap to edit

Test Tap on textfield when text is present

Navigate to Settings > Account > Change email
Enter some text on each textfield
Double Tap on one of the textfields so that cursor is present
For New email row should read: New Email - text field - is editing - (character) - character mode - insertion point at end
For Current password row should read: Current Password - Secure Text Field - is editing - (number of characters) - character mode - insertion point at end

Test Change Password Screen

Test Tap on row

Navigate to Settings > Account > Change password
Tap Current password row, should read Current password - Password - Text Field - double tap to edit
Tap New password row, should read New password - Password - Text Field - double tap to edit
Tap Confirm new password row, should read Confirm new password - Password - Text Field - double tap to edit

Test Tap on row when text is present

Navigate to Settings > Account > Change password
Tap Current password row, should read Current password - (number of characters - Secure Text Field - double tap to edit
Tap New password row, should read New password -(number of characters) character(s) - Secure Text Field - double tap to edit
Tap Confirm new password row, should read Confirm new password -(number of characters) - Secure Text Field - double tap to edit
The focus area has the same height for all fields Current password, New password & Confirm new password

Test Tap on textfield when text is present

Navigate to Settings > Account > Change password
Enter some text on each textfield
Double Tap on one of the textfields so that cursor is present
For Current password row should read: Current Password - Secure Text Field - is editing - (number of characters) - character mode - insertion point at end
For New password row should read: New Password - Secure Text Field - is editing - (number of characters) - character mode - insertion point at end
For Confirm new password row should read: Confirm New Password - Secure Text Field - is editing - (number of characters) - character mode - insertion point at end

dusi · 2019-01-08T05:37:46Z

Right now the acceptance criteria only accounts for the default state (placeholder).,.can we potentially update it with additional state (after user has entered some text)?

dusi · 2019-01-08T17:24:24Z

I've noticed that the New password field focus area is smaller than the other fields..looking at the Settings.storyboard I found out that we don't use consistent alignment between our stack views.

This is a quick example of what I meant by focus area hight issue:

Correct	Incorrect

This can be fixed by setting the alignment to Fill for both stack views.

dusi · 2019-01-08T21:52:01Z

Kickstarter-iOS/Views/Cells/FindFriendsCell.swift

@@ -13,8 +13,10 @@ final class FindFriendsCell: UITableViewCell, ValueCell, NibLoading {
  private let viewModel: FindFriendsCellViewModelType = FindFriendsCellViewModel()

  func configureWith(value: SettingsCellValue) {
-    let user = value.user
-    self.viewModel.inputs.configure(with: user)
+    _ = self


Are the following changes necessary?

FindFriendsCell

SettingsAccountWarningCell

SettingsTableViewCell

SettingsViewController

some of the Settings.storyboard (mostly UILabel/UITextField prop names)

HelpType

SettingsCellType

README.md (just the installation instrucitons) necessary?

They appear as duplicates from previous PRs so we should only include changes related to change email/password input fields a11y.

Didn't touch those files so not sure why this is happening again.

dusi · 2019-01-10T19:01:01Z

♿️ Settings > Account > Change email/password - Input fields

Scollaco · 2019-01-15T22:04:06Z

Could we update the AC when the TextFields contain text? If we tap on a text field with text, the VoiceOver will say in case of Passwors text field:
TextField name - is editing - x characters - keyboard mode - insertion point localization. For example: Current Password - Secure Text Field - is editing - 6 characters - character mode - insertion point at end

And email textField:
TextField name - text field - is editing - input text - keyboard mode - insertion point localization:
New Email - text field - is editing - some text - character mode - insertion point at end

Scollaco

Very nice, @cdolm92 ⭐️ . I will re-review once the AC is updated, but it's looking good so far. I left a suggestion related to strings.

Scollaco · 2019-01-15T21:28:37Z

Kickstarter-iOS/Views/Controllers/ChangeEmailViewController.swift


    _ = self.newEmailTextField
      |> settingsEmailFieldAutoFillStyle
+      |> \.accessibilityLabel %~ { _ in self.newEmailLabel.text }


Since the string is not being evaluated for localization, we don't need to use %~. \.accessibilityLabel .~ self.newEmailLabel.text should be enough

Scollaco · 2019-01-15T21:28:49Z

Kickstarter-iOS/Views/Controllers/ChangeEmailViewController.swift


    _ = self.passwordTextField
      |> settingsPasswordFormFieldAutoFillStyle
+      |> \.accessibilityLabel %~ { _ in self.passwordLabel.text }


Same thing here.

Scollaco · 2019-01-15T21:29:09Z

Kickstarter-iOS/Views/Controllers/ChangePasswordViewController.swift

@@ -74,6 +77,7 @@ final class ChangePasswordViewController: UIViewController, MessageBannerViewCon

    _ = confirmNewPasswordTextField
      |> settingsNewPasswordFormFieldAutoFillStyle
+      |> \.accessibilityLabel %~ { _ in self.confirmNewPasswordLabel.text }


Scollaco · 2019-01-15T21:29:16Z

Kickstarter-iOS/Views/Controllers/ChangePasswordViewController.swift

@@ -85,6 +89,7 @@ final class ChangePasswordViewController: UIViewController, MessageBannerViewCon

    _ = currentPasswordTextField
      |> settingsPasswordFormFieldAutoFillStyle
+      |> \.accessibilityLabel %~ { _ in self.currentPasswordLabel.text }


Scollaco · 2019-01-15T21:29:21Z

Kickstarter-iOS/Views/Controllers/ChangePasswordViewController.swift

@@ -98,6 +103,7 @@ final class ChangePasswordViewController: UIViewController, MessageBannerViewCon

    _ = newPasswordTextField
      |> settingsNewPasswordFormFieldAutoFillStyle
+      |> \.accessibilityLabel %~ { _ in self.newPasswordLabel.text }


* textfield a11y improvement in change email and password screens * change stackview alignment * new snapshots * fixed strings

* Accessibility - Settings - Dismiss button (#532) * Add accessibility label to dismiss button & fix the minimum width * Set navigation item properties using key paths * Accessibility - Settings - Rows (#534) * Add button traits to settings cells * Invert disclosure indicators in Settings > Help * Add accessibility hint in case email is unverified (#535) * Accessibility - Settings - Change email - Current email (#537) * Group current email title and value for a better accessibility * Simplify the way we set accessibility label on current email container * ♿️ - Settings - Message Banner (#539) * Accessibility - Settings - Dismiss button (#532) * Add accessibility label to dismiss button & fix the minimum width * Set navigation item properties using key paths * Accessibility - Settings - Rows (#534) * Add button traits to settings cells * Invert disclosure indicators in Settings > Help * Add accessibility hint in case email is unverified (#535) * Focuses Voice Over on the banner when presented * Delay banner dismissal a bit more when VoiceOver is ON * Localize banner message * Expose delete my kickstarter account button instead of the label (#549) * ♿️- Settings - Notifications - Heading (#550) * Accessibility - Settings - Dismiss button (#532) * Add accessibility label to dismiss button & fix the minimum width * Set navigation item properties using key paths * Accessibility - Settings - Rows (#534) * Add button traits to settings cells * Invert disclosure indicators in Settings > Help * Accessibility - Settings - Dismiss button (#532) * Add accessibility label to dismiss button & fix the minimum width * Set navigation item properties using key paths * Accessibility - Settings - Rows (#534) * Add button traits to settings cells * Invert disclosure indicators in Settings > Help * Add accessibility hint in case email is unverified (#535) * Accessibility - Settings - Change email - Current email (#537) * Group current email title and value for a better accessibility * Simplify the way we set accessibility label on current email container * a11y for notification settings * swiftlint fix * ♿️- Settings - Change email / Change password input fields (#545) * textfield a11y improvement in change email and password screens * change stackview alignment * new snapshots * fixed strings * ♿️ - Settings - Switch Toggle Rows (#544) * Fix newsletter switch cell accessibility * Fix project notifications switch cell accessibility * Fix settings privacy switch cell accessibility * Refocus VoiceOver on the cell when the confirmation dialog disappears * Place UIAccessibility notification behind a VoiceOver running check * Prevent refreshing the following cell when confirming the alert dialogue * Alphabetize properties * Localize properly * ♿️ - Settings - Notifications - Daily Digest picker bug (#547) * corrected picker view hidden in iphone X in VM * Library tests * Update snapshot tests * vm and snapshot tests * snapshot tests * wip - digest picker is selected * properly aligned tableview constraint * removed output to hide picker * emailPickerViewHeight * VoiceOver re-focuses on the Email frequency cell * adjusted animation added guard * changed comment * Update Kickstarter-iOS/Views/Controllers/SettingsNotificationsViewController.swift Co-Authored-By: cdolm92 <cdolm92@gmail.com> * Apply suggestions from code review comments adjustment Co-Authored-By: cdolm92 <cdolm92@gmail.com> * Update Kickstarter-iOS/Views/Controllers/SettingsNotificationsViewController.swift Co-Authored-By: cdolm92 <cdolm92@gmail.com> * ♿️ - Settings > Notifications - Manage project notifications + Email frequency (#552) * Add button traits to project notifications & email frequency rows * Remove unused accessibility hint * Remove accessibility value * Infer UIView.AnimationOptions type * Combine conditions * Use more functional return Co-Authored-By: dusi <pavel.dusatko@gmail.com> * Fix Github's messed up suggestion * Update accessibility label to better match with localized server errors * Add localized string * Use localized string * Align filter * Remove unused call to setNeedsLayout

cdolm92 changed the base branch from master to a11y-settings January 7, 2019 20:39

cdolm92 changed the title ~~[WIP] ♿️- Settings - Change email row - New email textfield/Current password textfield & Change password rows~~ ♿️- Settings - Change email row - New email textfield/Current password textfield & Change password rows Jan 7, 2019

cdolm92 requested review from dusi and justinswart January 7, 2019 20:49

cdolm92 assigned justinswart Jan 7, 2019

cdolm92 added the needs review label Jan 7, 2019

dusi force-pushed the a11y-settings branch from fa4868c to b63ce43 Compare January 7, 2019 21:32

dusi changed the title ~~♿️- Settings - Change email row - New email textfield/Current password textfield & Change password rows~~ ♿️- Settings - Change email / Change password input fields Jan 8, 2019

dusi reviewed Jan 8, 2019

View reviewed changes

dusi force-pushed the a11y-settings branch from 00772d7 to d6721f4 Compare January 8, 2019 21:59

cdolm92 force-pushed the a11y-settings-change-email-row-new-email-textfield branch from 125ced4 to eb6f486 Compare January 9, 2019 20:46

cdolm92 added 3 commits January 9, 2019 16:08

textfield a11y improvement in change email and password screens

7de9dd9

change stackview alignment

cdda744

new snapshots

0dde3b9

cdolm92 force-pushed the a11y-settings-change-email-row-new-email-textfield branch from eb6f486 to 0dde3b9 Compare January 9, 2019 21:09

Scollaco reviewed Jan 15, 2019

View reviewed changes

Scollaco approved these changes Jan 16, 2019

View reviewed changes

fixed strings

ffe41b7

cdolm92 merged commit 5a7f312 into a11y-settings Jan 16, 2019

cdolm92 deleted the a11y-settings-change-email-row-new-email-textfield branch January 16, 2019 16:56

dusi pushed a commit that referenced this pull request Jan 17, 2019

♿️- Settings - Change email / Change password input fields (#545)

8f8480b

* textfield a11y improvement in change email and password screens * change stackview alignment * new snapshots * fixed strings

dusi pushed a commit that referenced this pull request Jan 29, 2019

♿️- Settings - Change email / Change password input fields (#545)

89dc48d

* textfield a11y improvement in change email and password screens * change stackview alignment * new snapshots * fixed strings

dusi mentioned this pull request Jan 29, 2019

♿️ - Settings #546

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

♿️- Settings - Change email / Change password input fields #545

♿️- Settings - Change email / Change password input fields #545

cdolm92 commented Jan 7, 2019 •

edited by Scollaco

Loading

dusi commented Jan 8, 2019

dusi commented Jan 8, 2019

dusi Jan 8, 2019

cdolm92 Jan 9, 2019

dusi commented Jan 10, 2019

Scollaco commented Jan 15, 2019

Scollaco left a comment

Scollaco Jan 15, 2019

Scollaco Jan 15, 2019

Scollaco Jan 15, 2019

Scollaco Jan 15, 2019

Scollaco Jan 15, 2019

♿️- Settings - Change email / Change password input fields #545

♿️- Settings - Change email / Change password input fields #545

Conversation

cdolm92 commented Jan 7, 2019 • edited by Scollaco Loading

📲 What

🤔 Why

🛠 How

👀 See

✅ Acceptance criteria

dusi commented Jan 8, 2019

dusi commented Jan 8, 2019

dusi Jan 8, 2019

Choose a reason for hiding this comment

cdolm92 Jan 9, 2019

Choose a reason for hiding this comment

dusi commented Jan 10, 2019

Scollaco commented Jan 15, 2019

Scollaco left a comment

Choose a reason for hiding this comment

Scollaco Jan 15, 2019

Choose a reason for hiding this comment

Scollaco Jan 15, 2019

Choose a reason for hiding this comment

Scollaco Jan 15, 2019

Choose a reason for hiding this comment

Scollaco Jan 15, 2019

Choose a reason for hiding this comment

Scollaco Jan 15, 2019

Choose a reason for hiding this comment

cdolm92 commented Jan 7, 2019 •

edited by Scollaco

Loading