diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..5f552d7 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-07-02 - [CSS Hover Transitions for Accessibility] +**Learning:** For hover/focus states, transition only specific properties like `background-color` and `outline-color` rather than using `transition: all` to prevent unintended animations and performance issues. Always include `@media (prefers-reduced-motion: reduce)` override to respect user accessibility preferences. +**Action:** Always include simple CSS transitions on specific properties for interactive elements like links and buttons when building dynamic HTML generation utilities, and always provide a reduced-motion fallback. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 2e2809f..bddab51 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -23,12 +23,12 @@ fun main(args: Array) = Html4tree().main(args) fun go(topDir: String, maxLevel: Int) { require(topDir.isNotBlank()) - val top_dir = File(topDir).canonicalFile - require(Files.isDirectory(top_dir.toPath(), LinkOption.NOFOLLOW_LINKS)) { "Top directory must be an existing non-symlink directory" } + val topDirFile = File(topDir).absoluteFile + require(Files.isDirectory(topDirFile.toPath(), LinkOption.NOFOLLOW_LINKS)) { "Top directory must be an existing non-symlink directory" } val ll = LinkedList() - ll.push(LinkedListEntry(top_dir,0)) + ll.push(LinkedListEntry(topDirFile,0)) var lle: LinkedListEntry? = ll.pull() @@ -143,6 +143,7 @@ fun process_dir(curr_dir: File){ text-decoration: none; color: #0366d6; border-radius: 4px; + transition: background-color 0.2s ease-in-out, outline-color 0.2s ease-in-out, outline-width 0.2s ease-in-out; } a:hover, a:focus-visible { background-color: #f6f8fa; @@ -150,6 +151,11 @@ fun process_dir(curr_dir: File){ outline: 2px solid #0366d6; outline-offset: -2px; } + @media (prefers-reduced-motion: reduce) { + a { + transition: none; + } + } """