Fix text selection visibility in logs and code #56452
Conversation
anshuksi282-ksolves
requested review from
bbovenzi,
jscheffl,
pierrejeambrun,
ryanahamilton,
shubhamraj-git and
vincbeck
as code owners
boring-cyborg
bot
added
area:providers
area:UI
|
Oh let's not mix in css files into the Chakra React components. |
|
I think we already have a PR for text selection here #56379 |
| pre ::selection, | ||
| code ::selection, | ||
| .log-viewer ::selection, | ||
| [data-testid*="log"] ::selection { |
There was a problem hiding this comment.
I don't think we should rely on data-testid for production code. We can set a real 'id' or use another mechanism to identify those elements.
The reason for that is because I wouldn't expect to break the code by modifying test ids. I would expect only tests to fail.
|
|
||
| // Fix for text selection contrast issue #56449 | ||
|
|
||
| globalCss: { | ||
|
|
||
| "::selection": { | ||
|
|
||
| backgroundColor: "blue.500", | ||
|
|
||
| color: "white", | ||
|
|
||
| textShadow: "none", | ||
|
|
||
| }, | ||
|
|
||
| "::-moz-selection": { | ||
|
|
||
| backgroundColor: "blue.500", | ||
|
|
||
| color: "white", | ||
|
|
||
| textShadow: "none", | ||
|
|
||
| }, | ||
|
|
||
| "::-webkit-selection": { | ||
|
|
||
| backgroundColor: "blue.500", |
There was a problem hiding this comment.
Is this piece necessary since we now have a separate css file ?
| * under the License. | ||
| */ | ||
|
|
||
|
|
| } | ||
|
|
||
| ::-moz-selection { | ||
| background-color: #3182ce !important; |
There was a problem hiding this comment.
Do we need all those !important we tend to try to avoid them.
|
I'm more in favor of https://github.com/apache/airflow/pull/56379/files. Not sure what this one brings now that it's merged. |
|
I agree. Let's close this one. |
4 participants
Fix text selection contrast in Airflow UI logs and code views
Issue: #56449
Context and Problem
Following the v3.1.0 theming overhaul, Airflow adopted Chakra UI semantic tokens and a Tailwind-inspired color palette. However, explicit ::selection pseudo-element styling was omitted. As a result, browsers defaulted to low-contrast selection highlights that blend into the log and code background, making user text selections nearly invisible.
Impact
Users cannot reliably select and copy text from logs or code blocks, hindering troubleshooting, debugging, and overall accessibility.
Solution
Added global ::selection, ::-moz-selection, and ::-webkit-selection rules in the Chakra theme configuration (src/theme.ts) under globalCss, enforcing a clear blue highlight (blue.500 in light mode, blue.300 in dark mode).
Created a dedicated CSS file (src/assets/selection.css) with selection rules for pre, code, .log-viewer, and elements with data-testid*="log", ensuring consistent blue highlighting in log and code areas.
Imported selection.css in the application entry point (src/main.tsx) so that styles load early.
These changes restore high-contrast text selection, comply with WCAG AA contrast requirements, and improve user experience when copying or inspecting logs and code.
Screencast.from.2025-10-07.17-14-37.webm
^ Add meaningful description above
Read the Pull Request Guidelines for more information.
In case of fundamental code changes, an Airflow Improvement Proposal (AIP) is needed.
In case of a new dependency, check compliance with the ASF 3rd Party License Policy.
In case of backwards incompatible changes please leave a note in a newsfragment file, named
{pr_number}.significant.rstor{issue_number}.significant.rst, in airflow-core/newsfragments.