* Redid deprecated Button tests
* Overhaul avatar tests
* Overhaul Callout tests
* Overhaul checkbox deprecated tests
* Overhaul CheckboxV1 tests
* Remove un-needed overrided method for Callout tests
* Change files
* Address comments and nits
* Missed some changes
* Re-did some of the checkbox page object methods
* More nits
* Address comments, add comments to funcs
* Nits fixed
* Fix errors not displaying for waiting methods on specs
* More consistency across individual test names
* Align test names for checkbox windows spec
* Typo fix
* Remove instances of '->' in test labels
* Remove instances of '->' in test names
* Reduce scope of PR
* Test names follow '{action}. {expectation}' format
* Re-enable checkbox functional tests for windows
* Change files
* Change accessibilityRole test names
* Adjust unset accessibilityRole test names
* Change .toBeTrue() calls to .toBeTruthy()
* Remove optional errorMsg param in waiter methods
* Removed the optional errors for real this time
* Rephrase accessibilityRole test
* Fix build error
* Separate shimmer tokens into file
* Add android tokens
* Fix shimmer animation
* Change files
* Shimmer fixes, snapshot test & android tester changes
* Fix depcheck for shimmer
* Update snaps and examples
* Separate shimmer tokens into file for win32
* E2E tests for Android Shimmer
* Change files
* Made elements required for win32 as well
* Move Text part of typography docs to Text README
* Change files
* Fix Markdown link
* Add reference to SPEC.md
Co-authored-by: Adam Gleitman <adgleitm@microsoft.com>
### Platforms Impacted
- [x] iOS
- [x] macOS
- [x] win32 (Office)
- [x] windows
- [x] android
### Description of changes
As part of the iOS color tokens work, we will want to add a test page showing all of the global + alias colors we have.
The existing tokens test is already showing all the alias color tokens, so planning to reuse this page.
Not many functional changes in this test - just renaming everything to be specific to color tokens, since we have separate tests for spacing, stroke width, corner radius.
Broke up changes by commit - should be easier to review that way
Future work:
- Will be changing the layout to be able to suit mobile a bit better (right now a lot of the long token names are getting truncated - see screenshots below
- Planning to add global tokens to the page - there will be a lot more, with 100 greys and 49 x 12 shared global colors
- Known issue - there are some slight inconsistencies between the naming conventions for each of the tokens pages (ex. Color vs. ColorTokens vs ColorToken). I'm also considering renaming the pages to be "Tokens: Color" or something so that all the tokens pages are in the same place.
### Verification
CI will confirm that e2e tests still pass.
Checked that on the iOS and macOS testers, the token test has been renamed to color token
| | Before | After |
| - |----------------------------------------------|--------------------------------------------|
| iOS |  |  |
| macOS | <img width="904" alt="Screenshot 2023-01-13 at 9 56 57 AM" src="https://user-images.githubusercontent.com/78454019/212388167-9029d9fc-d979-44c4-b5c3-6a4b4da8d7f6.png"> | <img width="1007" alt="Screenshot 2023-01-13 at 9 52 00 AM" src="https://user-images.githubusercontent.com/78454019/212387276-a3af7490-6023-4880-bacc-e6c26335a555.png"> |
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* define spinner props and slots
* remove unnecessary comments
* Change files
* change package name
* update lock file with new package
* Change files
* remove change file with outdated package name
* add text package dep
* add missing dep
* Add test page as a playground for various icon packages available on the internet.
FontAwesome is used in a pretty large percentage of all websites and has a rnsvg package of their font icons.
Microsofts fluentui-system-icons are svg icons meant for use with web react. They use SVGR to do the conversion process for web react but SVGR can also do the conversion for react-native-svg. I'm currently working on publishing a rnsvg package from my personal github fork. Some more advanced features will not be available like css styling since RNSVG does not readily support this. The icons themselves will be available though.
* Move fluentui icon dependency higher
* yarn lock
* Change files
### Platforms Impacted
- [x] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
Set up iOS alias color tokens in FURN (just neutral and brand colors for now; shared colors will be done in a future PR), so the tokens specified in updated Fluent2 designs can be accessed through the theme.
1. The pipeline output is retrieved by getTokens.ios.ts
- Also moved apple-theme/getiOSTokens.ts to theme-tokens/getTokens.ios.ts, as per https://github.com/microsoft/fluentui-react-native/issues/2190. Slightly unrelated but also recombined the existing android/windows getTokens/getShadowTokens files - they were separated to make android token integration more simple but since that work is complete, should be fine to recombine them and have less files
3. The output gets mapped in an AliasColorTokens object through mapPipelineToTheme
- The AliasColorTokens object was updated to include some new mobile tokens
- The existing mapPipelineToTheme method in the mapPipelineToTheme.ios.ts file was copied from the original mapPipelineToTheme.ts file. Updated it to match designs - for this file reviewing commit by commit should make the changes more clear
4. The AliasColorTokens object gets added to the iOS color palette in paletteFromAppleColors by createiOSColorAliasTokens
Out of scope for this PR:
1. Shared colors (ex. dangerbackground1) - there's been some questions raised about the definitions for these tokens so they haven't been added to the design-tokens package yet
2. Moving all createAliasTokens files from platform-specific themes into the theme-tokens folder - this seemed to have been planned for all the platforms but none of them do this yet. Planning to do this in a future PR
### Verification
Initial verification since the actual tokens aren't part of FURN yet - copied some tokens into the IOS alias-tokens files in node_modules, and checked that they were part of the final iOS palette.
No visual changes otherwise. Will add these tokens to the Notification component in a future PR for additional verification.
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* Update jest config platform iOS -> macOS
* macOS not macOs
* Comment out createAppleTheme test + update snapshot
* Change files
* Fix createAppleTest - make sure AccessibilityInfo module is not mocked
### Platforms Impacted
- [x] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [x] android
### Description of changes
This PR targets to fix the a11y issue where keyboard navigation also goes into disabled state switch which shouldn't happen.
This fixes it for mobile platform - Android and iOS.
This was already working on win32, hence verified that it doesn't break it and working as before.
### Verification
Visually verified on Android, tested on win32 as well, it's working as before.
| Before | After |
|----------------------------------------------|--------------------------------------------|
| [Screen Recording (2).webm](https://user-images.githubusercontent.com/30728574/211253264-09dd856e-998c-4b9e-b2f1-a89a3ebfa623.webm) | [Screen Recording (1).webm](https://user-images.githubusercontent.com/30728574/211253237-e2d08847-7064-4995-bf0c-df798f4ef4d5.webm) |
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [x] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [ ] iOS
- [X] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
This PR refines the focus behavior for Submenu item to align with the native experience.
1. When opening a menu(via keyboard/mouse), the first menu item should not get focus.
- Covered.
2. When opening a submenu via mouse, the first menu item should not get focus.
- Regressed by this change, created a task for followup.
3. When opening a submenu via keyboard, the first menu item should get focus and the parent submenu item should lose focus/ fades to a gray color background.
- This change achieves the first part, a task has been filed to followup on the second part.
### Verification
Tested Submenus on win32, didn't notice any behavioral changes.
Before:
https://user-images.githubusercontent.com/67026167/211050743-78ec34af-8fea-4c57-aa58-9d31324f49bd.mov
After:
https://user-images.githubusercontent.com/67026167/211050712-02f2f912-8c40-4f60-823e-2693f08e284a.mov
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [X] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [x] iOS
- [x] macOS
- [x] win32 (Office)
- [x] windows
- [x] android
### Description of changes
Update the default theme fluent object to be a method that returns an object.
This issue is blocking https://github.com/microsoft/fluentui-react-native/pull/2481:
- the updated designs for iOS tokens include some new tokens that aren't in the default theme
- mapPipelineToTheme.ios.ts was updated to reflect these designs
- however, the default theme is still getting created and is trying to running the iOS code for mapPipelineToTheme, which causes failures because the iOS alias token set now includes tokens that aren't in the default theme (win32) token set
- changing the default theme from a const object to a method prevents the default theme from getting created automatically
### Verification
No visual changes
Check if CI passes
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* Revert win32 submenuitem back to useAsPressable
* Change files
* Update types in PressabilityConfig to match PressableProps
* Change files
* Revert "Change files"
This reverts commit b30154e6ba.
* Revert "Update types in PressabilityConfig to match PressableProps"
This reverts commit 0e0b0e3f4f.
* Remove Pressable from ContextualMenuItem
* update change file
* Refactor Menu tests with new testing methods
* Change files
* Modify errors for menu tests, add better comments
* Remove instances of '->' in test names
* Adjust unset accessibilityRole test names
* Use === for string comparison in onClick() test
* Add waitForMenuToClose() method
### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
Move LinkV1 code to existing link package
Move legacy Link code into legacy folder
Update index folder to have new exports.
This will migrate the LinkV1 component to its main package and have it ready for release.
### Verification
Opened tester to test Link component.
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* Overhaul ContextualMenu E2E tests
* More changes to ContextualMenu E2E
* Overhaul both link E2E tests
* Fix wrong import + some nits
* Clarifying an error
* Refine test names for link
* Change files
* Forgot .toBeTrue() at the end of accessibility test expects
* Add comments to ContextualMenu PO
* Nits fixed
* Reword errors for ContextualMenu test
* Fix comment typos for Link + ExperimentalLink
* Add ENTER press test + cleaner code
* Fix close() error message
* Remove instances of -> in test names
* Fix nit
* Better types + tests for useKeyProps
* Change files
* Update base type
* type KeyboardEvent
* KeyboardEvent -> KeyPressEvent
* More tests + type fix
* More tests
* Combine useKeyProps to one file
* more
* PR comments
* Use alias token definitions for iOS typography
* Define `FontWeightValue` in terms of what RN says
* Use theming-utils to fetch font alias tokens
* Change files
* Specify dynamic type ramps in mapPipelineToTheme
* Add mapPipelineToTheme function
* Update yarn.lock
* Update Podfile.lock
* Update FURN tokens version that theming-utils depends on
* theming-utils tests were written for Windows
Co-authored-by: Adam Gleitman <adgleitm@microsoft.com>
e.g. I'd like to be able to use things like menuitem or similar, which indicates a button-like control in a list of similar controls.
Testing:
* I see the expected role now with tools, e.g. Accessibility Insights.
### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
In the MenuPopover, certain key events are automatically handled by native, but the key event gets fired on the JS side anyway (this is by design for RN). This can cause bugs as keys could get double handled if a user has a separate key handler set up.
Since the key events are handled on native, it would make sense to automatically mark those key events as handled. That way, they don't get handled on the JS side, too.
### Verification
Tested change against client code
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [x] iOS
- [x] macOS
- [x] win32 (Office)
- [x] windows
- [x] android
### Description of changes
In preparation of adding iOS alias color tokens, updating the existing AliasColorTokens interface to specify which platforms each token is on, make all the properties optional (there are only 30 tokens that are currently defined on all platforms, and that still seems to be changing) and also reorganized the tokens into the following:
// Foreground
1. Neutralforeground 1-4
2. Neutralforegrounddisabled
3. Neutralforegroundoncolor and onboard
4. Neutralforegroundinverted
5. Brandforegroundlink
6. Compoundbrandforeground
7. Brandforeground 1 and 2
8. Brandforegroundtint
9. Brandforegrounddisabled
// Background
10. Neutralbackground 1-6
11. Neutralbackground other
12. Subtle background
13. Transparent background
14. Brandbackground
// Stroke
15. Neutralstroke
16. Stroke focus
17. Brand stroke
18. Transparent stroke
// Red
16. Red background/foreground/border
Changes are split up by commit.
### Verification
There are no functional changes in this PR - no properties were removed/added to this interface.
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* Changing location of E2E constants from /apps/fluent-tester to /apps/E2E. This consolidates data specific to E2E testing
* Creating new NuGet package containing all E2E testing data, while removing unnecessary bundles
* Reverting WDIO config file specs path
* Change files
* Fixing prettier
* Removing bundle verb from E2E (not needed anymore)
* Renaming index.win32 to index.consts to better represent file
* Removing old NuGet package and creating new one that contains E2E directory
* Modifying .ado nuget publish pipeline to include new package
* Resolve conflict with FocusZone version
* Removing unwanted change in tsconfig
* Adding back rnx-kit without bundle potion
* Add spacing E2E tests
* Change files
* Add test ID to Spacing test page
* Change files
* Remove macOS and Win E2E tests since they don't have the Spacing test page yet
* Revert "Remove macOS and Win E2E tests since they don't have the Spacing test page yet"
This reverts commit 3516a68bc0.
* Activate spacing tokens page for all platforms
* Change files
Co-authored-by: Adam Gleitman <adgleitm@microsoft.com>
### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [x] android
### Description of changes
Integrated a new version for tokens with updated color values.
### Verification
Manually tested.
| Before | After |
|----------------------------------------------|--------------------------------------------|
| Screenshot or description before this change | Screenshot or description with this change |
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [x] iOS
- [ ] macOS
- [x] win32 (Office) (Just the tester app : migrated components used from Stock RN to FURN)
- [ ] windows
- [x] android
### Description of changes
(a summary of the changes made, often organized by file)
This PR targets to tokenize and adding of insetSpacing to the Separator component for Android.
packages/components/Separator/src/* - General separation/cleaning of files and Android Specific changes
apps/fluent-tester/* - tester app changes.
### Verification
Visual Verified for Win32.
(how the change was tested, including both manual and automated tests)
| Light | Dark |
|----------------------------------------------|--------------------------------------------|
|  |  |
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [x] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* Add spacing E2E tests
* Change files
* Add test ID to Spacing test page
* Change files
* Remove macOS and Win E2E tests since they don't have the Spacing test page yet
Co-authored-by: Adam Gleitman <adgleitm@microsoft.com>
* Fork inline link test for LinkV1
* Edit documentation
* Force win32 to not have inline links
* Remove stray test case
* Remove stray test case
* Change files
* Update Migrate.md
* Make accessible prop true for win32 only, update comment
* Change files
* macOS e2e failed, try CI on just macos
* Try accessibility=false and collapsable=false
* Revert collapsable attempt, use accessible prop for win32/macOS
* Revert "Change files"
This reverts commit 34892bbac4.
* Revert changes, update comment to explain why iOS is an exception
* Change files
* Add better errors to BasePage + ExperimentalBtn
- Made BasePage abstract so future PageObjects must implement abstract
getters. Implemented getters for PageObjects lacking them.
- Overhauled accessibility testing to be in different method with
more intuitive error.
- Updated ExperimentalButton PageObject + spec to use new BasePage
features.
* Refine error messages to have less fluff
* Change files
* Removed the ButtonSelector enum from ExperimentalButton spec + pageobject
* Consolidate attribute testing to compareAttribute()
* Update compareAttribute method comment
* Rename TestDescription.testPage -> testPageButton
* Add more intuitive errors for NativeTesting page
* Rename BasePage method, refactor FocusZone tests
Renamed `keys()` to `sendKeys()`. This conflicted with a similar method
in FocusZonePageObject so I figured I would quickly refactor the tests
to use the same overhauled methods in BasePage with better errors. Also
I addressed some nits in the PR.
* Change compareAttribute error formatting
* Address nits
* Change files
* Fix build errors
* Re-re-naming the NavigateAppPage pageName
* Re-enumed grid buttons
Co-authored-by: Larry Win <winlarry@microsoft.com>
* Add more baseline Menu E2E tests
* Add testing for disabled prop on item
* Change files
* Address PR feedback
* Change change type from patch -> minor
* Address nits, cleared up code
* Reduce onClick testing from 6 to 2 specs, clear up code
* Reduce time it takes for a11y tests
* Refactor MenuPageObject, make test names clearer
* Fix erroneous merge
Co-authored-by: Larry Win <winlarry@microsoft.com>
* Remove unnecessary waiters during test starts
Removed the `waitForPrimaryElementDisplayed` method and calls to it in
specs because `scrollToTestElement` already calls the waiter internally.
* Change files
* Edit change type to minor, re-add method with deprecation warning
Co-authored-by: Larry Win <winlarry@microsoft.com>
### Platforms Impacted
- [ ] iOS
- [X] macOS
- [X] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
The usage of usePressableState in SubmenuItem causes a bug on macOS where SubmenuItem doesn't get keyboard focus on mouse hover. I couldn't figure out why onHoverIn gets overridden/not getting called in SubmenuItem, but we can live with this for now until MenuV1 transition is ready.
### Verification
Submenu item works as expected on macOS and win32
| Before | After |
|----------------------------------------------|--------------------------------------------|
| Screenshot or description before this change | Screenshot or description with this change |
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
Updating some statuses in the win32 tester.
Decisions:
- "Production" for a V1 component which we've finished and has been out for at least a few months without any major work required from initial partner integration. Menu and Text don't fall under here as I currently am changing their behavior and we are getting some bugs for those components
- "Beta" for completed V1 components with less maturity, tokens, and for older components which use the old framework. Older components will be rewritten in the future.
- "Experimental" for components currently under active development
- "Deprecated" for older components that have replacements available and in Beta or Production.
Please feel free to either push changes for other platforms or comment with additional change suggestions.
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [x] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
* Bump react-native-svg: 12.3.0 -> 12.x
* Change files
* 12.x -> 12.4.4 in package.json
* Add Graphics.Win2D as a dependency
* Revert "Add Graphics.Win2D as a dependency"
This reverts commit 7f3899bd93458d90f1236cc0724b4955bf67d802.
* Win2D.UWP added as a dependency
* Update yarn.lock
* Bump experimental icon rnsvg
* Bumping rnsvg to 12.5
* Add script to add win2d as a ReactTestApp dependency
* Add win2d script to uwp ado pipeline
* Update script to add Win2D.uwp dependency
* Commit for pipeline testing
* Remove disk size checks, keep fetchDepth in ado
* Change files
* Run windows Pr validation step on larger VM
* Add + use patch-package for Win2D.uwp dependency
Patching react-native-test-app is now more stable than the previous
commit.
* Revert accidental change to a change file
Co-authored-by: Larry Win <winlarry@microsoft.com>
Co-authored-by: Danny van Velzen <dannyvv@microsoft.com>
* design tokens package bump
* replace old spacing token with new sizeTokens with win32 ramp
* theme spacing tokens change
* Change files
* minor medium addtion
* update snapshots and shadow mapping
* Change files
* android tokens mapping changes
* removal of new size tokens from theme
* mapping to ios size ramps instead of win32 for ios files
* android checkbox token update
* update outdated snapshot and token changes for FAB
* Add FRNFontMetrics module
* Remove debugging `console.log` statements
* Use a hook to access font metrics
* Add NativeFontMetrics package
* Remove unneeded API
* Fix spacing
* Change files
* Add @types/use-subscription dependency
* Update yarn.lock
* Add use-subscription as a dependency
* Update yarn.lock again
* NativeFontMetrics.tsx -> NativeFontMetrics.ts
* Make NativeFontMetrics iOS only, part 1
* Stub out NativeFontMetrics for non-iOS platforms
* Keep use-subscription version consistent with react-native and react-native-macos
* Remove core-android capability
* id -> UIFontTextStyle
* Delete old changefile
* Regenerate lockfiles
* Delete duplicate NativeFontMetrics.tsx file
* Change files
* allScaleFactors -> currentScaleFactors
* Use pure events to update font metrics
* Update package.nuspec
* Use pure JS hook to make V2 Texts rerender
* Change files
* Update snapshot
* Remove unneeded dependency
* Move fontMetrics to iOS specific file
* Better isolation of iOS-specific code
* Add useFontMetrics.ios.ts
* Remove useFontMetricsScaleFactors warning on non-iOS platforms
* Move fontMetrics accesses outside of continuation, and improve typing
* Fix Text rerender shallow equality test
* Handle case when NativeFontMetrics isn't defined
* IFontMetrics -> FontMetrics
* Keep `mergedProps` spreads next to each other
Co-authored-by: Adam Gleitman <adgleitm@microsoft.com>
* Remove FocusTrapZone at the root of win32 tester
* Change files
* Fix refocus on testlist re-render
* Fix nits
Co-authored-by: Lawrence Win <winlarry@microsoft.com>
* Button/FAB Tokenization Complete
* Update readme and snapshots
* Added support for inner border
* Updated tester app text for mobile
* Removed extra features from Android Tester
* Updated to use shared iconExamples
* Removed unsupported buttons from SizeTest
* Removed explicit mapping to default for outline
* Change files
* Refactor tester app assets and imports
- Moved test.svg to main assets folder, deleted duplicate test.svg files
- Removed duplicate code declarations for svgProps. Most instances of the
same svg now get imported from a common file.
- Imports for icon_24x24.png are also from a common file.
- Added color for icon svgs for android. Without a color prop, the svg doesn't
render.
* Fix incorrect import in menu test components
* Refactor android specific color code into a hook
* Color hook removed
* Remove conditional android styles for icon
Co-authored-by: Lawrence Win <winlarry@microsoft.com>
### Platforms Impacted
- [ ] iOS
- [x] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
This is a simpler version of #2267 . Instead of adding a new prop to differentiate whether we focus on key views vs first responders, this one will just... focus on first responders unconditionally.
The reasoning is as follows:
1) FocusZone itself doesn't override `canBecomeKeyView. So FocusZone itself respects the system keyboard navigation preference.
2) FocusZone itself is pretending to be "one big focusable view" to the eyes of Appkit. Its job is to move focus inside itself between focusable views. Once it gains focus (via the key view loop or programmatically), it probably doesn't matter whether its children were key views. If you're using a FocusZone for your custom control, you probably still want the keyboard events to work regardless.
How this affects components:
- For the case of ContextualMenu, we call `focusZoneRef.current.focus()` once the menu is opened. This will force focus on the Menu regardless of the OS preference (which we want), and then with this change keyboard navigation will work.
- For the case of Radiogroup: Native Appkit RadioGroups are not key views if the keyboard navigation preference is disabled, and you can't move focus or arrow key through them at all. With our JS Radiogroup (and Native RadioGroup), this behavior should be the same, since the enclosing FocusZone will not become a key view.
### Verification
Locally side loaded the built `libRCTFocusZone.a` to test a partner scenario, and it worked fine with no regressions. Tested ContextualMenu and RadioGroup and didn't find any regressions.
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
Remove 'web' as a platform from testPages.
Some conversation in https://github.com/microsoft/fluentui-react-native/pull/2332 that we should remove it.
### Verification
Checked that tester still runs correctly on macOS
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
### Platforms Impacted
- [ ] iOS
- [ ] macOS
- [ ] win32 (Office)
- [ ] windows
- [ ] android
### Description of changes
(a summary of the changes made, often organized by file)
### Verification
(how the change was tested, including both manual and automated tests)
| Before | After |
|----------------------------------------------|--------------------------------------------|
| Screenshot or description before this change | Screenshot or description with this change |
### Pull request checklist
This PR has considered (when applicable):
- [ ] Automated Tests
- [ ] Documentation and examples
- [ ] Keyboard Accessibility
- [ ] Voiceover
- [ ] Internationalization and Right-to-left Layouts
Bumps [@types/react-native](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-native) from 0.68.8 to 0.68.9.
<details>
<summary>Commits</summary>
<ul>
<li>See full diff in <a href="https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/react-native">compare view</a></li>
</ul>
</details>
<br />
[](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores)
Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting `@dependabot rebase`.
[//]: # (dependabot-automerge-start)
[//]: # (dependabot-automerge-end)
---
<details>
<summary>Dependabot commands and options</summary>
<br />
You can trigger Dependabot actions by commenting on this PR:
- `@dependabot rebase` will rebase this PR
- `@dependabot recreate` will recreate this PR, overwriting any edits that have been made to it
- `@dependabot merge` will merge this PR after your CI passes on it
- `@dependabot squash and merge` will squash and merge this PR after your CI passes on it
- `@dependabot cancel merge` will cancel a previously requested merge and block automerging
- `@dependabot reopen` will reopen this PR if it is closed
- `@dependabot close` will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
- `@dependabot ignore this major version` will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this minor version` will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
- `@dependabot ignore this dependency` will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
</details>
* Create stroke width test page
* Update add stroke width to theme types
* Add stroke width to iOS theme
* Add empty stroke width object to other themes
* Update test to use stroke width from apple theme
* Change files
* Update snapshots
* Change files
* Revert "Change files"
This reverts commit 89e94fd727.
* Revert "Update snapshots"
This reverts commit 0a5e0b5841.
* Revert "Change files"
This reverts commit d2a5e2dd2f.
* Revert "Update test to use stroke width from apple theme"
This reverts commit 80308cc994.
* Revert "Add empty stroke width object to other themes"
This reverts commit a41b883146.
* Revert "Add stroke width to iOS theme"
This reverts commit 6f9e4d18c6.
* Revert "Update add stroke width to theme types"
This reverts commit 36393ac1c9.
* Update platforms, update tokens, update style with usememo
* Change files
* Update tester package to include theme tokens
* Add dark mode, use fluent corlors
* Remove unused import
* Use a color alias token
* Revert "Use a color alias token"
This reverts commit e88331ab7a.
* Possible fix for e2e test - rename STROKEWIDTH_TESTPAGE
* Potential e2e test fix 2 - make naming consistent
* Used wrong constant
* Add stroke width e2e test
* Alphabetize + add windows to list of platforms
* Modify and re-enable callout e2e tests
* Re-enable disabled tests + fix persona test assert
We can re-enable these because we bumped react-native-win32 which
fixed our assert issue. Also replaced persona test images with ones that
don't return a 404.
* Change files
* Disable callout page for uwp
* Disable callout test for uwp
* Edit callout e2etest page for prop testing
* Add more reliable image sources for Persona page
* Image sources are even better now
Co-authored-by: Larry Win <winlarry@microsoft.com>
* fix double clicking on inline links
* remove icon hook from interactive-hooks
* add textpackage dep
* run prettier
* Change files
* add documentation
* pull out platform check as a variable
Lawrence Win
Ankita Raj
Ayush Singh
Rohan Prasad
UI-Fabric-RN-Bot
Adam Gleitman
lyzhan7
lenahong
warren-ms
Gulnaz Sayed
Mike Schreiber
chiuam
dependabot[bot]
Ruriko Araki
Valentina
Krystal Kramer
Saad Najmi
Navneet Kambo
huwilkes
Samuel Freiberg
Tommy Nguyen
