Skip to content

Implement outline properties on view #16074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
acoates-ms wants to merge 8 commits into
base: main
Choose a base branch
from
Open

Implement outline properties on view #16074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
083ec56
Implement outline properties on view
acoates-ms Apr 29, 2026
173a968
Change files
acoates-ms Apr 29, 2026
f32230e
hostPlatformColorIsColorMeaningful impl
acoates-ms Apr 29, 2026
0dc04eb
update snapshots
acoates-ms Apr 29, 2026
994d432
fix background clip
acoates-ms Apr 29, 2026
d3f80e0
default black borders should still be rendered.
acoates-ms Apr 30, 2026
d65b9e3
fix border sometimes being created behind the background
acoates-ms Apr 30, 2026
e60aefb
snapshots
acoates-ms Apr 30, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change/react-native-windows-202bc094-b9c7-41dc-9154-c7e8236c58c6.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
{
"type": "prerelease",
"comment": "Implement outline properties on view",
"packageName": "react-native-windows",
"email": "30809111+acoates-ms@users.noreply.github.com",
"dependentChangeType": "patch"
}
Binary file modified ...e_snapshots__/view-component-test-test-ts-view-tests-view-box-sizing-2-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ots__/view-component-test-test-ts-view-tests-views-can-have-outlines-2-snap.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
136 changes: 96 additions & 40 deletions packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,21 @@ exports[`Accessibility Tests Accessibility data for Label and Level 1`] = `
},
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(255, 0, 0, 255)",
},
"Comment": "accessibility-base-view-2",
"Offset": "0, 0, 0",
"Size": "50, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(255, 0, 0, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
],
},
}
`;
Expand Down Expand Up @@ -56,14 +63,21 @@ exports[`Accessibility Tests Accessibility data for Label,Level and Hint 1`] = `
},
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(0, 0, 255, 255)",
},
"Comment": "accessibility-base-view-1",
"Offset": "0, 0, 0",
"Size": "50, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(0, 0, 255, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
],
},
}
`;
Expand All @@ -87,14 +101,21 @@ exports[`Accessibility Tests Accessibility data for Role, Setsize etc. 1`] = `
},
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(255, 0, 0, 255)",
},
"Comment": "accessibility-base-view-3",
"Offset": "0, 0, 0",
"Size": "50, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(255, 0, 0, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
],
},
}
`;
Expand Down Expand Up @@ -133,15 +154,20 @@ exports[`Accessibility Tests Components can store range data by setting the min,
],
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(128, 128, 128, 255)",
},
"Comment": "accessibilityValue-number",
"Offset": "0, 0, 0",
"Size": "916, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(128, 128, 128, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "916, 19",
Expand Down Expand Up @@ -190,15 +216,20 @@ exports[`Accessibility Tests Components can store value data by setting the text
],
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(128, 128, 128, 255)",
},
"Comment": "accessibilityValue-text",
"Offset": "0, 0, 0",
"Size": "916, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(128, 128, 128, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "916, 20",
Expand Down Expand Up @@ -248,15 +279,20 @@ exports[`Accessibility Tests Elements can set accessibilityState:selected to fal
],
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Comment": "Selectable item 1",
"Offset": "0, 0, 0",
"Size": "100, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "100, 20",
Expand Down Expand Up @@ -307,15 +343,20 @@ exports[`Accessibility Tests Elements can set accessibilityState:selected to tru
],
},
"Visual Tree": {
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(128, 128, 128, 255)",
},
"Comment": "Selectable item 1",
"Offset": "0, 0, 0",
"Size": "100, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(128, 128, 128, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "100, 20",
Expand Down Expand Up @@ -513,15 +554,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Comment": "Selectable item 1",
"Offset": "0, 0, 0",
"Size": "100, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "100, 20",
Expand All @@ -544,15 +590,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Comment": "Selectable item 2",
"Offset": "0, 0, 0",
"Size": "100, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "100, 20",
Expand All @@ -575,15 +626,20 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Comment": "Selectable item 3",
"Offset": "0, 0, 0",
"Size": "100, 50",
"Visual Type": "SpriteVisual",
"__Children": [
{
"Brush": {
"Brush Type": "ColorBrush",
"Color": "rgba(135, 206, 250, 255)",
},
"Offset": "0, 0, 0",
"Size": "0, 0",
"Visual Type": "SpriteVisual",
},
{
"Offset": "0, 0, 0",
"Size": "100, 20",
Expand Down
Loading