diff --git a/.jules/palette.md b/.jules/palette.md
index 0bbf5248..8ea8f14d 100644
--- a/.jules/palette.md
+++ b/.jules/palette.md
@@ -108,10 +108,13 @@
**Learning:** [When an element is removed from the DOM, focus naturally resets to the document body, breaking the keyboard navigation flow. It is critical to calculate the next logical focus target prior to deletion and programmatically restore focus post-render.]
**Action:** [In future components involving item deletion within lists or tables, proactively incorporate index calculations before removing items to manage focus restoration correctly.]
-## $(date +%Y-%m-%d) - Add Confirmation Dialog for CSV Import
+## 2024-08-23 - Add Confirmation Dialog for CSV Import
**Learning:** File import actions that completely overwrite existing application state can lead to severe data loss if triggered accidentally. In a WBS planner where users invest significant time building task hierarchies, destructive imports need explicit user confirmation.
**Action:** Always add a confirmation dialog (`window.confirm` or custom modal) for any import or sync action that wipes out the current in-memory or persisted state, especially when there's no undo mechanism.
-## $(date +%Y-%m-%d) - Prevent accidental data loss in inline editors
+## 2024-08-23 - Prevent accidental data loss in inline editors
**Learning:** Forms that take a long time to fill out (like a WBS editor) are prone to accidental closure by users pressing `Escape` or clicking cancel. This causes immediate data loss without any warning, resulting in frustration.
**Action:** When working on editors that can be dismissed, track whether the user has modified any fields compared to their initial state. If there are changes, intercept the close action and present a confirmation dialog (`window.confirm`) to ensure they really want to discard their edits. Bypass this for intentional saves or explicit data overrides.
+## 2024-08-23 - Add keyboard accessibility to tooltip elements
+**Learning:** Tooltips on non-interactive elements (div, span) are completely inaccessible to keyboard users unless explicitly made focusable and semantic.
+**Action:** Always add tabindex="0" and role="note" (or region) to elements with 'title' attributes, and ensure a visible focus state is present.
diff --git a/app.js b/app.js
index a04aae71..6965eb97 100644
--- a/app.js
+++ b/app.js
@@ -999,6 +999,8 @@ function createStatusCellContent(progressState) {
if (progressState.description) {
badge.title = progressState.description;
badge.setAttribute('aria-label', `${progressState.label} - ${progressState.description}`);
+ badge.tabIndex = 0;
+ badge.setAttribute('role', 'note');
}
return badge;
}
diff --git a/index.html b/index.html
index d24b2a88..cd622bfd 100644
--- a/index.html
+++ b/index.html
@@ -29,18 +29,18 @@