CommentFileSizeAuthor
#15 After-patch-appearance-dark-mode-red-color.png217.39 KBdjsagar
#15 After-patch-appearance-light-mode-purple-color.png221.92 KBdjsagar
#15 Before-patch.png223.05 KBdjsagar
#11 After-patch-dotted-line.png61.67 KBpreeti.chawla
#10 Screenshot 2023-08-08 at 9.57.56 AM.png50.74 KBsnehal-chibde
#10 gin_anchor_dotted_underline_3378791.patch699 bytessnehal-chibde
#8 gin_anchor_underline_3378791.patch685 bytessnehal-chibde
#8 after-patch-articlepage-links.png112.19 KBsnehal-chibde
#8 before-patch-article-pagelinks.png107.67 KBsnehal-chibde
#8 before-patch.png50.79 KBsnehal-chibde
#8 after-patch.png49.91 KBsnehal-chibde
#7 3378791-7.patch108.46 KBmukesh-kumar3
#7 on-modules-link.png25.9 KBmukesh-kumar3
#7 breadcrumb__link.png3.27 KBmukesh-kumar3
#3 gin_theme_anchor_fix_3378791.patch639 bytessnehal-chibde
#3 gin-link-after.png51.01 KBsnehal-chibde
link-color.png62.08 KBbnjmnm

Issue fork gin-3378791

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

bnjmnm created an issue. See original summary.

snehal-chibde’s picture

snehal-chibde commented

I am working on this issue.

snehal-chibde’s picture

snehal-chibde commented
StatusFileSize
new gin-link-after.png51.01 KB
new gin_theme_anchor_fix_3378791.patch639 bytes

Here is the patch for fixing this issue.
Attached screenshots for reference.

snehal-chibde’s picture

snehal-chibde commented
Status: Active » Needs review
hudri’s picture

hudri
Primary language German
Location Austria
commented

If I'm reading this patch correctly, it unconditionally styles all <a> tags. Can this be done with a less disruptive and wide-spread selector, e.g. something that tries to target links within running text?

Definitly not be perfect, but :where(p) a { text-decoration: underline; } or a:where(:not([class])) { text-decoration: underline; } should do it almost everywhere with a specifity of 0-0-1 and less side effects on existing admin UIs.

I'm not an accessability expert, but I don't think it is necessary to underline all links everywhere, stuff like <a class="button">, links in breadcrumbs, links in tabs, links in toolbars, links in table headers, links in views in their own table cell <td><a></td>,.... are all distinguishable without an underline.

snehal-chibde’s picture

snehal-chibde commented

@hudri sure, will check on this.

mukesh-kumar3’s picture

mukesh-kumar3 commented
StatusFileSize
new breadcrumb__link.png3.27 KB
new on-modules-link.png25.9 KB
new 3378791-7.patch108.46 KB

Hi i have applied patch for the following issue attached screenshots below. After patch adding underlines also format code in gin.css so that patch applied cleanly. And Issue is now fixed please check.

snehal-chibde’s picture

snehal-chibde commented
Issue summary: View changes
StatusFileSize
new after-patch.png49.91 KB
new before-patch.png50.79 KB
new before-patch-article-pagelinks.png107.67 KB
new after-patch-articlepage-links.png112.19 KB
new gin_anchor_underline_3378791.patch685 bytes

The above patch fails for me, also I have added a patch with a selector which will target all the a tags inside p which does not have any class, as needed as per the comment by @hudri.

bnjmnm’s picture

bnjmnm
he/him
Primary language English
Location Ann Arbor, MI
commented

I asked @aschaeggi about this on Slack to confirm the approach, since he designed Gin. He said he'd prefer a dotted underline.

snehal-chibde’s picture

snehal-chibde commented
StatusFileSize
new gin_anchor_dotted_underline_3378791.patch699 bytes
new Screenshot 2023-08-08 at 9.57.56 AM.png50.74 KB

hello @bnjmnm, added dotted underline as per the comment. Here is the updated patch and screenshot.

preeti.chawla’s picture

preeti.chawla commented
StatusFileSize
new After-patch-dotted-line.png61.67 KB

@snehal-chibde I have reviewed patch #10, applied successfully and dotted line working fine, We can move to RTBC +1

saschaeggi made their first commit to this issue’s fork.

saschaeggi opened merge request !291

saschaeggi’s picture

saschaeggi
he/him
commented
Title: WCAG A violation: links must be distinguishable without relying on color » [a11y] WCAG A violation: links must be distinguishable without relying on color

MR !291 is ready to be reviewed

djsagar’s picture

djsagar commented
Status: Needs review » Reviewed & tested by the community
StatusFileSize
new Before-patch.png223.05 KB
new After-patch-appearance-light-mode-purple-color.png221.92 KB
new After-patch-appearance-dark-mode-red-color.png217.39 KB

After applied MR !29 is local and it's resolved the issue.

I tested with multiple Accent color in different modes.

Shared attachment for reference.

Thanks!

  • saschaeggi committed 89da1500 on 8.x-3.x 
    Issue #3378791: WCAG A violation: links must be distinguishable without...
saschaeggi’s picture

saschaeggi
he/him
commented
Status: Reviewed & tested by the community » Fixed

Great thanks y'all for your work on this 👏

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

coaston’s picture

coaston commented

..hm I came here because after update of Gin theme i can see dotted underline links which makes me crazy.

Would be possible to implement that config to theme settings and disable it somehow?
I do really hate it now as for me it is not a feature, but a bug :D :D :D

saschaeggi’s picture

saschaeggi
he/him
commented

@coaston we won't add a new setting to override this.

You have options to override styles from Gin but as this makes links inaccessible again I would not recommend doing so.

See https://www.drupal.org/docs/contributed-themes/gin-admin-theme/custom-th...

coaston’s picture

coaston commented

Thank you for you clarification. Will need to accept it.