apache / apache/airflow

Improving Airflow UI with Accessibility and Best Practices

Open
#54,587 5 comments 0 reactions 0 assignees View on GitHub
area:core area:UI kind:feature
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.