feat: Accessible project headings for Publications

[eatyourgreens]

• give each project a slug eg. galaxy-zoo or backyard-worlds-planet-9.
• give each project heading an id and tabindex to make it linkable and accessible.
• add an intersection observer, which sets the active navigation section for each project section (eg. Planet Hunters will set the active section to Space), when that project section is near the top of the viewport.
• make sure that project sections are labelled.

Please request review from @zooniverse/frontend team or an individual member of that team.

Package

• app-content-pages

Linked Issue and/or Talk Post

• Slack post asking for a link direct to the list of Galaxy Zoo publications.

How to Review

Project headings have human-readable IDs, which should work as links. The intersection observer should make sure that the appropriate section is set in the sidebar, when you link directly to a project.

Screenshots are from Firefox but this should work in any standards-compliant browser. Labelled sections should show up as region landmarks in software that supports landmark navigation (eg. VoiceOver, JAWS, NVDA.) Alternatively, you can right-click on a section to inspect its accessible name and role in browser dev tools.

The rule for generating a project's URL slug is: convert to lowercase, remove all punctuation and replace spaces with a single -.

https://localhost:3000/about/publications#when-do-mountain-goats-shed-winter-coats

https://localhost:3000/about/publications#galaxy-zoo

https://localhost:3000/about/publications#backyard-worlds-planet-9

Checklist

PR Creator - Please cater the checklist to fit the review needed for your code changes.
PR Reviewer - Use the checklist during your review. Each point should be checkmarked or discussed before PR approval.

General

• Tests are passing locally and on Github
• Documentation is up to date and changelog has been updated if appropriate
• You can yarn panic && yarn bootstrap or docker-compose up --build and FEM works as expected
• FEM works in all major desktop browsers: Firefox, Chrome, Edge, Safari (Use Browserstack account as needed)
• FEM works in a mobile browser

General UX

Example Staging Project: i-fancy-cats

• All pages of a FEM project load: Home Page, Classify Page, and About Pages
• Can submit a classification
• Can sign-in and sign-out
• The component is accessible
  • Can be used with a screen reader BBC guide to VoiceOver
  • Can be used from the keyboard WebAIM guide to keyboard testing
  • It is passing accessibility checks in the storybook

New Feature

• The PR creator has listed user actions to use when testing the new feature
• Unit tests are included for the new feature
• A storybook story has been created or updated
  • Example of SlideTutorial component with docgen comments, and its story

[coveralls]

coverage: 81.83% (-0.02%) from 81.848%
when pulling cb85b00 on eatyourgreens:publications-project-links
into 358967d on zooniverse:master.

[eatyourgreens]

If you want to test this with a screen reader, W3C has a handy guide to landmark navigation.

[eatyourgreens]

The region landmark, on MDN, is also relevant to this PR.

[eatyourgreens]

This PR should also fix a minor bug in the live page, where the wrong category is shown if the current category heading is outside the top of the viewport eg. scrolling up from Physics to Space will show 'Physics' for Space projects.

[goplayoutside3]

Looks good - thank you!

[goplayoutside3]

Why do the step with Z rather than .toLowerCase().replaceAll(' ', '-')?

[eatyourgreens]

This was just for convenience. \W includes spaces, so I replaced spaces with a capital letter before stripping punctuation, then replace the capital letters with ‘-‘ after.

[eatyourgreens]

I also wanted to avoid -- appearing in slugs eg. backyard-worlds--planet-9 and this was the first solution that came to mind.