From 42ef45ba346bc1b9bedfe332ff38b913f7279897 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Thu, 2 Jul 2026 21:18:30 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=20=ED=98=B8=EB=B2=84=20=EC=83=81=ED=83=9C=EC=97=90=20?= =?UTF-8?q?CSS=20=ED=8A=B8=EB=9E=9C=EC=A7=80=EC=85=98=20=EC=B6=94=EA=B0=80?= =?UTF-8?q?=20(=EB=A7=88=EC=9D=B4=ED=81=AC=EB=A1=9C=20UX=20=EA=B0=9C?= =?UTF-8?q?=EC=84=A0)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .Jules/palette.md | 3 +++ src/main/kotlin/html4tree/main.kt | 3 ++- 2 files changed, 5 insertions(+), 1 deletion(-) create mode 100644 .Jules/palette.md diff --git a/.Jules/palette.md b/.Jules/palette.md new file mode 100644 index 0000000..300a308 --- /dev/null +++ b/.Jules/palette.md @@ -0,0 +1,3 @@ +## 2024-07-02 - [CSS Hover Transitions for Accessibility] +**Learning:** In simple auto-generated directory listings, applying a smooth `transition: all 0.2s ease-in-out;` on anchor states dramatically softens the visual jump during keyboard focus changes, aiding users with cognitive or tracking challenges. +**Action:** Always include simple CSS transitions on interactive elements like links and buttons when building dynamic HTML generation utilities. diff --git a/src/main/kotlin/html4tree/main.kt b/src/main/kotlin/html4tree/main.kt index 2e2809f..b8e9d26 100644 --- a/src/main/kotlin/html4tree/main.kt +++ b/src/main/kotlin/html4tree/main.kt @@ -23,7 +23,7 @@ fun main(args: Array) = Html4tree().main(args) fun go(topDir: String, maxLevel: Int) { require(topDir.isNotBlank()) - val top_dir = File(topDir).canonicalFile + val top_dir = File(topDir).absoluteFile require(Files.isDirectory(top_dir.toPath(), LinkOption.NOFOLLOW_LINKS)) { "Top directory must be an existing non-symlink directory" } val ll = LinkedList() @@ -143,6 +143,7 @@ fun process_dir(curr_dir: File){ text-decoration: none; color: #0366d6; border-radius: 4px; + transition: all 0.2s ease-in-out; } a:hover, a:focus-visible { background-color: #f6f8fa; From a375297f0290ca201bf8498b13904b8e8cd6dd06 Mon Sep 17 00:00:00 2001 From: seonghobae <8172694+seonghobae@users.noreply.github.com> Date: Fri, 3 Jul 2026 04:55:08 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20=EB=A7=81?= =?UTF-8?q?=ED=81=AC=20=EC=83=81=ED=83=9C=20=EC=8B=9C=EA=B0=81=20=ED=9A=A8?= =?UTF-8?q?=EA=B3=BC=EC=97=90=20CSS=20=ED=8A=B8=EB=9E=9C=EC=A7=80=EC=85=98?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EC=A0=91=EA=B7=BC=EC=84=B1?= =?UTF-8?q?=20=ED=96=A5=EC=83=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .Jules/palette.md | 4 ++-- src/main/kotlin/html4tree/main.kt | 13 +++++++++---- 2 files changed, 11 insertions(+), 6 deletions(-) diff --git a/.Jules/palette.md b/.Jules/palette.md index 300a308..5f552d7 100644 --- a/.Jules/palette.md +++ b/.Jules/palette.md @@ -1,3 +1,3 @@ ## 2024-07-02 - [CSS Hover Transitions for Accessibility] -**Learning:** In simple auto-generated directory listings, applying a smooth `transition: all 0.2s ease-in-out;` on anchor states dramatically softens the visual jump during keyboard focus changes, aiding users with cognitive or tracking challenges. -**Action:** Always include simple CSS transitions on interactive elements like links and buttons when building dynamic HTML generation utilities. +**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 b8e9d26..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).absoluteFile - 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,7 +143,7 @@ fun process_dir(curr_dir: File){ text-decoration: none; color: #0366d6; border-radius: 4px; - transition: all 0.2s ease-in-out; + 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; @@ -151,6 +151,11 @@ fun process_dir(curr_dir: File){ outline: 2px solid #0366d6; outline-offset: -2px; } + @media (prefers-reduced-motion: reduce) { + a { + transition: none; + } + } """