ui.skip_to_main: skip to main content button

[evnchn]

Motivation

These days, I have been testing some stuff on my Windows laptop (for multi-Claude as well - you can do so much with a MacBook).

My Windows laptop's touchpad has broke for several years now (thanks Lenovo), and TIL https://nicegui.io does NOT offer a "skip to main content" function for us tab-navigators.

Implementation

The PR was bootstrapped by Claude Code but it was utter garbage tbh.

• I have to move the element to the top myself? And specify the href myself? Not Nice for NiceGUI ☹️
• Does not support context manager to customize content
  • When I ask it to make it support, then it broke the simplier ui.skip_to_main()
• 4x more added lines of CSS in nicegui/static/nicegui.css

I question everything and whittled things down.

Progress

• I chose a meaningful title that completes the sentence: "If applied, this PR will..."
• The implementation is complete.
• If this PR addresses a security issue, it has been coordinated via the security advisory process.
• Pytests pending.
• Documentation pending.

Pending tasks to be handled when this PR received current-version assignment in milestones. Anyone can take a shot at the tasks if they want. PRs are welcome.

Test script

ui.button('button 1')
ui.button('button 2')
ui.button('button 3')

with ui.skip_to_main():
    ui.label('Skip to main content 1')

ui.button('button 4')

ui.skip_to_main()

ui.button('button 5')

with ui.skip_to_main():
    ui.label('Skip to another main content 3')

ui.button('button 6')

• First one showing "Skip to main content 1" skips to button 4
• Second one showing "Skip to main content" skips to button 5
• Third one showing "Skip to another main content 3" skips to button 6

Final notes

This PR description is manually-written, if it isn't obvious enough already...

[falkoschindler]

Thanks for the contribution, @evnchn! The "skip to main content" feature is certainly a great accessibility improvement.

One note for future PRs: It's best to lead with what the change does and how it works, so reviewers can quickly understand the PR. Personal context and background story are fine to include as a comment on the PR, but keeping the description itself focused on the technical substance helps people "pick up" the PR faster - and keeps commit messages clean when squash-merging.

[evnchn]

Been a while since I wrote any PR message. Will bear this in mind 🙇

@falkoschindler as you scheduled this for 3.10, do you think it's a good idea to schedule #5795 also for 3.10 as well?

And preferably early 3.10 so that I can get the accessibility documentation by late 3.10.