kaovilai / kaovilai/github-bot-command-palette

[daily] accessibility: add aria-label and role attributes to injected UI elements

Open
#1 0 comments 1 reaction 2 assignees Claimed by @kaovilai View on GitHub
agentic-workflows automation
Dominant language
JavaScript
Stars
1
Forks
2
Avg merge
2m
Merged PRs (30d)
15

Description

## What changed

Added ARIA attributes to all injected UI elements in `content.js` to improve accessibility for screen reader users.

### Changes

- **Command buttons**: Added `aria-label` set to the full tooltip text (description + shortcut + disabled state), so screen readers announce more than just the button label.
- **Command bar regions**: Both `inject()` and `injectIntoReviewDialog()` now set `role="region"` and `aria-label="Bot Commands"` on the wrapper `div`, making it a named landmark.
- **Icon-only buttons**: The refresh button (`↻`) and config gear link (`⚙`) now have explicit `aria-label` attributes since their text content is a Unicode symbol that screen readers may not describe clearly.
- **Cancel button**: The `✕` cancel button in the popover now has `aria-label="Cancel"`.
- **Job picker and popover dialogs**: Both floating panels now have `role="dialog"`, `aria-label`, and `aria-modal="true"` so screen readers treat them as modal dialogs.

### Why

The injected UI had no ARIA semantics — screen reader users had no way to identify the command bar as a distinct region, and icon-only buttons gave no accessible name. These are zero-cost improvements with no visual impact.

> Generated by [Daily Repository Improvement](https://github.com/kaovilai/github-bot-command-palette/actions/runs/25953627915) · ● 6.6M · [◷](https://github.com/search?q=repo%3Akaovilai%2Fgithub-bot-command-palette+%22gh-aw-workflow-id%3A+daily-improvement%22&type=pullrequests)

---

> [!NOTE]
> This was originally intended as a pull request, but GitHub Actions is not permitted to create or approve pull requests in this repository.
> The changes have been pushed to branch `accessibility/aria-labels-and-roles-4babb87dbd3ae273`.
>
> **[Click here to create the pull request](https://github.com/kaovilai/github-bot-command-palette/compare/main...accessibility/aria-labels-and-roles-4babb87dbd3ae273?expand=1&title=%5Bdaily%5D%20accessibility%3A%20add%20aria-label%20and%20role%20attributes%20to%20injected%20UI%20elements)**

To fix the permissions issue, go to **Settings** → **Actions** → **General** and enable **Allow GitHub Actions to create and approve pull requests**. See also: [gh-aw FAQ](https://github.github.com/gh-aw/reference/faq/#why-is-my-create-pull-request-workflow-failing-with-github-actions-is-not-permitted-to-create-or-approve-pull-requests)

Show patch preview (98 of 98 lines)

```diff
From 77d9095bec3da27e8d9fcbd0f01b3565bf04bbea Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
Date: Sat, 16 May 2026 05:17:23 +0000
Subject: [PATCH] accessibility: add aria-label and role attributes to injected
UI elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add aria-label to command buttons (using the existing tooltip text)
- Add role="region" and aria-label="Bot Commands" to command bar divs
- Add aria-label to icon-only buttons: refresh and config link
- Add aria-label="Cancel" to the cancel button (✕ icon)
- Add role="dialog", aria-label, aria-modal to job picker and popover

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
content.js | 14 ++++++++++++++
1 file changed, 14 insertions(+)

diff --git a/content.js b/content.js
index dabfe4d..1551f2b 100644
--- a/content.js
+++ b/content.js
@@ -52,6 +52,7 @@
tooltip += ' — plugin not enabled for this repo';
}
btn.title = tooltip;
+ btn.setAttribute('aria-label', tooltip);
btn.dataset.ghbcpId = command.id;

btn.addEventListener('click', (e) => {
@@ -178,6 +179,9 @@

const picker = document.createElement('div');
picker.className = 'ghbcp-job-picker';
+ picker.setAttribute('role', 'dialog');
+ picker.setAttribute('aria-label', 'Select jobs to run');
+ picker.setAttribute('aria-modal', 'true');

const searchInput = document.createElement('input');
searchInput.type = 'text';
@@ -369,6 +373,9 @@

const popover = document.createElement('div');
popover.className = 'ghbcp-popover';
+ popover.setAttribute('role', 'dialog');
+ popover.setAttribute('aria-label', 'Enter command value');
+ popover.setAttribute('aria-modal', 'true');

const input = document.createElement('input');
input.type = 'text';
@@ -385,6 +392,7 @@
const cancelBtn = document.createElement('button');
cancelBtn.className = 'g
... (truncated)
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.