add litho accessibility rendering to Flipper accessibility mode [1/2]

Summary:
Litho renders differently based on whether applicable accessibility services are enabled. In Flipper's accessibility mode this will be forced (with the option to turn it off) so that you don't have to be running an accessibility service to actually see what someone running an accessibility service would.

Here's an example video of what the re-rendering does (this also happens on toggle of accessibility mode, this is just the settings option to force it):

{F137856647}

Reviewed By: jknoxville

Differential Revision: D9667222

fbshipit-source-id: 292353d89f07734f1e525f795b1d7daf4130e203

src/ui/components/Popover.js

@@ -18,7 +18,7 @@ const Anchor = styled('img')({
   transform: 'translate(-50%, calc(100% + 2px))',
 });
 
-const PopoverContainer = styled(FlexColumn)({
+const PopoverContainer = styled(FlexColumn)(props => ({
   backgroundColor: colors.white,
   borderRadius: 7,
   border: '1px solid rgba(0,0,0,0.3)',
@@ -28,24 +28,30 @@ const PopoverContainer = styled(FlexColumn)({
   bottom: 0,
   marginTop: 15,
   left: '50%',
-  transform: 'translate(-50%, calc(100% + 15px))',
+  minWidth: props.opts.minWidth || 'auto',
+  transform: props.opts.skewLeft
+    ? 'translate(calc(-100% + 22px), calc(100% + 15px))'
+    : 'translate(-50%, calc(100% + 15px))',
   overflow: 'hidden',
   '&::before': {
     content: '""',
     display: 'block',
     position: 'absolute',
     left: '50%',
-    transform: 'translateX(-50%)',
+    transform: props.opts.skewLeft
+      ? 'translateX(calc(-100% + 22px))'
+      : 'translateX(-50%)',
     height: 13,
     top: -13,
     width: 26,
     backgroundColor: colors.white,
   },
-});
+}));
 
 type Props = {|
   children: React.Node,
   onDismiss: Function,
+  forceOpts?: Object,
 |};
 
 export default class Popover extends PureComponent<Props> {
@@ -80,8 +86,15 @@ export default class Popover extends PureComponent<Props> {
 
   render() {
     return [
-      <Anchor src="./anchor.svg" key="anchor" />,
-      <PopoverContainer innerRef={this._setRef} key="popup">
+      <Anchor
+        src="./anchor.svg"
+        key="anchor"
+        opts={this.props.forceOpts || {}}
+      />,
+      <PopoverContainer
+        innerRef={this._setRef}
+        key="popup"
+        opts={this.props.forceOpts || {}}>
         {this.props.children}
       </PopoverContainer>,
     ];