fix(core): fix issue with different Webkit tab order in forms #8022

skogsmaskin · 2024-12-12T11:24:22Z

Description

Chromium and Firefox will tab to the FieldActions menu without tabIndex=0, but Webkit needs to have it explicitly set to include it in the tab flow. Add it so all browsers follow the same tab order, and WebKit users can access the field actions with the keyboard.

This will also prevent issues with Playwright tests that rely on tabbing through forms.

What to review

That WebKit can tab into the field actions menus.

Testing

Test any form with multiple fields.

Notes for release

Fixed an issue where WebKit was unable to tab into a form field's action menu.

vercel · 2024-12-12T11:24:27Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 1:14pm
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 1:14pm
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 1:14pm
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 12, 2024 1:14pm

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Dec 12, 2024 1:14pm

github-actions · 2024-12-12T11:28:41Z

No changes to documentation

github-actions · 2024-12-12T11:34:47Z

Component Testing Report Updated Dec 12, 2024 1:10 PM (UTC)

❌ Failed Tests (5) -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	1m 13s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	14s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	42s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	57s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	16s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	❌ Failed (Inspect)	3m 48s	1	0	5
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	1m 13s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	2m 52s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 47s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	14s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	42s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	29s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	1m 53s	21	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

github-actions · 2024-12-12T11:36:41Z

⚡️ Editor Performance Report

Updated Thu, 12 Dec 2024 13:11:26 GMT

Benchmark	reference ^{latency of sanity@latest}	experiment ^{latency of this branch}	Δ (%) ^{latency difference}
article (title)	22.5 efps (45ms)	23.3 efps (43ms)	-2ms (-3.4%)	✅
article (body)	63.5 efps (16ms)	63.7 efps (16ms)	-0ms (-/-%)	✅
article (string inside object)	25.6 efps (39ms)	22.7 efps (44ms)	+5ms (+12.8%)	✅
article (string inside array)	24.4 efps (41ms)	23.3 efps (43ms)	+2ms (+4.9%)	✅
recipe (name)	50.0 efps (20ms)	50.0 efps (20ms)	+0ms (-/-%)	✅
recipe (description)	58.8 efps (17ms)	58.8 efps (17ms)	+0ms (-/-%)	✅
recipe (instructions)	99.9+ efps (5ms)	99.9+ efps (6ms)	+1ms (-/-%)	✅
synthetic (title)	19.2 efps (52ms)	19.2 efps (52ms)	+0ms (-/-%)	✅
synthetic (string inside object)	19.2 efps (52ms)	19.2 efps (52ms)	+0ms (-/-%)	✅

efps — editor "frames per second". The number of updates assumed to be possible within a second.

Derived from input latency. efps = 1000 / input_latency

Detailed information

🏠 Reference result

The performance result of sanity@latest

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	45ms	48ms	54ms	272ms	370ms	11.6s
article (body)	16ms	19ms	25ms	162ms	266ms	5.4s
article (string inside object)	39ms	41ms	42ms	48ms	279ms	6.9s
article (string inside array)	41ms	43ms	51ms	152ms	130ms	7.0s
recipe (name)	20ms	22ms	27ms	58ms	0ms	6.8s
recipe (description)	17ms	19ms	21ms	42ms	0ms	4.5s
recipe (instructions)	5ms	6ms	8ms	20ms	0ms	3.1s
synthetic (title)	52ms	53ms	59ms	157ms	153ms	13.0s
synthetic (string inside object)	52ms	55ms	58ms	503ms	884ms	8.7s

🧪 Experiment result

The performance result of this branch

Benchmark	latency	p75	p90	p99	blocking time	test duration
article (title)	43ms	46ms	55ms	174ms	212ms	11.4s
article (body)	16ms	17ms	19ms	82ms	48ms	5.2s
article (string inside object)	44ms	48ms	52ms	271ms	389ms	7.6s
article (string inside array)	43ms	45ms	49ms	64ms	138ms	7.0s
recipe (name)	20ms	22ms	25ms	42ms	0ms	7.4s
recipe (description)	17ms	18ms	21ms	30ms	0ms	4.5s
recipe (instructions)	6ms	7ms	8ms	9ms	0ms	3.1s
synthetic (title)	52ms	54ms	59ms	255ms	587ms	12.9s
synthetic (string inside object)	52ms	56ms	75ms	280ms	955ms	8.6s

📚 Glossary

column definitions

benchmark — the name of the test, e.g. "article", followed by the label of the field being measured, e.g. "(title)".

latency — the time between when a key was pressed and when it was rendered. derived from a set of samples. the median (p50) is shown to show the most common latency.

