Skip to content

Closes #295 Add Accordion Anchor Link functionality#5633

Draft
zsaenz wants to merge 5 commits into
mainfrom
issue-295-z
Draft

Closes #295 Add Accordion Anchor Link functionality#5633
zsaenz wants to merge 5 commits into
mainfrom
issue-295-z

Conversation

@zsaenz
Copy link
Copy Markdown
Contributor

@zsaenz zsaenz commented May 21, 2026

Description

From #295
Adds an Anchor link to Accordions Paragraph. It needs the following features:

  1. Click to copy a link to the clipboard
  2. The link is an anchor tag based on the specific accordion
  3. On scrolling, exapnd the linked accordion. Scroll a little above the target so it's not at the tippy top of the site.

Discussions

  1. Need visual confirmation from the click to copy link. Popup modal? Icon animation?
  2. Where should the link be placed? Link in header conflicts with accessiblity and accordion functionality?
  3. Should the click to copy only be visible for editors?
  4. Link style-color

Release notes

Related issues

#295

How to test

  1. Install AZ_Demo.
  2. Visit the pages/accordions page, or make any page with an Accordions Paragraph type. (Make sure it's a tall page to test scrolling).
  3. Click the various links to copy the anchor link.
  4. Test the new link in a page while logged in and while not logged in, in the same browser page and in a new tab (as if linking from another site).
  5. Test in various browsers.

Types of changes

Arizona Quickstart (install profile, custom modules, custom theme)

  • Patch release changes
    • Bug fix
    • Accessibility, performance, or security improvement
    • Critical institutional link or brand change
    • Adding experimental module
    • Update experimental module
  • Minor release changes
    • New feature
    • Breaking or visual change to existing behavior
    • Upgrade experimental module to stable
    • Enable existing module by default or database update
    • Non-critical brand change
    • New internal API or API improvement with backwards compatibility
    • Risky or disruptive cleanup to comply with coding standards
    • High-risk or disruptive change (requires upgrade path, risks regression, etc.)
  • Other or unknown
    • Other or unknown

Drupal core

  • Patch release changes
    • Security update
    • Patch level release (non-security bug-fix release)
    • Patch removal that's no longer necessary
  • Minor release changes
    • Major or minor level update
  • Other or unknown
    • Other or unknown

Drupal contrib projects

  • Patch release changes
    • Security update
    • Patch or minor level update
    • Add new module
    • Patch removal that's no longer necessary
  • Minor release changes
    • Major level update
  • Other or unknown
    • Other or unknown

Checklist

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have read the CONTRIBUTING document.
  • I have added tests to cover my changes.
  • All new and existing tests passed.
  • My change requires release notes.

@zsaenz zsaenz self-assigned this May 21, 2026
<div id="{{ accordion_item_id }}" class="accordion-collapse collapse {{ collapsed }}" aria-labelledby="{{ accordion_item_id }}" data-bs-parent="#{{ accordion_item_id }}">
<div class="accordion-body">
<a onclick="copyAnchor('{{ accordion_item_id }}', event)" id="copy_{{ accordion_item_id }}" class="accordion_anchor_link" href="#{{ accordion_item_id }}">
<span class="drupal-icon"><span class="material-symbols-rounded " style="font-size:24px;">link</span></span>
Copy link
Copy Markdown
Member

@trackleft trackleft May 27, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use the Drupal icon API here:

{{ icon('material_symbols', 'link', {size: 24}) }}

See https://www.drupal.org/docs/develop/drupal-apis/icon-api for reference

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Go to /admin/appearance/ui/icons/material_symbols on your site to see the icon pack

Comment thread .lando.yml
@@ -1,4 +1,4 @@
name: az_quickstart
name: issue-295
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
name: issue-295
name: az_quickstart

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants