-
Notifications
You must be signed in to change notification settings - Fork 1.1k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Adds ARIA role support to Paper UIManager #12792
Conversation
In react-native v0.73, the `role` prop was switched from setting its value to `accessibilityRole` to a standalone native prop. This wires up the native prop behavior in the Paper UIManager for react-native-windows. Here is the table of ARIA role to UIA role in this commit: |**ARIA role**|**UIA role**| |alert|Text| |alertdialog|Window| |application|Group| |article|Document| |banner|Text| |button|Button| |cell|DataItem| |checkbox|CheckBox| |columnheader|HeaderItem| |combobox|ComboBox| |complementary|Text| |contentinfo|Text| |definition|Text| |dialog|Window| |directory|| |document|Document| |feed|| |figure|Image| |form|| |grid|DataGrid| |group|Group |heading|Text| |img|Image| |link|Hyperlink| |list|List| |listitem|ListItem| |log|| |main|| |marquee|| |math|| |menu|Menu| |menubar|MenuBar| |menuitem|MenuItem| |meter|| |navigation|| |none|Group| |note|Text| |option|| |presentation|| |progressbar|PrgressBar| |radio|RadioButton| |radiogroup|Group| |region|Group| |row|DataGrid| |rowgroup|Group| |rowheader|HeaderItem| |scrollbar|ScrollBar| |searchbox|Edit| |separator|Separator| |slider|Slider| |spinbutton|Spinner| |status|Text| |summary|Text| |switch|Group| |tab|TabItem| |table|Table| |tablist|Tab| |tabpanel|Group| |term|Text| |timer|Group| |toolbar|ToolBar| |tooltip|ToolTip| |tree|Tree| |treegrid|Tree| |treeitem|TreeItem|
@chiaramooney, @FalseLobster probably worth both of you looking at. |
Going to use the existing ARIA role mapping for Windows. Revisions incoming... |
Switches from ad hoc mappings to mappings defined here: https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-ariaspecification#w3c-aria-role-mapped-to-microsoft-active-accessibility-and-ui-automation Comments left inline for how the missing mappings were interpolated.
// Remaining mappings are: | ||
// "cell": DataItem (based on "gridcell" mapping) | ||
// "feed": List (based on "directory" mapping) | ||
// "figure": Image (based on "img" mapping) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It's probably worth using the ARIA Core Accessibility API Mapping as a reference since that's the source of truth for how ARIA should map to each platform's native a11y API in browsers. It should agree with the MSDN page and gives mappings for some of the ones you're missing here (for example, I noticed it says feed, figure should map to group, but I would check the other roles, too)
// "table": Grid (based on "grid" mapping) | ||
// "term": Group (based on "definition" mapping) | ||
switch (ariaRole) { | ||
case winrt::Microsoft::ReactNative::AriaRole::Alert: |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
It looks like this implementation persists the problem I described in #11432
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
My preference would be to fix Alert and RadioGroup to use the correct core-aam mapping, at the very least in this new 'role' prop if we can't fix accessibilityRole for backward compatibility reasons. I'd like the new ARIA inspired prop to be more rigorous in it's implementation of the aria spec.
Unclear why the Fabric E2E tests are timing out, haven't tried to run locally. If anyone is interested in taking a look, by all means! |
Description
Type of Change
Erase all that don't apply.
Why
In react-native v0.73, the
role
prop was switched from setting its value toaccessibilityRole
to a standalone native prop.Resolves #11886
What
This wires up the native prop behavior in the Paper UIManager for react-native-windows.
Uses ARIA role to UIA mappings defined here:
https://learn.microsoft.com/en-us/windows/win32/winauto/uiauto-ariaspecification#w3c-aria-role-mapped-to-microsoft-active-accessibility-and-ui-automation
Some ARIA roles are not explicitly defined in the linked document. The remaining mappings were interpolated from other ARIA role mappings (e.g.,
term
anddefinition
go hand-in-hand,table
mentionsgrid
should be used in some circumstances,none
andpresentation
are interchangeable, and there is no documentation onsummary
).Changelog
Should this change be included in the release notes: yes
Adds role prop support to react-native-windows.
Microsoft Reviewers: Open in CodeFlow