p75 — the 75th percentile of the input latency in the test run. 75% of the sampled inputs in this benchmark were processed faster than this value. this provides insight into the upper range of typical performance.

p90 — the 90th percentile of the input latency in the test run. 90% of the sampled inputs were faster than this. this metric helps identify slower interactions that occurred less frequently during the benchmark.

p99 — the 99th percentile of the input latency in the test run. only 1% of sampled inputs were slower than this. this represents the worst-case scenarios encountered during the benchmark, useful for identifying potential performance outliers.

blocking time — the total time during which the main thread was blocked, preventing user input and UI updates. this metric helps identify performance bottlenecks that may cause the interface to feel unresponsive.

test duration — how long the test run took to complete.

…o it like other browsers Chromium and Firefox will tab to the FieldActions menu without tabIndex=0, but Webkit needs to have it explicitly set in order to include it in the tab flow

pedrobonamin

Thanks for this @skogsmaskin

skogsmaskin mentioned this pull request Dec 12, 2024

test(playwright-ct): fix issues and flake #8016

Merged

skogsmaskin marked this pull request as ready for review December 12, 2024 11:27

skogsmaskin requested a review from a team as a code owner December 12, 2024 11:27

skogsmaskin requested review from pedrobonamin and removed request for a team December 12, 2024 11:27

vercel bot deployed to Preview – page-building-studio December 12, 2024 11:27 View deployment

vercel bot deployed to Preview – performance-studio December 12, 2024 11:27 View deployment

vercel bot deployed to Preview – test-studio December 12, 2024 11:28 View deployment

vercel bot deployed to Preview – test-next-studio December 12, 2024 11:36 View deployment

skogsmaskin force-pushed the fix/webkit-form-tab-order branch from b871d9c to b8e2fa3 Compare December 12, 2024 11:44

vercel bot deployed to Preview – performance-studio December 12, 2024 11:51 View deployment

vercel bot deployed to Preview – page-building-studio December 12, 2024 11:51 View deployment

vercel bot deployed to Preview – test-studio December 12, 2024 11:52 View deployment

vercel bot deployed to Preview – test-next-studio December 12, 2024 11:59 View deployment

fix(core): add tabIndex=0 to FieldActionMenu so that webkit can tab t…

c0695e4

…o it like other browsers Chromium and Firefox will tab to the FieldActions menu without tabIndex=0, but Webkit needs to have it explicitly set in order to include it in the tab flow

skogsmaskin force-pushed the fix/webkit-form-tab-order branch from b8e2fa3 to c0695e4 Compare December 12, 2024 12:31

vercel bot deployed to Preview – performance-studio December 12, 2024 12:37 View deployment

vercel bot deployed to Preview – page-building-studio December 12, 2024 12:38 View deployment

vercel bot deployed to Preview – test-studio December 12, 2024 12:39 View deployment

vercel bot deployed to Preview – test-next-studio December 12, 2024 12:47 View deployment

style(core): sort props

8562f3a

vercel bot deployed to Preview – page-building-studio December 12, 2024 13:05 View deployment

vercel bot deployed to Preview – performance-studio December 12, 2024 13:05 View deployment

vercel bot deployed to Preview – test-studio December 12, 2024 13:06 View deployment

vercel bot deployed to Preview – test-next-studio December 12, 2024 13:14 View deployment

pedrobonamin approved these changes Dec 13, 2024

View reviewed changes

skogsmaskin added this pull request to the merge queue Dec 13, 2024

Merged via the queue into next with commit b1307d9 Dec 13, 2024
57 checks passed

skogsmaskin deleted the fix/webkit-form-tab-order branch December 13, 2024 10:24

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(core): fix issue with different Webkit tab order in forms #8022

fix(core): fix issue with different Webkit tab order in forms #8022

skogsmaskin commented Dec 12, 2024 •

edited

Loading

vercel bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

pedrobonamin left a comment

fix(core): fix issue with different Webkit tab order in forms #8022

fix(core): fix issue with different Webkit tab order in forms #8022

Conversation

skogsmaskin commented Dec 12, 2024 • edited Loading

Description

What to review

Testing

Notes for release

vercel bot commented Dec 12, 2024 • edited Loading

github-actions bot commented Dec 12, 2024

github-actions bot commented Dec 12, 2024 • edited Loading

github-actions bot commented Dec 12, 2024 • edited Loading

⚡️ Editor Performance Report

🏠 Reference result

🧪 Experiment result

📚 Glossary

column definitions

pedrobonamin left a comment

Choose a reason for hiding this comment

skogsmaskin commented Dec 12, 2024 •

edited

Loading

vercel bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading

github-actions bot commented Dec 12, 2024 •

edited

Loading