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.
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)
microsoft-github-policy-service
bot
added
the
Needs: Author Feedback
| // "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.
It looks like this implementation persists the problem I described in #11432
There was a problem hiding this comment.
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.
microsoft-github-policy-service
bot
removed
the
Needs: Author Feedback
|
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! |
jonthysell
added
Area: Paper
Old Architecture
Description
Type of Change
Erase all that don't apply.
Why
In react-native v0.73, the
roleprop was switched from setting its value toaccessibilityRoleto 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.,
termanddefinitiongo hand-in-hand,tablementionsgridshould be used in some circumstances,noneandpresentationare 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