Skip to content
This repository has been archived by the owner on Jun 7, 2020. It is now read-only.

[WIP] [NEW] Project 08 - Adding Reactions VoiceOver accessible #2746

Open
wants to merge 5 commits into
base: develop
Choose a base branch
from
Open

[WIP] [NEW] Project 08 - Adding Reactions VoiceOver accessible #2746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a450410
Adding reactions
rudrankriyam Aug 7, 2019
6548a61
add currentSkinTone
rudrankriyam Aug 11, 2019
3607d2b
emojiLabel accessibility header
rudrankriyam Aug 11, 2019
7dd9041
custom emoji double swipe fix
rudrankriyam Aug 13, 2019
46d200c
changeSkinTone button accessibility improvements
rudrankriyam Aug 19, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/Views/EmojiPicker/EmojiCollectionViewCell.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,13 @@ final class EmojiCollectionViewCell: UICollectionViewCell {
guard let url = url else { return }
ImageManager.loadImage(with: url, into: emojiImageView)
emojiImageView.isHidden = false
emojiImageView.isAccessibilityElement = true
emojiLabel.accessibilityElementsHidden = true
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You would wanna undo these changes in the .standard case. Because, the cells are reusable and later when the same cell is populated with a standard emoji, it'll be skipped by voiceover.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ouch. I forgot this. I will fix this.

case .standard(let string):
emojiLabel.text = string
emojiImageView.accessibilityLabel = string
emojiLabel.isHidden = false
emojiLabel.accessibilityElementsHidden = false
}
}
}
Expand Down
25 changes: 17 additions & 8 deletions Rocket.Chat/External/RCEmojiKit/Views/EmojiPicker/EmojiPicker.swift
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,13 +93,13 @@ final class EmojiPicker: UIView, RCEmojiKitLocalizable {

@IBOutlet weak var emojisCollectionView: UICollectionView!

let skinTones: [(name: String?, color: UIColor)] = [
(name: nil, color: #colorLiteral(red: 0.999120295, green: 0.8114234805, blue: 0.06628075987, alpha: 1)),
(name: "tone1", color: #colorLiteral(red: 0.982526958, green: 0.8808286786, blue: 0.7670835853, alpha: 1)),
(name: "tone2", color: #colorLiteral(red: 0.8934452534, green: 0.7645885944, blue: 0.6247871518, alpha: 1)),
(name: "tone3", color: #colorLiteral(red: 0.7776196599, green: 0.6034522057, blue: 0.4516467452, alpha: 1)),
(name: "tone4", color: #colorLiteral(red: 0.6469842792, green: 0.4368215203, blue: 0.272474587, alpha: 1)),
(name: "tone5", color: #colorLiteral(red: 0.391161263, green: 0.3079459369, blue: 0.2550256848, alpha: 1))
let skinTones: [(name: String?, color: UIColor, accessibilityName: String)] = [
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Large Tuple Violation: Tuples should have at most 2 members. (large_tuple)

(name: nil, color: #colorLiteral(red: 0.999120295, green: 0.8114234805, blue: 0.06628075987, alpha: 1), "skinTone.default"),
(name: "tone1", color: #colorLiteral(red: 0.982526958, green: 0.8808286786, blue: 0.7670835853, alpha: 1), "skinTone.tone1"),
(name: "tone2", color: #colorLiteral(red: 0.8934452534, green: 0.7645885944, blue: 0.6247871518, alpha: 1), "skinTone.tone2"),
(name: "tone3", color: #colorLiteral(red: 0.7776196599, green: 0.6034522057, blue: 0.4516467452, alpha: 1), "skinTone.tone3"),
(name: "tone4", color: #colorLiteral(red: 0.6469842792, green: 0.4368215203, blue: 0.272474587, alpha: 1), "skinTone.tone4"),
(name: "tone5", color: #colorLiteral(red: 0.391161263, green: 0.3079459369, blue: 0.2550256848, alpha: 1), "skinTone.tone5")
]

var currentSkinToneIndex: Int {
Expand All @@ -112,7 +112,7 @@ final class EmojiPicker: UIView, RCEmojiKitLocalizable {
}
}

var currentSkinTone: (name: String?, color: UIColor) {
var currentSkinTone: (name: String?, color: UIColor, accessibilityName: String) {
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Large Tuple Violation: Tuples should have at most 2 members. (large_tuple)

return skinTones[currentSkinToneIndex]
}

Expand All @@ -121,13 +121,17 @@ final class EmojiPicker: UIView, RCEmojiKitLocalizable {
skinToneButton.layer.cornerRadius = skinToneButton.frame.width/2
skinToneButton.backgroundColor = currentSkinTone.color
skinToneButton.showsTouchWhenHighlighted = true
skinToneButton.accessibilityLabel =
localized("skinTone.label") + localized("currentSkinTone.label")
skinToneButton.accessibilityValue = localized(currentSkinTone.accessibilityName)
}
}

@IBAction func didPressSkinToneButton(_ sender: UIButton) {
currentSkinToneIndex += 1
currentSkinToneIndex = currentSkinToneIndex % skinTones.count
skinToneButton.backgroundColor = currentSkinTone.color
skinToneButton.accessibilityValue = localized(currentSkinTone.accessibilityName)
emojisCollectionView.reloadData()
}

Expand Down Expand Up @@ -180,6 +184,8 @@ final class EmojiPicker: UIView, RCEmojiKitLocalizable {
let categoryItems = currentCategories.map { category -> UITabBarItem in
let image = UIImage(named: category.name) ?? UIImage(named: "custom")
let item = UITabBarItem(title: nil, image: image, selectedImage: image)
item.isAccessibilityElement = true
item.accessibilityLabel = category.name
item.imageInsets = UIEdgeInsets(top: 6, left: 0, bottom: -6, right: 0)
return item
}
Expand Down Expand Up @@ -215,6 +221,7 @@ extension EmojiPicker: UICollectionViewDataSource {
) as? EmojiPickerSectionHeaderView else { return UICollectionReusableView() }

headerView.textLabel.text = localized("categories.\(currentCategories[indexPath.section].name)")
headerView.textLabel.accessibilityTraits = .header

return headerView
}
Expand All @@ -230,6 +237,8 @@ extension EmojiPicker: UICollectionViewDataSource {

if let file = emoji.imageUrl {
cell.emoji = .custom(URL(string: file))
cell.emojiImageView.accessibilityLabel = emoji.name
cell.emojiImageView.accessibilityTraits = .staticText
} else {
var toneModifier = ""
if emoji.supportsTones, let currentTone = currentSkinTone.name { toneModifier = "_\(currentTone)" }
Expand Down
4 changes: 4 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/Views/EmojiView.xib
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,10 @@
<imageView userInteractionEnabled="NO" contentMode="scaleToFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" translatesAutoresizingMaskIntoConstraints="NO" id="H0W-CD-Tmy" userLabel="Emoji Image" customClass="FLAnimatedImageView">
<rect key="frame" x="0.0" y="0.0" width="46" height="46"/>
<autoresizingMask key="autoresizingMask" flexibleMaxX="YES" flexibleMaxY="YES"/>
<accessibility key="accessibilityConfiguration">
<accessibilityTraits key="traits" staticText="YES"/>
<bool key="isElement" value="YES"/>
</accessibility>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" fixedFrame="YES" text="" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" minimumScaleFactor="0.01" adjustsLetterSpacingToFitWidth="YES" translatesAutoresizingMaskIntoConstraints="NO" id="hk6-3B-0Qu" userLabel="Emoji Label">
<rect key="frame" x="0.0" y="0.0" width="46" height="46"/>
Expand Down
11 changes: 11 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/cs.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,14 @@
"categories.flags" = "FLAGS"; //TODO

"reactorlist.title" = "Reactions"; //TODO

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
11 changes: 11 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/de.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,14 @@
"categories.flags" = "FLAGGEN";

"reactorlist.title" = "Reaktionen";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/el.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Αντιδράσεις";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/en.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone.";
"currentSkinTone.label" = "Current skintone,";
"skinTone.default" = "Default";
"skinTone.tone1" = "Light skin tone";
"skinTone.tone2" = "Medium light skin tone";
"skinTone.tone3" = "Medium skin tone";
"skinTone.tone4" = "Medium dark skin tone";
"skinTone.tone5" = "Dark skin tone";
10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/es.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
12 changes: 12 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/fr.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,15 @@
"categories.flags" = "FLAGS"; //TODO

"reactorlist.title" = "Reactions"; //TODO

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO

10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/it.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Reazioni";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/ja.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
11 changes: 11 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/pl.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,14 @@
"categories.flags" = "FLAGI";

"reactorlist.title" = "Reakcje";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
11 changes: 11 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/pt-BR.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,14 @@
"categories.flags" = "BANDEIRAS";

"reactorlist.title" = "Reações";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
11 changes: 11 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/pt-PT.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,3 +21,14 @@
"categories.flags" = "BANDEIRAS";

"reactorlist.title" = "Reações";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/zh-Hans.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO
10 changes: 10 additions & 0 deletions Rocket.Chat/External/RCEmojiKit/zh-Hant.lproj/RCEmojiKit.strings
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,13 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
"skinTone.default" = "Default"; // TODO
"skinTone.tone1" = "Light skin tone"; // TODO
"skinTone.tone2" = "Medium light skin tone"; // TODO
"skinTone.tone3" = "Medium skin tone"; // TODO
"skinTone.tone4" = "Medium dark skin tone"; // TODO
"skinTone.tone5" = "Dark skin tone"; // TODO