Accessibility Fix #6
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Author
|
@Vasanth-S / @vivekvijayakrishnan Please review. Have created to 2.2.9 release only to avoid potential conflicts in future - can change once we decide the actual branch for 2.2.10 release. |
frags51
changed the base branch from
reactnative/release-2.2.9
to
reactnative/release-2.2.11
pragadeeshk
approved these changes
Sep 5, 2021
pragadeeshk
left a comment
pragadeeshk
left a comment
There was a problem hiding this comment.
Minor comment. Rest all looks good to me.
vivekkozhisseri
approved these changes
Sep 6, 2021
vivekkozhisseri
pushed a commit
that referenced
this pull request
Sep 20, 2021
* Upgraded the version to 2.2.9 * [React-Native] Screen reader accessibility fixes (microsoft#5982) * acc fixes * Switch-Android accessibility * Change role of picker * Prevent focus on image in absence of altText Co-authored-by: Supreet Singh <supsing@microsoft.com> * Updated the alignment and margin styles for the container, columnset, column, wrapper and image component (microsoft#6041) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Added theme config support for picker and dateTimePicker (microsoft#6054) * Accessibility fix for inline-actions on inputs (microsoft#6060) * Fix for inline-actions * Input label * fact - set Co-authored-by: Supreet Singh <supsing@microsoft.com> * Handled the bleed property. In web its not having condition for fist and last. so removed this condition (microsoft#6084) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * bg image shouldnt be focussed if altText is not present (microsoft#6096) Co-authored-by: Supreet Singh <supsing@microsoft.com> * Reactnative/handle bleed (microsoft#6163) * Handled the bleed property. In web its not having condition for fist and last. so removed this condition * Handled vertical content alignment and spacing none for the column * Handled the rich text block with/without paragraph Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Resolved android picker styling issues (microsoft#6179) * Theming suppor to Input.Toggle (microsoft#6191) * Theming to switch? * comment Co-authored-by: Supreet Singh <supsing@microsoft.com> * Accessibility fix for inline-actions on inputs (microsoft#6060) * Fix for inline-actions * Input label * fact - set Co-authored-by: Supreet Singh <supsing@microsoft.com> * Handled the bleed property. In web its not having condition for fist and last. so removed this condition (microsoft#6084) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * bg image shouldnt be focussed if altText is not present (microsoft#6096) Co-authored-by: Supreet Singh <supsing@microsoft.com> * Reactnative/handle bleed (microsoft#6163) * Handled the bleed property. In web its not having condition for fist and last. so removed this condition * Handled vertical content alignment and spacing none for the column * Handled the rich text block with/without paragraph Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Resolved android picker styling issues (microsoft#6179) * Theming suppor to Input.Toggle (microsoft#6191) * Theming to switch? * comment Co-authored-by: Supreet Singh <supsing@microsoft.com> * Reactnative/handle vertical content alignment (#4) * Accessibility fix for inline-actions on inputs (microsoft#6060) * Fix for inline-actions * Input label * fact - set Co-authored-by: Supreet Singh <supsing@microsoft.com> * Handled the bleed property. In web its not having condition for fist and last. so removed this condition (microsoft#6084) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * bg image shouldnt be focussed if altText is not present (microsoft#6096) Co-authored-by: Supreet Singh <supsing@microsoft.com> * Reactnative/handle bleed (microsoft#6163) * Handled the bleed property. In web its not having condition for fist and last. so removed this condition * Handled vertical content alignment and spacing none for the column * Handled the rich text block with/without paragraph Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Resolved android picker styling issues (microsoft#6179) * Theming suppor to Input.Toggle (microsoft#6191) * Theming to switch? * comment Co-authored-by: Supreet Singh <supsing@microsoft.com> * Handled the vertical content alignment for container, column and columnset * Updated the snapshot Co-authored-by: Supreet Singh <supreet51.cs@gmail.com> Co-authored-by: Supreet Singh <supsing@microsoft.com> Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> Co-authored-by: Vivek Kozhisseri <vivekvijayakrishnan@gmail.com> * Revert "Reactnative/handle vertical content alignment (#4)" This reverts commit f759c88. * Updated Author details (#8) * Revert "Revert "Reactnative/handle vertical content alignment (#4)"" (#9) This reverts commit eb65e81. * Handled the Vertical Content Alignment and bleed property is hgandled for padding space. Intentionally commiting the commented code in container and element wrapper class, we will remove once VCA for column set is handled (#10) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Handled the Vertical content alignment and padding for the root level component (#11) * Hdndled the Vertical content alignment and padding for the root level components * Handled VCA columnset in the conatiner * Removed the padding for intermidiate components. Applied only to root component Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Updated version and repo * Implemented the underline property for thye textRun (#12) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Fixed padding issues and other alignment issues in `Input` elements (#14) * Fixed padding issues and other alighment issues * Resolved comments * Updated the margin and padding for the action items dynamically (#13) * Updated the margin and padding for the action items dynamically * Updated the horizobntal alignemnet with stretch scenario and isEnabled is handled for custom actions Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * Removed the underline color (#17) Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> * rtb italic, strikethrough (#18) Co-authored-by: Mohd Zaid <zanaseem@microsoft.com> * Accessibility Fix (#6) * Accessibility Fix * single line link * double focus fix * add import * add back rtb without paragraph * Add rich text block hyperlink for validation * Update payload Co-authored-by: Supreet Singh <supsing@microsoft.com> Co-authored-by: Ibrahim Sulaiman <ibrahim.sulaiman@imaginea.com> Co-authored-by: Supreet Singh <supreet51.cs@gmail.com> Co-authored-by: Supreet Singh <supsing@microsoft.com> Co-authored-by: IbrahimSulai <33604125+IbrahimSulai@users.noreply.github.com> Co-authored-by: Vivek Kozhisseri <vivek@Viveks-MacBook-Pro.local> Co-authored-by: Zaid Naseem <72800429+Zaidos9@users.noreply.github.com> Co-authored-by: Mohd Zaid <zanaseem@microsoft.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
It is not possible to bring focus to hyperlinks created using rich-text-block. It is a blocking experience for the screen reader user.
This PR also fixes double focus on Date/Time pickers and Switch input in Android.
Fix
(Have raised an issue with React native: facebook/react-native#32004, this fix is until RN resolves it).
Rich text block uses nested components, which are internally concatenated onto a single - Spannable in Android and NSAttributableString in iOS. However, the information about links is left out from an accessibility point of view.
To fix this, we create empty, invisible text components and place them where the hyperlink is supposed to be. We only have information about the position of each line and what text it contains, and not the position of the individual text. So, we create containers on lines that contain the hyperlink text. A similar approach is used in WhatsApp (known for good accessibility practices).
The focus order goes like this:
This is not the best fix if the same line contains two different links, but I think that will be a very small fraction of use cases and anyways it seems like the best we can do.
Validation
Can we be verified using the accessibility.json payload.
Have verified on an Adaptive card with hyperlinks (rich text block).
Screenshots (showing focus order on single line and multi-line spanning links)
