NithinU2802 opened a new issue, #54587: URL: https://github.com/apache/airflow/issues/54587
### Apache Airflow version main (development) ### If "Other Airflow 2 version" selected, which one? _No response_ ### What happened? In the [Airflow UI](https://github.com/apache/airflow/tree/main/airflow-core/src/airflow/ui) lacks some important accessibility features such as a proper lang attribute on the <html> tag and semantic navigation landmarks with appropriate ARIA labels. Additionally, iframe sandbox permissions are not explicitly defined to balance security and functionality. These missing details reduce usability for screen reader users and create potential security ambiguities. ### What you think should happen instead? In [ui](https://github.com/apache/airflow/tree/main/airflow-core/src/airflow/ui) is missing some important accessibility and security features: - In [2nd Line](https://github.com/apache/airflow/blob/main/airflow-core/src/airflow/ui/index.html) - The root HTML element (`<html>`) does **not** have a `lang` attribute, which is essential for screen readers to correctly interpret the language of the page. - In [129th Line attribute of VStack](https://github.com/apache/airflow/blob/main/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx) - The main navigation component (`Nav.tsx`) is missing semantic HTML usage (`<nav>` element) and a descriptive ARIA label (`aria-label`), reducing accessibility for users relying on assistive technologies. - In [15th Line](https://github.com/apache/airflow/blob/main/airflow-core/src/airflow/ui/src/pages/Iframe.tsx) - The iframe component (`Iframe.tsx`) uses a sandbox attribute that only allows `allow-forms`, but it should explicitly include `allow-scripts` to enable necessary functionality while maintaining security controls. These omissions impact accessibility compliance (WCAG 2.1) and can cause usability issues for users relying on screen readers and can lead to potential iframe security misconfigurations. ### How to reproduce The following changes should be made: - **Add a `lang="en"` attribute** to the `<html>` tag in [`airflow-core/src/airflow/ui/index.html`](https://github.com/apache/airflow/blob/main/airflow-core/src/airflow/ui/index.html) to help screen readers and improve SEO: (2nd Line) ```diff - <html style="height: 100%"> + <html lang="en" style="height: 100%"> ``` - Use semantic <nav> element with ARIA labeling in the navigation component [airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx](https://github.com/apache/airflow/blob/main/airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx) to improve discoverability by assistive technologies: (129th -147th Line) ```diff alignItems="center" + as="nav" + aria-label={translate("nav.mainNavigation")} bg="blue.muted" height="100%" + role="navigation" ``` - Update iframe sandbox permissions in [airflow-core/src/airflow/ui/src/pages/Iframe.tsx](https://github.com/apache/airflow/blob/main/airflow-core/src/airflow/ui/src/pages/Iframe.tsx) to include allow-scripts alongside allow-forms for required functionality without compromising security: (25th Line) ```diff - sandbox = "allow-forms", + sandbox = "allow-forms allow-scripts", ``` ### Operating System Windows 11 ### Versions of Apache Airflow Providers _No response_ ### Deployment Official Apache Airflow Helm Chart ### Deployment details _No response_ ### Anything else? > Please review the proposed accessibility and security improvements for the Airflow UI and let me know if it’s okay to proceed with these changes. I have outlined adding the lang="en" attribute to the <html> tag, using semantic nav elements with appropriate ARIA labels, and updating the iframe sandbox permissions to include allow-scripts. > > If I have misunderstood any requirements or best practices, please feel free to correct me or share your thoughts. ### Are you willing to submit PR? - [x] Yes I am willing to submit a PR! ### Code of Conduct - [x] I agree to follow this project's [Code of Conduct](https://github.com/apache/airflow/blob/main/CODE_OF_CONDUCT.md) -- 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]
