Skip to content

Fix missing ARIA attributes on dynamically inserted chapter rows #161

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CyberSecDef merged 2 commits into from
Apr 9, 2026
Merged

Fix missing ARIA attributes on dynamically inserted chapter rows #161

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6b6f6fb
Initial plan
Copilot Apr 9, 2026
4907788
Fix missing accessibility attributes on dynamic chapter rows
Copilot Apr 9, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
53 changes: 20 additions & 33 deletions static/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -626,52 +626,39 @@ $(function () {
}
});

// Add chapter before
$("#chapter-tbody").on("click", ".btn-add-before", function () {
var $row = $(this).closest("tr");
var newRow =
function buildNewChapterRowHtml() {
return (
"<tr>" +
"<td class='chapter-number'></td>" +
"<td><div class='editable-cell' contenteditable='true' data-field='title'>New Chapter</div></td>" +
"<td><div class='editable-cell' contenteditable='true' data-field='summary'>Enter chapter summary...</div></td>" +
"<td><div class='editable-cell' contenteditable='true' data-field='title' role='textbox' aria-label='Chapter title'>New Chapter</div></td>" +
"<td><div class='editable-cell' contenteditable='true' data-field='summary' role='textbox' aria-label='Chapter summary'>Enter chapter summary...</div></td>" +
Comment on lines +629 to +634
Copy link

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

buildNewChapterRowHtml() duplicates most of the markup already constructed in addChapterRow(), but with different escaping and ARIA-label conventions. To avoid the two templates drifting again (especially for accessibility attributes), consider extracting a single chapter-row builder that both addChapterRow() and the add-before/add-after handlers can use (e.g., parameterized by title/summary and optionally number).

Copilot uses AI. Check for mistakes.
"<td class='text-center'>" +
"<div class='btn-group btn-group-sm me-1' role='group'>" +
"<button class='btn btn-outline-secondary btn-move-up' title='Move Up'><i class='bi bi-arrow-up'></i></button>" +
"<button class='btn btn-outline-secondary btn-move-down' title='Move Down'><i class='bi bi-arrow-down'></i></button>" +
"<div class='btn-group btn-group-sm me-1' role='group' aria-label='Reorder chapter'>" +
"<button class='btn btn-outline-secondary btn-move-up' title='Move Up' aria-label='Move chapter up'><i class='bi bi-arrow-up'></i></button>" +
"<button class='btn btn-outline-secondary btn-move-down' title='Move Down' aria-label='Move chapter down'><i class='bi bi-arrow-down'></i></button>" +
"</div>" +
"<div class='btn-group btn-group-sm me-1' role='group'>" +
"<button class='btn btn-outline-success btn-add-before' title='Add Before'><i class='bi bi-plus-circle'></i></button>" +
"<button class='btn btn-outline-success btn-add-after' title='Add After'><i class='bi bi-plus-circle'></i></button>" +
"<div class='btn-group btn-group-sm me-1' role='group' aria-label='Insert around chapter'>" +
"<button class='btn btn-outline-success btn-add-before' title='Add Before' aria-label='Add chapter before'><i class='bi bi-plus-circle'></i></button>" +
Comment on lines +633 to +641
Copy link

Copilot AI Apr 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The new rows use generic aria-label values (e.g., "Chapter title"), while rows created via addChapterRow() use numbered labels (e.g., "Chapter 3 title"). Since renumberChapters() only updates the visible number, moving/inserting chapters can leave the existing numbered aria-labels incorrect. Consider updating renumberChapters() (or adding a helper it calls) to also recompute all chapter-related ARIA labels (cells, button groups, and buttons) based on the current index so screen readers get accurate, consistent labels.

Copilot uses AI. Check for mistakes.
"<button class='btn btn-outline-success btn-add-after' title='Add After' aria-label='Add chapter after'><i class='bi bi-plus-circle'></i></button>" +
"</div>" +
"<button class='btn btn-sm btn-outline-danger btn-delete-chapter' title='Delete Chapter'><i class='bi bi-trash'></i></button>" +
"<button class='btn btn-sm btn-outline-danger btn-delete-chapter' title='Delete Chapter' aria-label='Delete chapter'><i class='bi bi-trash'></i></button>" +
"</td>" +
"</tr>";
$row.before(newRow);
"</tr>"
);
}

// Add chapter before
$("#chapter-tbody").on("click", ".btn-add-before", function () {
var $row = $(this).closest("tr");
$row.before(buildNewChapterRowHtml());
renumberChapters();
markOutlineDirty();
});

// Add chapter after
$("#chapter-tbody").on("click", ".btn-add-after", function () {
var $row = $(this).closest("tr");
var newRow =
"<tr>" +
"<td class='chapter-number'></td>" +
"<td><div class='editable-cell' contenteditable='true' data-field='title'>New Chapter</div></td>" +
"<td><div class='editable-cell' contenteditable='true' data-field='summary'>Enter chapter summary...</div></td>" +
"<td class='text-center'>" +
"<div class='btn-group btn-group-sm me-1' role='group'>" +
"<button class='btn btn-outline-secondary btn-move-up' title='Move Up'><i class='bi bi-arrow-up'></i></button>" +
"<button class='btn btn-outline-secondary btn-move-down' title='Move Down'><i class='bi bi-arrow-down'></i></button>" +
"</div>" +
"<div class='btn-group btn-group-sm me-1' role='group'>" +
"<button class='btn btn-outline-success btn-add-before' title='Add Before'><i class='bi bi-plus-circle'></i></button>" +
"<button class='btn btn-outline-success btn-add-after' title='Add After'><i class='bi bi-plus-circle'></i></button>" +
"</div>" +
"<button class='btn btn-sm btn-outline-danger btn-delete-chapter' title='Delete Chapter'><i class='bi bi-trash'></i></button>" +
"</td>" +
"</tr>";
$row.after(newRow);
$row.after(buildNewChapterRowHtml());
renumberChapters();
markOutlineDirty();
});
Expand Down
Loading