[BITV] 9.1.4.3/3.4 - "Details" section / "Share" menu - Both the label and note do not meet the contrast requirements for text. (2)

[AndyScherzinger]

• enh(NcActions): Readability nextcloud-libraries/nextcloud-vue#4049
• chore(release): Bump version to 7.11.4 nextcloud-libraries/nextcloud-vue#4092
• fix(deps): Bump @nextcloud/vue to 7.11.4 #38214

Details

https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-6fe46b78da-v3-n4

• 9.1.4.3/10.4 - https://report.bitvtest.de/default-en/d63601ac-cb34-4645-8256-66bec78964a0.html#checkpoint-6fe46b78da-v10-n4

[Pytal]

On master

• Share label
• Share note

[Pytal]

NcAction* components are using opacity to indicate focus/hover

The share note is using NcActionTextEditable

To ensure we are using contrast-verified colors we should stop using opacity in NcAction* components and go with one of 2 options below

1. Replace $opacity_normal: .7 → --color-text-maxcontrast and $opacity_full: 1 → --color-main-text
   
2. Set the base color to --color-main-text and like the tertiary NcButton:
   
   only use the background color, --color-background-hover, alongside input-specific colors, e.g. --color-primary-element for text field borders, to indicate focus/hover
   

Option 2 seems better to me as all options have high readability regardless of focus/hover

NcActionTextEditable examples

Option 1	Option 2

This change will affect all NcAction* components, not just NcActionTextEditable, to maintain consistency

Which option should we go for @jancborchardt?

[Pytal]

👆 Any option you'd lean towards @nimishavijay?

[nimishavijay]

Agreed, option 2 sounds like it has better readability overall :) Here's how it would look like in Mail and Files.