Improving Airflow UI with Accessibility and Best Practices
- Dominant language
- Python
- Stars
- 46.9k
- Forks
- 17.8k
- Avg merge
- 2d 10h
- Merged PRs (30d)
- 483
Description
### 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 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 (``) 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 (`` 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 `` 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
-
+
```
- Use semantic 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 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)
Contributor guide
Research direction
Start by reading airflow-core/src/airflow/ui/index.html, airflow-core/src/airflow/ui/src/layouts/Nav/Nav.tsx, and airflow-core/src/airflow/ui/src/pages/Iframe.tsx at the referenced locations. Done means the proposed lang attribute, semantic navigation labeling, and iframe sandbox permissions are reviewed and applied consistently without breaking the UI or its required iframe functionality.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- accessibility, frontend, security
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 52/100