Duplicate ID in Anchor Icon SVG Causes Accessibility Issues

Created on 8 March 2024, 9 months ago

Updated 18 September 2024, 3 months ago

Problem/Motivation

I've encountered an accessibility issue related to the Anchor Link module for CKEditor 5 within a Drupal installation. The module uses an SVG icon (`icons/anchor.svg`) for the anchor button in CKEditor's toolbar, where the `
` elements have duplicate `id="Shape"` attributes. This duplication can cause problems for assistive technologies due to the non-unique IDs within the document, violating HTML standards for ID uniqueness.

Steps to reproduce

Install the Anchor Link module for CKEditor 5 on a Drupal site.
Enable the module and navigate to a page with CKEditor enabled.
Use an accessibility tool or inspection of the HTML to observe the rendered CKEditor toolbar, specifically the anchor button icon.
Notice that the SVG icon for the anchor button contains duplicate `id="Shape"` attributes.

Proposed resolution

A simple fix would be to remove the `id` attributes from the `
` elements in the `icons/anchor.svg` file if they are not required for CSS or JavaScript. Alternatively, if the IDs are necessary, ensure they are unique by renaming them to something more specific to their function or appearance.

Remaining tasks

✅ File an issue
➖ Create and attach the patch for the proposed solution
➖ Testing to ensure no regression
➖ Automated unit testing coverage
➖ Automated functional testing coverage
➖ UX/UI designer responsibilities
➖ Readability
➖ Accessibility
➖ Performance
➖ Security
➖ Documentation
➖ Code review by maintainers
➖ Full testing and approval
➖ Credit contributors
➖ Review with the product owner
➖ Release notes snippet
❌ Release

API changes

Data model changes

Release notes snippet

🐛 Bug report

Status

Needs review

Version

3.0

Component

Code

Created by

🇺🇸United States Tsegaye

Live updates comments and jobs are added and updated live.

Comments & Activities

Issue created by @Tsegaye
Issue was unassigned.
Status changed to Needs review 3 months ago6:53pm 18 September 2024
Comment 3 months ago →
🇺🇸United States justcaldwell Austin, Texas
A simple fix would be to remove the `id` attributes from the elements in the `icons/anchor.svg` file if they are not required for CSS or JavaScript.

They aren't needed for CSS or js. Absolutely a simple fix, but will have to happen in the plugin at northernco/ckeditor5-anchor-drupal. I opened a PR there:

3426731 remove duplicate ids by justcaldwell · Pull Request #13

contrib.social Blog FAQ Discussions

Production build 0.71.5 2024