Problem/Motivation

If a component is semantically a link, it shouldn't look like a button. This could cause confusion for communication between people who are able to visually see the page and those who are relying on its semantics. A good rule of a thumb is that following markup should never exist:

<a href="..." class="button"></a>

As well as:

<button class="link"></button/>

Proposed resolution

Search all instances of button styles used on other elements than buttons, and decide whether they should be converted into action links or a button.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Comments

lauriii created an issue. See original summary.

lauriii’s picture

Issue summary: View changes
ccasals’s picture

Working on this one for drupalcon seattle sprint unless objections!

ccasals’s picture

After reviewing all Claro's templates and alter_hooks I could find no inappropriate uses of anchor links as buttons. I believe this issue is ready to be closed.

ccasals’s picture

Status: Active » Needs review
fhaeberle’s picture

Status: Needs review » Reviewed & tested by the community
lauriii’s picture

Status: Reviewed & tested by the community » Active

We have at least following instances where button class is being used on <a> element:

  • Local Actions
  • Place a block on Blocks UI
  • Cancel button on entity delete form
  • Delete button on entity edit form
lauriii’s picture

fhaeberle’s picture

@lauriii How should we proceed with this one?
Reviewing this in detail, they are so many cases where the visual appearance is a button but the element is an anchor.

/admin/content
/admin/people
/admin/structure/block
/admin/structure/comment
/admin/structure/types

bnjmnm’s picture

Assigned: Unassigned » bnjmnm
bnjmnm’s picture

Assigned: bnjmnm » Unassigned
Status: Active » Needs review
StatusFileSize
new6.56 KB
new11.14 KB
new24.48 KB
new23.81 KB
new42.3 KB

Here's a first crack at this. This addresses all the scenarios mentioned in #7

Local Actions
Place a block on Blocks UI (including the modal that appears after clicking "Place block")
Cancel button on entity delete form
Delete button on entity edit form

Also addressed most of the items listed in #9 (will detail what didn't happen)

/admin/content
/admin/people
/admin/structure/block
/admin/structure/comment
/admin/structure/types

Parts that arent ideal yet

  • Converting the cancel/delete buttons to links results in poor alignment with adjacent elements. Not sure if addressing that is in scope for this issue or if it should get a followup so design can properly weigh in
  • The Show all/Hide lower priority columns toggle found on /admin/people (among other places) uses tableresponsive.js
    it is a button element that is styled to look like a link, and not sure how to best change that since the markup is added in JS.
  • Links that had the .button--primary class such as "Install theme" and "Add field" no longer look as "significant" as they should as links. I changed the font weight to bold, but there are probably some additional design choices necessary to ensure these continue to get their deserved emphasis.

  • Based on the modules source code, it looked like there may be an instance or two of this in the Workspaces module. Having never used this module, I had no idea how to access the areas where this might appear.
bnjmnm’s picture

It occurred to me after posting the patch that some of these elements will behave differently in no-js situations. There are instances where something that functions as a button with Javascript enabled (such as triggering a modal) will be a link when Javascript isn't enabled. This should be taken into account when work continues on this patch. I'm tempted to make these changes right now, but I think it would be best to get another set of eyes on #11 to determine if the overall approach seems solid before expanding on it.

ckrina’s picture

Converting the cancel/delete buttons to links results in poor alignment with adjacent elements.

The cancel/delete buttons should start using the styles for the Action Link new component. That would handle the alignment problem. The previous step for the delete icon though would be to define which icon should be used on each Action Link. I just opened this to handle that: #3074893: Change the delete button to use an action link, but feel free to close as duplicated if you think it can be solved here.

Links that had the .button--primary class such as "Install theme" and "Add field" no longer look as "significant" as they should as links.

#3036742: CTA - Call to action component will ideally solve this, and it's a stable blocker. If this ones moves forward we will define CTA as beta blocker.

ckrina’s picture

Status: Needs review » Needs work
ckrina’s picture

Issue tags: +beta blocker

Adding here the beta blocker tag, specially because this is needed for #3074893: Change the delete button to use an action link.

ckrina’s picture

Issue summary: View changes
StatusFileSize
new27.17 KB

I've prepared a version for the button in tables/list to show/hide the columns: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

I'm concerned about this being the correct approach for this specific element though: I've used the action link style because it takes less visual relevance, but it's a button, not a link. Does anyone knows if this could be a problem on an accessibility point of view?

