UHF-9762: Accessibility improvements for the table of contents (TOC)

[teroelonen]

UHF-9762

What was done

• Added tabindex=-1 attribute to all elements that the table of contents creates anchors to avoid issues with screen readers.
• Add toc-focusable css class to all elements that are used as anchors on table of contents.

How to install

• Make sure your instance is up and running on latest dev branch.
  • git pull origin dev
  • make fresh
• Update the Helfi Platform config
  • composer require drupal/helfi_platform_config:dev-UHF-9762
• Update the HDBT theme
  • composer require drupal/hdbt:dev-UHF-9762
• Run make drush-cr

How to test

• Go to any page that has table of contents. For example this page in KUVA: https://helfi-kuva.docker.so/fi/kulttuuri-ja-vapaa-aika/ulkoilu-puistot-ja-luontokohteet/ulkoilualueet/keskuspuisto
• Click any item on the table of contents and the header that gets focused should have focus outline around it.
• Check with inspector that the header also has the tabindex=-1 attribute.
• Check that code follows our standards

Other PRs

• UHF-9762: Accessibility improvements for the table of contents (TOC) #724
• UHF-9762: Accessibility improvements for the table of contents (TOC) drupal-hdbt#934

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
0.0% Duplication on New Code

See analysis details on SonarCloud