anshuksi282-ksolves opened a new pull request, #56452: URL: https://github.com/apache/airflow/pull/56452
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](https://github.com/user-attachments/assets/ff0a8254-5c4a-43ce-82b5-9622e10db6b2) <!-- Licensed to the Apache Software Foundation (ASF) under one or more contributor license agreements. See the NOTICE file distributed with this work for additional information regarding copyright ownership. The ASF licenses this file to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. --> <!-- Thank you for contributing! Please make sure that your code changes are covered with tests. And in case of new features or big changes remember to adjust the documentation. Feel free to ping committers for the review! In case of an existing issue, reference it using one of the following: closes: #ISSUE related: #ISSUE How to write a good git commit message: http://chris.beams.io/posts/git-commit/ --> <!-- Please keep an empty line above the dashes. --> --- **^ Add meaningful description above** Read the **[Pull Request Guidelines](https://github.com/apache/airflow/blob/main/contributing-docs/05_pull_requests.rst#pull-request-guidelines)** for more information. In case of fundamental code changes, an Airflow Improvement Proposal ([AIP](https://cwiki.apache.org/confluence/display/AIRFLOW/Airflow+Improvement+Proposals)) is needed. In case of a new dependency, check compliance with the [ASF 3rd Party License Policy](https://www.apache.org/legal/resolved.html#category-x). In case of backwards incompatible changes please leave a note in a newsfragment file, named `{pr_number}.significant.rst` or `{issue_number}.significant.rst`, in [airflow-core/newsfragments](https://github.com/apache/airflow/tree/main/airflow-core/newsfragments). -- This is an automated message from the Apache Git Service. To respond to the message, please log on to GitHub and use the URL above to go to the specific comment. To unsubscribe, e-mail: [email protected] For queries about this service, please contact Infrastructure at: [email protected]