fhaeberle’s picture

Version: 8.x-1.x-dev » 8.x-2.x-dev
Issue tags: -beta blocker

Removing beta blocker because #3036732: Action link component is already in.

huzooka’s picture

Project: Claro » Drupal core
Version: 8.x-2.x-dev » 8.9.x-dev
Component: Code » Claro theme

Version: 8.9.x-dev » 9.1.x-dev

Drupal 8.9.0-beta1 was released on March 20, 2020. 8.9.x is the final, long-term support (LTS) minor release of Drupal 8, which means new developments and disruptive changes should now be targeted against the 9.1.x-dev branch. For more information see the Drupal 8 and 9 minor version schedule and the Allowed changes during the Drupal 8 and 9 release cycles.

Version: 9.1.x-dev » 9.2.x-dev

Drupal 9.1.0-alpha1 will be released the week of October 19, 2020, which means new developments and disruptive changes should now be targeted for the 9.2.x-dev branch. For more information see the Drupal 9 minor version schedule and the Allowed changes during the Drupal 9 release cycle.

Version: 9.2.x-dev » 9.3.x-dev

Drupal 9.2.0-alpha1 will be released the week of May 3, 2021, which means new developments and disruptive changes should now be targeted for the 9.3.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

sakthivel m’s picture

Issue tags: +Needs reroll
sakthivel m’s picture

Status: Needs work » Needs review
StatusFileSize
new6.04 KB

#22 Please review the patch

kostyashupenko’s picture

Issue tags: -Needs reroll

No need for reroll against #23

Also next time @sakthivel-m please provide an interdiff

Version: 9.3.x-dev » 9.4.x-dev

Drupal 9.3.0-rc1 was released on November 26, 2021, which means new developments and disruptive changes should now be targeted for the 9.4.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.4.x-dev » 9.5.x-dev

Drupal 9.4.0-alpha1 was released on May 6, 2022, which means new developments and disruptive changes should now be targeted for the 9.5.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 9.5.x-dev » 10.1.x-dev

Drupal 9.5.0-beta2 and Drupal 10.0.0-beta2 were released on September 29, 2022, which means new developments and disruptive changes should now be targeted for the 10.1.x-dev branch. For more information see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

needs-review-queue-bot’s picture

Status: Needs review » Needs work
StatusFileSize
new144 bytes

The Needs Review Queue Bot tested this issue. It either no longer applies to Drupal core, or fails the Drupal core commit checks. Therefore, this issue status is now "Needs work".

Apart from a re-roll or rebase, this issue may need more work to address feedback in the issue or MR comments. To progress an issue, incorporate this feedback as part of the process of updating the issue. This helps other contributors to know what is outstanding.

Consult the Drupal Contributor Guide to find step-by-step guides for working with issues.

gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new6.21 KB

Patch #23, no longer applies to 10.1.x. Here I have attached the re-rolled patch for 10.1.x. please review

Status: Needs review » Needs work

The last submitted patch, 29: 3030987-29.patch, failed testing. View results

gauravvvv’s picture

Status: Needs work » Needs review
StatusFileSize
new7.41 KB
new0 bytes

re-rolled patch missed link.css file. Added same and attached interdiff.

Status: Needs review » Needs work

The last submitted patch, 31: 3030987-31.patch, failed testing. View results

Version: 10.1.x-dev » 11.x-dev

Drupal core is moving towards using a “main” branch. As an interim step, a new 11.x branch has been opened, as Drupal.org infrastructure cannot currently fully support a branch named main. New developments and disruptive changes should now be targeted for the 11.x branch, which currently accepts only minor-version allowed changes. For more information, see the Drupal core minor version schedule and the Allowed changes during the Drupal core release cycle.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

quietone’s picture

Status: Needs work » Postponed

The Claro theme was approved for removal in #3576460: [policy, no patch] Deprecate and remove Claro.

This is Postponed. The status is set according to two policies. The Remove a core extension and move it to a contributed project and the Extensions approved for removal policies.

The deprecation work is in #3576668: [meta] Tasks to deprecate Claro and the removal work in #3584638: [meta] Tasks to remove the Claro theme.

smustgrave’s picture

Project: Drupal core » Claro
Version: main » 3.0.x-dev
Component: Claro theme » Code
Status: Postponed » Needs work

Claro has moved to contrib