Contrib.social

Avoid using onclick attribute

Open on Drupal.org →
Created on 10 August 2016, about 9 years ago
Updated 22 December 2023, almost 2 years ago

Problem/Motivation

When a view mode is managed by DS, the "Add link" setting allow the transforme the entity display in a big clickable area. Currently, DS uses an onclick attribute which is considered as a bad practice. Plus, the onclick attribute is not fired on most mobile browsers so this option becomes unreliable.

Proposed resolution

Use a data attribute and a JS behavior to handle the redirection.

Remaining tasks

Patch, Review, Commit, Backport, Review, Commit

User interface changes

None. (The HTML attribute we change is invisible to the common user)

API changes

None.

Data model changes

None.

🐛 Bug report
Status

Needs review

Version

3.0

Component

Code

Created by

🇫🇷France duaelfr Montpellier, France

Live updates comments and jobs are added and updated live.
  • Needs backport to D7

    After being applied to the 8.x branch, it should be considered for backport to the 7.x branch. Note: This tag should generally remain even after the backport has been written, approved, and committed.

Sign in to follow issues

Comments & Activities

Not all content is available!

It's likely this issue predates Contrib.social: some issue and comment data are missing.

  • Comment almost 2 years ago →
    🇧🇪Belgium swentel
  • Status changed to Needs work almost 2 years ago
  • Comment almost 2 years ago →
    🇧🇪Belgium swentel

    Moving to feature, I'm not going to kill the onclick attribute because that's a BC break, will add a new option underneath where you can toggle to either use onlick or js.

    Needs work because it doesn't apply anymore either.

  • Comment about 1 year ago →
    🇺🇸United States AaronBauman Philadelphia

    Neither js nor onclick are accessible, so this presents a significant access barrier.

    Why can't an anchor tag ie. <a> be an option?

  • Comment 9 months ago →
    🇺🇸United States sonfd Portland, ME

    I have been referencing the Block link cards docs from W3 design system for this sort of thing. The approach is described in the Block Links: The Search for a Perfect Solution CSS tricks article.

    But I'm not exactly sure how we would control that approach (Method 4 in the article) through the UI. Maybe we could assume the first link is the main link? (That's what I have been doing :shrug:)

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024