Modal component parity for Fabric

This task captures the work to reach parity between Paper and Fabric for the native code for the `<Modal>` component.

# ComponentView

1. [x] Create the ModalHostViewComponentView (MHVCV)
2. [x] Register the ComponentView in the ComponentViewRegistry
3. [x] Get a new window to show with a Modal
4. [x] Add React Native Components within new window
5. [ ] Correctly position new windows
6. [ ] Add onDismiss
7. [ ] Add style properties (transparent, visible, animated ect.)

# APIs

See latest spec at https://reactnative.dev/docs/modal.

## Modal Props

API | Platform | RNW Paper | RNW Fabric | Notes 
--:|:--:|:--:|:--:|:--
| <ul><li>[ ] animated</li></ul> |  | No | Pri 1
| <ul><li>[ ] animationType</li></ul> |  | No | Pri 1
| <ul><li>[x] hardwareAccelerated</li></ul> | Android | No | No?
| <ul><li>[x] onDismiss</li></ul> | iOS | No | No?
| <ul><li>[x] onOrientationChange</li></ul> | iOS | No | No?
| <ul><li>[ ] onRequestClose</li></ul> |  | No | Pri 1
| <ul><li>[ ] onShow</li></ul> |  | No | Pri 1
| <ul><li>[x] presentationStyle</li></ul> | iOS | No | No?
| <ul><li>[x] statusBarTranslucent</li></ul> | Android | No | No?
| <ul><li>[x] supportedOrientations</li></ul> | iOS | No | No?
| <ul><li>[ ] transparent</li></ul> |  | No | Pri 1
| <ul><li>[ ] visible</li></ul> |  | No | Pri 1

## View Props

