[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]

• [ ] Fix in https://github.com/nextcloud/nextcloud-vue/tree/enh/a11y-texteditable-contrast

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

• [x] 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.