Related ticket: https://phabricator.wikimedia.org/T280409

Hi @schoenbaechler

Update color contrast to text and icons.

About this, what's your suggestion for that? Sometimes it happens on grey text or icons, but we can also make our standard for the contrast ratio for the scanner app.

The app: https://play.google.com/store/apps/details?id=com.google.android.apps.accessibility.auditor

Thanks @cooltey

Update color contrast to text and icons.

About this, what's your suggestion for that?

Use color_group_11 instead of color_group_13

In T294863#7498692, @schoenbaechler wrote:

Thanks @cooltey

Update color contrast to text and icons.

About this, what's your suggestion for that?

Use color_group_11 instead of color_group_13

Thanks! @schoenbaechler.

The color contrast issue does not only exist on the specific item I have posted in this ticket. Does your suggestion apply to all other places?

@cooltey does it apply to all instances where we are using the tab component? If that is the case, yes, please apply the color change globally. If not, we might have to evaluate case by case as it might have unforeseen effects if we’d just go with it.

@JTannerWMF

Making the blue links have larger clickable areas, which will require cooperation with the Product Infrastructure team.

Regarding the finding above, I found the root cause of bad support on accessibility in the app. The screen reader cannot read the whole sentence without any interruption if the sentence contains a link.

The solution could be, adding a function to disable the hyperlinks in the mobile-html and it will be enabled automatically when the accessibility service is on.

@MSantos Is it possible to add a function to disable/strip hyperlinks in the mobile-html?

Hi @schoenbaechler

As we discussed in the meeting, here's the APK for updating the color contrast. Please note that this is a Dev version instead of Alpha.
https://drive.google.com/file/d/1h_mPMW0tjifUR_CC4U2Q_TpneubcnWRL/view?usp=sharing

I changed the color_group_28 light theme from black38 to base30, and then there is no color contrast warning anymore.

Most of the color changes are related to search icons, language code text and border, and some small text labels.

And also update the notification tab grey text color to color_group_11.

Please let me know how they look, thanks!

@cooltey I can’t access the link you provided on Google Drive (requested access)

Hi @schoenbaechler, my bad. I have updated the permission and please check it again.

I made a rough audit and it seems like the changes are all fine. Means we can move forward with this

Thanks @cooltey!

@vadim-kovalenko I've discussed with Cooltey and we have an investigation to make in this task, in order to fulfill the following request:

I would like to have the hyperlinks on by default, and have a method to toggle the hyperlinks off on the client-side (by sending a parameter).

I'm thinking about doing the following approach:

• A pagelib function is available on the client-side to toggle anchors into spans but keeping the needed data in the tag to toggle it back to an anchor, for example:

<a href="wiki/Title"> turns into <span data-href="wiki/Title"> and then we can turn it back to <a href="wiki/Title">

I'm open to other solutions and variations of this one, for example, the function works only for specific sections in order to avoid a huge DOM re-render.

@cooltey could you confirm if this possible solution we will start to investigate can solve the problem stated?

In T294863#7557718, @MSantos wrote:

@vadim-kovalenko I've discussed with Cooltey and we have an investigation to make in this task, in order to fulfill the following request:

I would like to have the hyperlinks on by default, and have a method to toggle the hyperlinks off on the client-side (by sending a parameter).

I'm thinking about doing the following approach:

• A pagelib function is available on the client-side to toggle anchors into spans but keeping the needed data in the tag to toggle it back to an anchor, for example:

<a href="wiki/Title"> turns into <span data-href="wiki/Title"> and then we can turn it back to <a href="wiki/Title">

I'm open to other solutions and variations of this one, for example, the function works only for specific sections in order to avoid a huge DOM re-render.

@cooltey could you confirm if this possible solution we will start to investigate can solve the problem stated?

Thanks @MSantos, I think the solution would work.

However, after a discussion with the team, we have decided to hold and wait for feedback from other groups about the approach. We will ping or tag you in this ticket about the result whether we should process this. Thanks!

Per discussion with @schoenbaechler in Slack:

Hey @cfeng, please make the following changes then:
Hint text in search bar → color_group_63
Language text in search page where are not selected → color_group_63
Language code text and border in Wikipedia Languages page → color_group_63
Keep color_group_28 for “And some button/text are in disabled state.” → as mentioned: it’s fine to use insufficient color contrast for disabled state. See Material theming.

Moved the ticket to Doing.

Appears to be fixed on 2.7.50390-beta-2021-12-23