Needs work
Project:
Claro
Version:
3.0.x-dev
Component:
Code
Priority:
Normal
Category:
Task
Assigned:
Unassigned
Reporter:
Created:
6 Feb 2019 at 09:59 UTC
Updated:
21 Sep 2026 at 15:05 UTC
Jump to comment: Most recent, Most recent file
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/>
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.
| Comment | File | Size | Author |
|---|---|---|---|
| #31 | interdiff-29_31.txt | 0 bytes | gauravvvv |
| #31 | 3030987-31.patch | 7.41 KB | gauravvvv |
| #29 | 3030987-29.patch | 6.21 KB | gauravvvv |
| #28 | 3030987-nr-bot.txt | 144 bytes | needs-review-queue-bot |
| #16 | show-hide-cols.png | 27.17 KB | ckrina |
Comments
Comment #2
lauriiiComment #3
ccasals commentedWorking on this one for drupalcon seattle sprint unless objections!
Comment #4
ccasals commentedAfter 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.
Comment #5
ccasals commentedComment #6
fhaeberleComment #7
lauriiiWe have at least following instances where button class is being used on
<a>element:Comment #8
lauriiiComment #9
fhaeberle@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
Comment #10
bnjmnmComment #11
bnjmnmHere's a first crack at this. This addresses all the scenarios mentioned in #7
Also addressed most of the items listed in #9 (will detail what didn't happen)
Parts that arent ideal yet
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.
.button--primaryclass 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.Comment #12
bnjmnmIt 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.
Comment #13
ckrinaThe 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.
#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.
Comment #14
ckrinaComment #15
ckrinaAdding here the beta blocker tag, specially because this is needed for #3074893: Change the delete button to use an action link.
Comment #16
ckrinaI'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?
Comment #17
fhaeberleRemoving beta blocker because #3036732: Action link component is already in.
Comment #18
huzookaComment #22
sakthivel m commentedComment #23
sakthivel m commented#22 Please review the patch
Comment #24
kostyashupenkoNo need for reroll against #23
Also next time @sakthivel-m please provide an interdiff
Comment #28
needs-review-queue-bot commentedThe 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.
Comment #29
gauravvvv commentedPatch #23, no longer applies to 10.1.x. Here I have attached the re-rolled patch for 10.1.x. please review
Comment #31
gauravvvv commentedre-rolled patch missed
link.cssfile. Added same and attached interdiff.Comment #35
quietone commentedThe 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.
Comment #36
smustgrave commentedClaro has moved to contrib