Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

XWIKI-20827: Inline links must be distinguishable without relying on color #2329

Merged
merged 8 commits into from Oct 17, 2023

Conversation

Sereza7
Copy link
Contributor

@Sereza7 Sereza7 commented Sep 7, 2023

Jira

https://jira.xwiki.org/browse/XWIKI-20827

PR Changes

  • Darkened color of the regular text on a themeless wiki and Iceberg colortheme.
  • Added a rule to underline anchors in muted-text nodes.

Notes

View

First, here is a comparison of the Home page with the Iceberg color theme, with and without the changes in this PR:
vvv before the PR
20827-beforePR
vvv after the PR
20827-afterPR2
vvv Side by side view
20827-comparison

Hereafter are views of other pages in a default distribution, with the changes in this PR. Note that some anchors are underlined when used in blocks with the .muted-text mixin.

20827-History
20827-Help
20827-sandbox

At last, a full color comparison between #333 (former text-color value) and #222 (new text-color value):
paletteTextColor20827

…color

* Darkened color of the regular text on a themeless wiki and Iceberg colortheme.
* Added a rule to underline anchors in `muted-text` nodes.

Note:
* It was not possible to just make the muted text color darker, because it would have been too similar to the regular text color.
* From my manual tests, this solved the `link-in-text-block` in all situations. Tested on the Home, Sandbox and Help pages.
…color

* Increased precision on the text muted selector to avoid filling the breadcrumb with nodes that don't need an underline but had one.
@michitux
Copy link
Contributor

My two cents but I think this is really a design and not a code review questions:

  • 👍 for the darker text, I think this is much less intrusive than inconsistent underlining with complicated CSS.
  • I'm not sure regarding the underline with muted-text. I understand the reasoning which absolutely makes sense but again this seems inconsistent.

Overall, to me this seems better than the other proposed solutions. Maybe it would be a good opportunity to question the use of muted-text. I'm not saying we should remove it, I'm just saying that we should check where it is used and if it really makes sense there.

I would suggest updating the forum thread with this solution to get some more feedback.

@Sereza7
Copy link
Contributor Author

Sereza7 commented Sep 14, 2023

Thank you for your feedback @michitux !

I'm not sure regarding the underline with muted-text. I understand the reasoning which absolutely makes sense but again this seems inconsistent.

For muted-text, there is no 'easy' solution by just changing color. Therefore we need to make a selector (just like the solution we had to abandon in #2313) to detect inline links. However, here the selector is easier, since we can assume that everything that uses the .muted-text mixin is a text element. It's not perfect but I think it's better than the solution we had before, and this drawback is limited to the scope of elements using .muted-text, which is way less than any element in the former PR.

Let me know if you think of a better solution, but even though we discussed a lot on the topic I couldn't think of a better one yet.

Overall, to me this seems better than the other proposed solutions. Maybe it would be a good opportunity to question the use of muted-text. I'm not saying we should remove it, I'm just saying that we should check where it is used and if it really makes sense there.

Note that I took care of some edge cases in e19d056. Before that, all anchors in the breadcrumbs would be underlined even though they are not inline. This commit limits the use of underline to the most straightforward kind of use of the mixin: muted textual element with an anchor node inside.

I think it would be difficult to find anywhere where the use of .muted-text is not appropriate:

  • It's a pretty straightforward semantic: 'this element should not receive too much user attention'
  • From experience, it's not used enough rather than too much (and the UI breaks in niche UC / secondary color themes because this semantic is conveyed through hard coded colors or non full opacity).

I would suggest updating the forum thread with this solution to get some more feedback.

I reopened the topic and posted:
https://forum.xwiki.org/t/accessible-inline-links-and-the-extra-accessibility-features/12381/12 👍

@Sereza7
Copy link
Contributor Author

Sereza7 commented Oct 4, 2023

Note that Github seems to be heading towards a new option to underline links:
https://ericwbailey.website/published/github-now-has-a-setting-to-underline-links/

@vmassol
Copy link
Member

vmassol commented Oct 4, 2023

Note that Github seems to be heading towards a new option to underline links:
https://ericwbailey.website/published/github-now-has-a-setting-to-underline-links/

Yes, and they say what we said, i.e. not everyone wants underline so it needs to be an option.

// contrast between anchors and regular text is too low.
.text-muted {
color: @text-muted;
& > a {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Isn't this selector too restrictive? For example, from wiki syntax, we frequently wrap links in a span.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note that I took care of some edge cases in e19d056. Before that, all anchors in the breadcrumbs would be underlined even though they are not inline. This commit limits the use of underline to the most straightforward kind of use of the mixin: muted textual element with an anchor node inside.


It's not a perfect selector unfortunately... :/
From my understanding, if we wrap the link in a span, then it's correct to assume the '.text-muted' is only applied on this span. From what I could see, this selector was appropriate and allowed to avoid getting too many underlines everywhere (the breadcrumb ones were not that good).

From what I could see it worked well on the few pages I tested on (Home, Help, Sandbox and change history).

@Sereza7
Copy link
Contributor Author

Sereza7 commented Oct 17, 2023

Removed the changes related to the .muted-text mixin to provide an almost complete solution without the complexities brought by conditional inline underlining.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
3 participants