SI: focusing on #flashed message after submitting sometimes scrolls the viewport too far, may obscure message

[eaon]

Description

First identified by @eloquence in #6306, the message we want to draw attention to may get scrolled out of view when we use #flashed as the anchor so screen-readers would know where to put their attention to first.

Steps to Reproduce

• Visit index with Tor Browser, JavaScript disabled
• Inspect the html element with the Web Developer Tools
• Using the layout tab, make sure that the content size of the html element is 1000x540 (when no scrollbar is visible)
• Add a new submission, see most of the Success! flashed message disappear

Expected Behavior

Flashed message stays in view

Actual Behavior

Originally posted by @eloquence in #6306 (comment)

Comments

@cfm highlighted that this is probably due to changes from #6041, and IMO we don't want to leave screen-reader users to figure out themselves what's going on. The page 53 of WCAG 2.1 Audit already describes an option that we can probably handle in time for 2.3.0:

We already have a Skip to main content link which we could either combine with or add to with another link specifically to jump to #flashed if get_flashed_messages() isn't empty.