This patch addresses 2 related issues:
1) Browser layout times in Chrome increase when elements use a lot of CSS class
names. This begins to add up for larger trees.
2) React Native supports passing 'null' values for styles. This can remove base
styles defined using 'StyleSheet' in the implementation of components like View
and Text.
Both of these issues can be avoided, and some runtime logic and computation
removed, by moving the base styles to static CSS rules. Comparisons of the
"benchmark" UI tests (which only render View) indicate that total times in
Chrome are reduced by ~20% with almost all of those savings coming from a
~33% reduction in layout-related timings.
To avoid style conflicts, static CSS rules are inserted before atomic CSS rules. The modality-related focus style is now inserted into the in-memory style sheet, making it available in SSR output.
Ref #1136Close#1165
React Native 0.57 introduced 'accessibilityRole' and
'accessibilityStates' as cross-platform accessibility APIs to replace
'accessibilityComponentType' and 'accessibilityTraits' for Android and
iOS.
React Native for Web has supported the 'accessibilityRole' for a while.
This patch maps some of the values defined in React Native to web
equivalents, and continues to allow a larger selection of roles for web
apps. It also adds support for 'accessibilityStates', mapping values to
ARIA states with boolean values and expanding support beyond 'disabled'
and 'selected'.
Fix#1112Close#1113
Inserting unprefixed CSS keyframes rules causes a `SYNTAX_ERR: DOM Exception
12` error in Android 5.1. A similar issue with inserting rules containing
vendor-prefixed pseudo-selectors was patched by wrapping rule in `@media all
{}` blocks. This patch removes the media query wrapper from keyframe animations
(as it doesn't prevent the error) and relies on `CSSStyleSheet::insertRule`
being called within a try-catch block.
Fix#1199Close#1210
Script time in the benchmark was profiled by adding `console.profile` around
the timings for script time. The call to Array.join in the resolve function
stood out. Since the code already iterates over the array it can run slightly
faster by building the cache key in that loop instead.
Close#1213
Not every item that may be rendered by a ScrollView will forward 'style', so cloning the item element is not safe. Instead, we can wrap the item in a 'View' and apply the styles for the sticky header to this element.
Close#1175
Inserting and deleting the CSS ':focus' rule triggers styles recalculation for the
entire DOM tree which results in performance degradation on focus and makes the
keyboard very slow to open in Safari iOS.
This commit fixes the issue by picking up the upstream changes to the W3C
focus-visible polyfill. A class name is applied to elements when they receive
focus via keyboard. The related CSS rule is inserted only once into the style
sheet. This performs much better since the browser needs to recalculate styles
only for the focused element and its small subtree.
Fix#1155Close#1169
Ensure that programmatic focus can be moved to any element. Each
instance of a primitive component type (e.g., `View`, `Text`, etc.)
includes a `focus` method. However, on the web only certain elements can
receive programmatic focus by default: those that can also receive
keyboard focus, e.g., `a`, `button`, `input`, etc. All other element
types must set `tabIndex="-1"` in order to be programmatically focusable
without also being focusable via keyboard or mouse.
Fix#1099
Calculating the `location{X,Y}` values for events requires a call to
`getBoundingClientRect`. To prevent unnecessary performance costs, these values
are implemented as getters and will only make the DOM API call when accessed in
application code.
Close#1157
Use of 'pan-x' and 'pan-y' on ScrollView prevents the browser handling
scrolling of a parent ScrollView that is scrollable along the other axis.
Fix#1160Close#1161