API | Platform | RNW Paper | RNW Fabric | Notes 
--:|:--:|:--:|:--:|:--
| <ul><li>[ ] accessibilityActions</li></ul> |  | FEVM | Pri 2
| <ul><li>[x] accessibilityElementsHidden</li></ul> | iOS | No | No?
| <ul><li>[x] accessibilityHint</li></ul> |  | FEVM | CBCV+CDAP | Fabric: #12036
| <ul><li>[x] accessibilityIgnoresInvertColors</li></ul> | iOS | No | No?
| <ul><li>[ ] accessibilityLabel</li></ul> |  | FEVM | Pri 2
| <ul><li>[x] accessibilityLanguage</li></ul> | iOS | No | No?
| <ul><li>[ ] accessibilityLiveRegion</li></ul> | Android | FEVM | Pri 2
| <ul><li>[ ] accessibilityRole</li></ul> |  | FEVM | Pri 2
| <ul><li>[ ] accessibilityState</li></ul> |  | FEVM | Pri 2
| <ul><li>[x] accessibilityValue</li></ul> |  | FEVM | CBCV+CDAP | Fabric: #12287
| <ul><li>[x] accessibilityViewIsModal</li></ul> | iOS | No | No?
| <ul><li>[x] accessible</li></ul> |  | CVM+FEVM | CBCV+CDAP | Fabric: #11719
| <ul><li>[x] collapsable</li></ul> | Android | No | No?
| <ul><li>[ ] focusable</li></ul> | Android | CVM | Pri 1
| <ul><li>[x] hitSlop</li></ul> |  | JS | JS
| <ul><li>[x] importantForAccessibility</li></ul> | Android | No | No?
| <ul><li>[x] nativeID</li></ul> |  | No | No?
| <ul><li>[x] needsOffscreenAlphaCompositing</li></ul> |  | No | No?
| <ul><li>[x] nextFocusDown</li></ul> | Android | No | No?
| <ul><li>[x] nextFocusForward</li></ul> | Android | No | No?
| <ul><li>[x] nextFocusLeft</li></ul> | Android | No | No?
| <ul><li>[x] nextFocusRight</li></ul> | Android | No | No?
| <ul><li>[x] nextFocusUp</li></ul> | Android | No | No?
| <ul><li>[ ] onAccessibilityAction</li></ul> |  | VMB | Pri 2
| <ul><li>[x] onAccessibilityEscape</li></ul> | iOS | No | No?
| <ul><li>[x] onAccessibilityTap</li></ul> |  | No | CDAP | Fabric: #11874
| <ul><li>[x] onLayout</li></ul> |  | VMB | Pri 1
| <ul><li>[x] onMagicTap</li></ul> | iOS | No | No?
| <ul><li>[x] onMoveShouldSetResponder</li></ul> |  | JS | JS
| <ul><li>[x] onMoveShouldSetResponderCapture</li></ul> |  | JS | JS
| <ul><li>[x] onResponderGrant</li></ul> |  | JS | JS
| <ul><li>[x] onResponderMove</li></ul> |  | JS | JS
| <ul><li>[x] onResponderReject</li></ul> |  | JS | JS
| <ul><li>[x] onResponderRelease</li></ul> |  | JS | JS
| <ul><li>[x] onResponderTerminate</li></ul> |  | JS | JS
| <ul><li>[x] onResponderTerminationRequest</li></ul> |  | JS | JS
| <ul><li>[x] onStartShouldSetResponder</li></ul> |  | JS | JS
| <ul><li>[x] onStartShouldSetResponderCapture</li></ul> |  | JS | JS
| <ul><li>[ ] pointerEvents</li></ul> |  | VMB | Pri 1
| <ul><li>[x] removeClippedSubviews</li></ul> |  | No | No?
| <ul><li>[x] renderToHardwareTextureAndroid</li></ul> | Android | No | No?
| <ul><li>[x] shouldRasterizeIOS</li></ul> | iOS | No | No?
| <ul><li>[x] testID</li></ul> |  | FEVM | CDAP | Fabric: #11412
| <ul><li>[ ] accessibilityPosInSet</li></ul> | Windows | FEVM | Pri 2
| <ul><li>[ ] accessibilitySetSize</li></ul> | Windows | FEVM | Pri 2
| <ul><li>[ ] enableFocusRing</li></ul> | Windows | JS | Pri 1 | Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
| <ul><li>[x] keyDownEvents</li></ul> | Windows | VMB CBCV | Fabric: #12146
| <ul><li>[x] keyUpEvents</li></ul> | Windows | VMB | CBCV | Fabric: #12146
| <ul><li>[ ] onBlur</li></ul> | Windows | VMB | Pri 1 | Necessary? Fabric: #11323
| <ul><li>[ ] onFocus</li></ul> | Windows | VMB | Pri 1 | Necessary? Fabric: #11323
| <ul><li>[x] onKeyDown</li></ul> | Windows | VMB | CBCV+CEH | Fabric: #12146
| <ul><li>[x] onKeyDownCapture</li></ul> | Windows | VMB | Pri 1
| <ul><li>[x] onKeyUp</li></ul> | Windows | VMB | CBCV+CEH | Fabric: #12146
| <ul><li>[x] onKeyUpCapture</li></ul> | Windows | VMB | Pri 1
| <ul><li>[x] onMouseEnter</li></ul> | Windows | VMB | CEH
| <ul><li>[x] onMouseLeave</li></ul> | Windows | VMB | CEH
| <ul><li>[ ] tabIndex</li></ul> | Windows | CVM | Pri 1
| <ul><li>[ ] tooltip</li></ul> | Windows | FEVM | Pri 1

## Native Component Methods

API | Platform | RNW Paper | RNW Fabric | Notes 
--:|:--:|:--:|:--:|:--
| <ul><li>[x] blur()</li></ul> | Windows | VMB | CBCV | Fabric: #11323, #112377
| <ul><li>[x] focus()</li></ul> | Windows | VMB | CBCV | Fabric: #11323, #112377

# Glossary

