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

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

Open
rudrankriyam 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 4 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
3 changes: 3 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,8 +44,11 @@ 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
Contributor

@Sameesunkaria Sameesunkaria Aug 15, 2019

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

@rudrankriyam rudrankriyam Aug 16, 2019

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
}
}
Expand Down
11 changes: 11 additions & 0 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 @@ -121,6 +121,7 @@ final class EmojiPicker: UIView, RCEmojiKitLocalizable {
skinToneButton.layer.cornerRadius = skinToneButton.frame.width/2
skinToneButton.backgroundColor = currentSkinTone.color
skinToneButton.showsTouchWhenHighlighted = true
skinToneButton.accessibilityLabel = localized("skinTone.label")
}
}

Expand All @@ -129,6 +130,11 @@ final class EmojiPicker: UIView, RCEmojiKitLocalizable {
currentSkinToneIndex = currentSkinToneIndex % skinTones.count
skinToneButton.backgroundColor = currentSkinTone.color
emojisCollectionView.reloadData()

if let currentSkinToneName = currentSkinTone.name {
skinToneButton.accessibilityLabel =
localized("skinTone.label") + localized("currentSkinTone.label") + "\(currentSkinToneName))"
}
}

var emojiPicked: ((String) -> Void)?
Expand Down Expand Up @@ -180,6 +186,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 +223,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 +239,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
5 changes: 5 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,8 @@
"categories.flags" = "FLAGS"; //TODO

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

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
5 changes: 5 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,8 @@
"categories.flags" = "FLAGGEN";

"reactorlist.title" = "Reaktionen";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
4 changes: 4 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,7 @@

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

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
4 changes: 4 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,7 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone.";
"currentSkinTone.label" = "Current skintone,";
4 changes: 4 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,7 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
6 changes: 6 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,9 @@
"categories.flags" = "FLAGS"; //TODO

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

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO

4 changes: 4 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,7 @@

"reactorlist.title" = "Reazioni";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
4 changes: 4 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,7 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
5 changes: 5 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,8 @@
"categories.flags" = "FLAGI";

"reactorlist.title" = "Reakcje";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
5 changes: 5 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,8 @@
"categories.flags" = "BANDEIRAS";

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

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
5 changes: 5 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,8 @@
"categories.flags" = "BANDEIRAS";

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

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
4 changes: 4 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,7 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO
4 changes: 4 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,7 @@

"reactorlist.title" = "Reactions";

// Accessibility

"skinTone.label" = "Change skintone."; // TODO
"currentSkinTone.label" = "Current skintone,"; // TODO