Add Skip Link to Notebook

[seirani]

Closes one of the tasks on #6800

Problem: "No skip link found (keyboard-only users have to tab 20 times every time to get to main region to do work)."
Changes to Code: Added a SkipLink widget

To Fix: Fails test case checking that all areas are empty by default. Skip to Link is only functional for Notebook page, not for Tree header page (where I wasn't sure what the desired "main" content to skip to should be)

Without using the skip link: User has to click through every single tab in the menu before reaching the edit feature of the first cell.

without-skip-link.mov

With the functional skip link: User tabs to "Skip to Main" first, then can click enter to go directly to the first cell edit.

with-skiplink.mov

[github-actions]

👈 Launch a Binder on branch seirani/notebook/skip-link

[jtpio]

Thanks @seirani!

Looks like there are a few lint issues that should be fixed when running jlpm run prettier normally.

[jtpio]

To Fix: Fails test case checking that all areas are empty by default. Skip to Link is only functional for Notebook page, not for Tree header page (where I wasn't sure what the desired "main" content to skip to should be)

Likely we could update the tests to remove the top area from this list:

notebook/packages/application/test/shell.spec.ts

Lines 32 to 35 in 787339c

	['main', 'top', 'left', 'right', 'menu'].forEach((area) => {
	const widgets = Array.from(shell.widgets(area as Shell.Area));
	expect(widgets.length).toEqual(0);
	});

And maybe check the top area has the skip link widget by default?

[jtpio]

Thanks!