See the [Glossary](https://github.com/microsoft/react-native-windows/issues/11135#glossary) to decode the abbreviations above and/or the [RNW Fabric Inventory.xlsx](https://microsoft.sharepoint-df.com/:x:/t/ReactNativeMicrosoft/EZvd2544Yn9PgmfDQyhq1xYBNcngo3_nNZvR6h_67IjP8w?e=UQz0jQ).

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Modal component parity for Fabric #11157

ComponentView

APIs

Modal Props

View Props

Native Component Methods

Glossary

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

API	Platform	RNW Paper	RNW Fabric
animated		No	Pri 1
animationType		No	Pri 1
hardwareAccelerated	Android	No	No?
onDismiss	iOS	No	No?
onOrientationChange	iOS	No	No?
onRequestClose		No	Pri 1
onShow		No	Pri 1
presentationStyle	iOS	No	No?
statusBarTranslucent	Android	No	No?
supportedOrientations	iOS	No	No?
transparent		No	Pri 1
visible		No	Pri 1

API	Platform	RNW Paper	RNW Fabric	Notes
accessibilityActions		FEVM	Pri 2
accessibilityElementsHidden	iOS	No	No?
accessibilityHint		FEVM	CBCV+CDAP	Fabric: #12036
accessibilityIgnoresInvertColors	iOS	No	No?
accessibilityLabel		FEVM	Pri 2
accessibilityLanguage	iOS	No	No?
accessibilityLiveRegion	Android	FEVM	Pri 2
accessibilityRole		FEVM	Pri 2
accessibilityState		FEVM	Pri 2
accessibilityValue		FEVM	CBCV+CDAP	Fabric: #12287
accessibilityViewIsModal	iOS	No	No?
accessible		CVM+FEVM	CBCV+CDAP	Fabric: #11719
collapsable	Android	No	No?
focusable	Android	CVM	Pri 1
hitSlop		JS	JS
importantForAccessibility	Android	No	No?
nativeID		No	No?
needsOffscreenAlphaCompositing		No	No?
nextFocusDown	Android	No	No?
nextFocusForward	Android	No	No?
nextFocusLeft	Android	No	No?
nextFocusRight	Android	No	No?
nextFocusUp	Android	No	No?
onAccessibilityAction		VMB	Pri 2
onAccessibilityEscape	iOS	No	No?
onAccessibilityTap		No	CDAP	Fabric: #11874
onLayout		VMB	Pri 1
onMagicTap	iOS	No	No?
onMoveShouldSetResponder		JS	JS
onMoveShouldSetResponderCapture		JS	JS
onResponderGrant		JS	JS
onResponderMove		JS	JS
onResponderReject		JS	JS
onResponderRelease		JS	JS
onResponderTerminate		JS	JS
onResponderTerminationRequest		JS	JS
onStartShouldSetResponder		JS	JS
onStartShouldSetResponderCapture		JS	JS
pointerEvents		VMB	Pri 1
removeClippedSubviews		No	No?
renderToHardwareTextureAndroid	Android	No	No?
shouldRasterizeIOS	iOS	No	No?
testID		FEVM	CDAP	Fabric: #11412
accessibilityPosInSet	Windows	FEVM	Pri 2
accessibilitySetSize	Windows	FEVM	Pri 2
enableFocusRing	Windows	JS	Pri 1	Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
keyDownEvents	Windows	VMB CBCV	Fabric: #12146
keyUpEvents	Windows	VMB	CBCV	Fabric: #12146
onBlur	Windows	VMB	Pri 1	Necessary? Fabric: #11323
onFocus	Windows	VMB	Pri 1	Necessary? Fabric: #11323
onKeyDown	Windows	VMB	CBCV+CEH	Fabric: #12146
onKeyDownCapture	Windows	VMB	Pri 1
onKeyUp	Windows	VMB	CBCV+CEH	Fabric: #12146
onKeyUpCapture	Windows	VMB	Pri 1
onMouseEnter	Windows	VMB	CEH
onMouseLeave	Windows	VMB	CEH
tabIndex	Windows	CVM	Pri 1
tooltip	Windows	FEVM	Pri 1

API	Platform	RNW Paper	RNW Fabric	Notes
blur()	Windows	VMB	CBCV	Fabric: #11323, #112377
focus()	Windows	VMB	CBCV	Fabric: #11323, #112377

Modal component parity for Fabric #11157

Description

ComponentView

APIs

Modal Props

View Props

Native Component Methods

Glossary

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions