diff --git a/.jules/palette.md b/.jules/palette.md index fa2fd8c..bb2af57 100644 --- a/.jules/palette.md +++ b/.jules/palette.md @@ -1,3 +1,7 @@ ## 2024-05-23 - Accessible Toast Notifications **Learning:** Toast notifications often disappear too quickly for some users. Implementing a 5000ms minimum duration AND a manual close button ensures compliance with accessibility standards (WCAG 2.2.1 Timing Adjustable) and improves usability for everyone. **Action:** When implementing temporary feedback messages, always include a visual close button and ensure the timeout is sufficient (>= 5000ms), or allow user preference to extend it. + +## 2024-04-19 - Keyboard Shortcut Hints & Preserving DOM Structure +**Learning:** When adding visual `` hints inside interactive elements (like buttons), updating state using `textContent` destroys the nested HTML structure, removing the hints when state is restored. Furthermore, relying on `innerHTML` introduces XSS vulnerabilities (blocked by strict CSPs). +**Action:** When updating DOM elements that contain nested HTML tags, preserve structural integrity by caching child nodes via `Array.from(element.childNodes)` and resetting state using `element.replaceChildren(...cachedNodes)`. This safely maintains visual hints without violating security baselines. diff --git a/index.html b/index.html index c11f76f..278d09c 100644 --- a/index.html +++ b/index.html @@ -3,7 +3,7 @@ - + 5ive - UX Sample