Merge pull request #17756 from wordpress-mobile/issue/15722-custom-ca…

…lendar-accessibility-improvements

Custom calendar VoiceOver improvements

RELEASE-NOTES.txt

@@ -1,6 +1,7 @@
 19.1
 -----
 * [*] Signup: Fixed bug where username selection screen could be pushed twice. [#17624]
+* [**] Accessibility: VoiceOver improvements on Activity Log and Schedule Post calendars [#17756]
 
 19.0
 -----

WordPress/Classes/ViewRelated/Activity/CalendarViewController.swift

@@ -11,6 +11,7 @@ class CalendarViewController: UIViewController {
     private var startDateLabel: UILabel!
     private var separatorDateLabel: UILabel!
     private var endDateLabel: UILabel!
+    private var header: UIStackView!
     private let gradient = GradientView()
 
     private var startDate: Date?
@@ -27,6 +28,17 @@ class CalendarViewController: UIViewController {
     private enum Constants {
         static let headerPadding: CGFloat = 16
         static let endDateLabel = NSLocalizedString("End Date", comment: "Placeholder for the end date in calendar range selection")
+        static let startDateLabel = NSLocalizedString("Start Date", comment: "Placeholder for the start date in calendar range selection")
+        static let rangeSummaryAccessibilityLabel = NSLocalizedString(
+            "Selected range: %1$@ to %2$@",
+            comment: "Accessibility label for summary of currently selected range. %1$@ is the start date, %2$@ is " +
+            "the end date.")
+        static let singleDateRangeSummaryAccessibilityLabel = NSLocalizedString(
+            "Selected range: %1$@ only",
+            comment: "Accessibility label for summary of currently single date. %1$@ is the date")
+        static let noRangeSelectedAccessibilityLabelPlaceholder = NSLocalizedString(
+            "No date range selected",
+            comment: "Accessibility label for no currently selected range.")
     }
 
     /// Creates a full screen year calendar controller
@@ -57,7 +69,7 @@ class CalendarViewController: UIViewController {
         )
 
         // Configure headers and add the calendar to the view
-        let header = startEndDateHeader()
+        configureHeader()
         let stackView = UIStackView(arrangedSubviews: [
                                             header,
                                             calendarCollectionView
@@ -136,13 +148,21 @@ class CalendarViewController: UIViewController {
             endDateLabel.textColor = .textSubtle
             separatorDateLabel.textColor = .textSubtle
         }
+
+        header.accessibilityLabel = accessibilityLabelForRangeSummary(startDate: startDate, endDate: endDate)
     }
 
-    private func startEndDateHeader() -> UIView {
+    private func configureHeader() {
+        header = startEndDateHeader()
+        resetLabels()
+    }
+
+    private func startEndDateHeader() -> UIStackView {
         let header = UIStackView(frame: .zero)
         header.distribution = .fill
 
         let startDate = UILabel()
+        startDate.isAccessibilityElement = false
         startDateLabel = startDate
         startDate.font = WPStyleGuide.fontForTextStyle(.title3, fontWeight: .semibold)
         if view.effectiveUserInterfaceLayoutDirection == .leftToRight {
@@ -156,13 +176,15 @@ class CalendarViewController: UIViewController {
         startDate.widthAnchor.constraint(equalTo: header.widthAnchor, multiplier: 0.47).isActive = true
 
         let separator = UILabel()
+        separator.isAccessibilityElement = false
         separatorDateLabel = separator
         separator.font = WPStyleGuide.fontForTextStyle(.title3, fontWeight: .semibold)
         separator.textAlignment = .center
         header.addArrangedSubview(separator)
         separator.widthAnchor.constraint(equalTo: header.widthAnchor, multiplier: 0.06).isActive = true
 
         let endDate = UILabel()
+        endDate.isAccessibilityElement = false
         endDateLabel = endDate
         endDate.font = WPStyleGuide.fontForTextStyle(.title3, fontWeight: .semibold)
         if view.effectiveUserInterfaceLayoutDirection == .leftToRight {
@@ -175,7 +197,8 @@ class CalendarViewController: UIViewController {
         header.addArrangedSubview(endDate)
         endDate.widthAnchor.constraint(equalTo: header.widthAnchor, multiplier: 0.47).isActive = true
 
-        resetLabels()
+        header.isAccessibilityElement = true
+        header.accessibilityTraits = [.header, .summaryElement]
 
         return header
     }
@@ -200,7 +223,7 @@ class CalendarViewController: UIViewController {
     }
 
     private func resetLabels() {
-        startDateLabel.text = NSLocalizedString("Start Date", comment: "Placeholder for the start date in calendar range selection")
+        startDateLabel.text = Constants.startDateLabel
 
         separatorDateLabel.text = "-"
 
@@ -210,6 +233,22 @@ class CalendarViewController: UIViewController {
             label?.textColor = .textSubtle
             label?.font = WPStyleGuide.fontForTextStyle(.title3)
         }
+
+        header.accessibilityLabel = accessibilityLabelForRangeSummary(startDate: nil, endDate: nil)
+    }
+
+    private func accessibilityLabelForRangeSummary(startDate: Date?, endDate: Date?) -> String {
+        switch (startDate, endDate) {
+        case (nil, _):
+            return Constants.noRangeSelectedAccessibilityLabelPlaceholder
+        case (.some(let startDate), nil):
+            let startDateString = formatter.string(from: startDate)
+            return String.localizedStringWithFormat(Constants.singleDateRangeSummaryAccessibilityLabel, startDateString)
+        case (.some(let startDate), .some(let endDate)):
+            let startDateString = formatter.string(from: startDate)
+            let endDateString = formatter.string(from: endDate)
+            return String.localizedStringWithFormat(Constants.rangeSummaryAccessibilityLabel, startDateString, endDateString)
+        }
     }
 
     private func setUpGradient() {

WordPress/Classes/ViewRelated/Post/Scheduling/CalendarCollectionView.swift

@@ -287,7 +287,7 @@ extension DateCell {
 
         dateLabel.text = state.text
 
-        dateFormatter.setLocalizedDateFormatFromTemplate("MMM d, yyyy")
+        dateFormatter.setLocalizedDateFormatFromTemplate("EEE MMM d, yyyy")
         dateLabel.accessibilityLabel = dateFormatter.string(from: state.date)
         dateLabel.accessibilityTraits = .button
 
@@ -304,6 +304,10 @@ extension DateCell {
         rightPlaceholder.backgroundColor = .clear
         dateLabel.backgroundColor = .clear
         textColor = .text
+        dateLabel.accessibilityTraits = .button
+        if state.isSelected {
+            dateLabel.accessibilityTraits.insert(.selected)
+        }
 
         switch position(for: state.date, startDate: startDate, endDate: endDate) {
         case .middle:
@@ -379,6 +383,7 @@ class CalendarYearHeaderView: JTACMonthReusableView {
         titleLabel.font = .preferredFont(forTextStyle: .headline)
         titleLabel.textAlignment = .center
         titleLabel.textColor = Constants.titleColor
+        titleLabel.accessibilityTraits = .header
 
         let weekdaysView = WeekdaysHeaderView(calendar: Calendar.current)
         stackView.addArrangedSubview(weekdaysView)

WordPress/Classes/ViewRelated/Post/Scheduling/CalendarMonthView.swift

@@ -130,6 +130,12 @@ class CalendarHeaderView: UIStackView {
         static let buttonSize = CGSize(width: 24, height: 24)
         static let titeLabelColor: UIColor = .neutral(.shade60)
         static let dateFormat = "MMMM, YYYY"
+        static let previousMonthButtonAccessibilityLabel = NSLocalizedString(
+            "Previous month",
+            comment: "Accessibility label for the button which shows the previous month in the monthly calendar view")
+        static let nextMonthButtonAccessibilityLabel = NSLocalizedString(
+            "Next month",
+            comment: "Accessibility label for the button which shows the previous month in the monthly calendar view")
     }
 
     typealias TargetSelector = (target: Any?, selector: Selector)
@@ -153,9 +159,11 @@ class CalendarHeaderView: UIStackView {
         let previousButton = UIButton(frame: CGRect(origin: .zero, size: Constants.buttonSize))
         previousButton.setContentHuggingPriority(.defaultHigh, for: .horizontal)
         previousButton.setImage(UIImage.gridicon(.chevronLeft).imageFlippedForRightToLeftLayoutDirection(), for: .normal)
+        previousButton.accessibilityLabel = Constants.previousMonthButtonAccessibilityLabel
 
         let forwardButton = UIButton(frame: CGRect(origin: .zero, size: Constants.buttonSize))
         forwardButton.setImage(UIImage.gridicon(.chevronRight).imageFlippedForRightToLeftLayoutDirection(), for: .normal)
+        forwardButton.accessibilityLabel = Constants.nextMonthButtonAccessibilityLabel
 
         forwardButton.setContentHuggingPriority(.defaultHigh, for: .horizontal)
 
@@ -192,6 +200,7 @@ class WeekdaysHeaderView: UIStackView {
             label.textAlignment = .center
             label.font = UIFont.preferredFont(forTextStyle: .caption1)
             label.textColor = .neutral(.shade30)
+            label.isAccessibilityElement = false
             return label
         }))
         self.distribution = .fillEqually