A11Y Paragraphs Tabs

A11Y Paragraphs Tabs gives the user the ability to easily add tabs via paragraphs to their content that complies to Accessibility (A11Y) standards. On Desktop it shows Tabs and on mobile it displays as an accordion.

This module adds paragraphs that are already configured to give you tabs on desktop and an accordion on mobile. You do not need to configure anything.

This module creates 3 new paragraphs namely:

• A11Y Paragraphs Tabs Wrapper
• A11Y Paragraphs Tabs Panel
• A11Y Paragraphs Tabs Content

The wrapper (A11Y Paragraphs Tabs Wrapper) contains the tab panel (A11Y Paragraphs Tabs Panel) of which you can add as many tabs as you need. In turn, the tabs panel (A11Y Paragraphs Tabs Panel) contains a paragraph in which you can add the paragraphs you would like to use inside the tab panel.

A11Y Paragraphs Tabs uses Matthias Ott's A11Y Accordion Tabs js:
https://github.com/matthiasott/a11y-accordion-tabs

Installation via Drupal:

• Install the module as per usual way under "Extend"
• Verify installation by visiting /admin/structure/paragraphs_type and seeing your new Paragraphs: A11Y Paragraphs Tabs Wrapper, A11Y Paragraphs Tabs Panel, A11Y Paragraphs Tab Content.
• Download "A11Y Accordion Tabs" js from https://github.com/matthiasott/a11y-accordion-tabs
• Extract download and move to your /libraries folder.
• Rename folder to "a11y-accordion-tabs" and make sure you have the correct path to the js file: /libraries/a11y-accordion-tabs/a11y-accordion-tabs.js

Installation via Composer:

If you are using composer on your Drupal environment, follow the steps I outlined in this document: https://www.drupal.org/docs/8/modules/a11y-paragraphs-tabs/installing-a11y-paragraphs-tabs#comment-13092474

Setting up:

• Go to your content type and add a new field of type Reference revisions, Paragraphs.
• On the field edit screen, you can add a drescription, and choose which paragraphs you want to allow for this field. Check only "A11Y Paragraphs Tabs Wrapper". This will add everything you need. Click Save Settings.
• Adjust your form display, placing the field where you want it.
• Add the field into the Manage display tab.
• Done. You can now add tabs to your content.

I am busy with full documentation and a video to make it super easy. Check back soon.

Requirements:

• Paragraphs
• A11Y Accordion Tabs js library
  Download and rename so the assets are available at:
  /libraries/a11y-accordion-tabs/a11y-accordion-tabs.js

Documentation

We have great documentation and continually expanding the documentation to make it as easy as possible to use.
https://www.drupal.org/docs/8/modules/a11y-paragraphs-tabs

• Installing A11Y Paragraphs Tabs
• Setting up A11Y Paragraphs Tabs
• Adding additional fields to A11Y Paragraphs Tabs
• Attaching additional paragraphs to the content field of the tab