search

flutter / flutter

Flutter makes it easy and fast to build beautiful apps for mobile and beyond
https://flutter.dev
BSD 3-Clause "New" or "Revised" License
162.28k stars 26.66k forks source link

High Contrast `TokenTextFieldOutlined.errorHoverOutlineColor` blends into Widget Background #147183

Closed dsanagustin closed 1 week ago

dsanagustin commented 3 weeks ago

Steps to reproduce

  1. Open Google Earth with High Contrast enabled in system accessibility settings.
  2. Add one placemark
  3. Click on edit icon
  4. Click on media
  5. Choose Add from photo or video URL option
  6. Type an invalid URL and observe the text bar outline
  7. Hover over the outline and watch it disappear in light mode, or become very dark in dark mode.

Expected results

In high contrast light mode, I expect the error outline to go from red to dark red when hovered.

In high contrast dark mode, I expect the error outline to go from red to light pink when hovered.

Actual results

In high contrast light mode, I see the error outline to go from red to white when hovered. This completely camouflages the outline against the white background.

In high contrast dark mode, I see the error outline to go from red to dark red when hovered. It's still visible, but very hard to see against the dark background.

Code snippet

Code sample ```dart import 'package:flutter/material.dart'; // ... @override Widget build(BuildContext context) { // ... return TextFormField( // ... decoration: outlinedInputDecoration(context).copyWith(labelText: 'someLabel'), // ... ); } ```

Screenshots or Video

Screenshots / Video demonstration Error Hover Outline in High Contrast Light Mode: https://youtu.be/ptyPfNE-_5E Error Hover Outline in High Contrast Dark Mode: https://youtu.be/tmBuVy3LYqo

Logs

Logs ```console N/A ```

Flutter Doctor output

Doctor output ```console [ +2 ms] ProcessManager.runSync('which java') [ +4 ms] executing: /usr/local/buildtools/java/jdk/bin/java --version [ +1 ms] ProcessManager.runSync('/usr/local/buildtools/java/jdk/bin/java --version') [ +351 ms] Exit code 0 from: /usr/local/buildtools/java/jdk/bin/java --version [ +1 ms] openjdk 11.0.20.1 2024-02-01 OpenJDK Runtime Environment (build 11.0.20.1+1-google-release-603532446) OpenJDK 64-Bit Server VM (build 11.0.20.1+1-google-release-603532446, mixed mode, sharing) [ +1 ms] executing: /usr/bin/adb devices -l [ +1 ms] ProcessManager.run('/usr/bin/adb devices -l') [ +1 ms] Flag --fuchsia not found, Fuchsia device discovery disabled. [ +1 ms] Gallium device polling: connecting to galliumd. [ +1 ms] [✓] Flutter (Channel google3, on Debian GNU/Linux rodete 6.6.15-2rodete2-amd64, locale en_US.UTF-8) [ +1 ms] • Framework revision 63634c25ad (7 days ago), 2024-04-15T00:00:00.000 [ +1 ms] • Engine revision 1a13c7d1f4 [ ] • Dart version 3d13dbfb32 [ +1 ms] [✓] Android toolchain - develop for Android devices (Android SDK version Stable) [ +1 ms] • Android SDK at google3 [ +1 ms] • Platform Stable, build-tools Stable [ +1 ms] • Java binary at: /usr/local/buildtools/java/jdk/bin/java [ +1 ms] • Java version OpenJDK Runtime Environment (build 11.0.20.1+1-google-release-603532446) [ +1 ms] [✓] VS Code (version 1.87.1) [ +1 ms] • VS Code at /usr/share/code [ +1 ms] • Flutter extension can be installed from: [ +1 ms] 🔨 https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter [ +369 ms] List of devices attached [ +1 ms] Gallium device polling failed to connect to galliumd: gRPC Error (code: 14, codeName: UNAVAILABLE, message: Error connecting: SocketException: Connection refused (OS Error: Connection refused, errno = 111), address = localhost, port = 47418, details: null, rawResponse: null, trailers: {}) [ +1 ms] executing: uname -m [ +1 ms] ProcessManager.runSync('uname -m') [ +3 ms] Exit code 0 from: uname -m [ +1 ms] x86_64 [ +1 ms] executing: /usr/bin/adb devices -l [ +1 ms] ProcessManager.run('/usr/bin/adb devices -l') [ +4 ms] List of devices attached [ +2 ms] [✓] Connected device (1 available) [ +1 ms] • Linux (desktop) • linux • linux-x64 • Debian GNU/Linux rodete 6.6.15-2rodete2-amd64 [ +1 ms] [✓] Google3 (on linux) [ +1 ms] • KVM enabled [ ] • No issues found! [ +1 ms] "flutter doctor" took 773ms. [ +821 ms] ensureAnalyticsSent: 820ms [ +2 ms] Running 1 shutdown hook [ +1 ms] Shutdown hooks complete [ +1 ms] exiting with code 0 ```
darshankawar commented 3 weeks ago

Expected results

In high contrast light mode, I expect the error outline to go from red to dark red when hovered.

In high contrast dark mode, I expect the error outline to go from red to light pink when hovered.

Actual results

In high contrast light mode, I see the error outline to go from red to white when hovered. This completely camouflages the outline against the white background.

In high contrast dark mode, I see the error outline to go from red to dark red when hovered. It's still visible, but very hard to see against the dark background.

@dsanagustin Please provide us a runnable complete reproducible code sample pertaining to Flutter app that shows the actual result vs expected result you are looking for, so as to properly address the issue you are reporting.

dsanagustin commented 1 week ago

It was an issue with our internal color schemes. Closing.