fix(ui): make pressed-link feedback visible on the rendered filename

src/main/kotlin/html4tree/main.kt

@@ -51,12 +51,12 @@ a {
   border-radius: 4px;
   transition: background-color 0.2s ease, outline-color 0.2s ease;
 }
-a:hover, a:focus-visible {
+a:hover, a:focus-visible, a:active {
   background-color: #f6f8fa;
   outline: 2px solid #0969da;
   outline-offset: -2px;
 }
-a:hover span:last-child, a:focus-visible span:last-child {
+a:hover .entry-name, a:focus-visible .entry-name, a:active .entry-name {
   text-decoration: underline;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -94,7 +94,7 @@ li + li {
   a {
     color: #58a6ff;
   }
-  a:hover, a:focus-visible {
+  a:hover, a:focus-visible, a:active {
     background-color: #161b22;
     outline-color: #58a6ff;
   }
@@ -429,7 +429,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
          <h1>${directoryName.escapeHtml()}</h1>
          <nav aria-label="디렉토리 목록">
          <ul role="list">
-            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
+            <li><a class="dir-link" href="./.." title="상위 디렉토리로 이동"><span class="icon" aria-hidden="true">&#x21B0;</span> <span class="entry-name" aria-hidden="true">..</span> <span class="visually-hidden">상위 디렉토리로 이동</span></a></li>
 """ 
 
     val index_middle = fun():String{ 
@@ -460,7 +460,7 @@ fun process_dir(curr_dir: File, excludeSet: Set<String>? = null, dirFiles: Array
                   val ariaLabel = "${fileName} ${if (isLinkedDirectory) { "디렉토리" } else { "파일" }}".escapeHtml()
                   val typeLabel = if (isLinkedDirectory) { "디렉토리" } else { "파일" }
                   val icon = if (isLinkedDirectory) { "&#128193;" } else { "&#128196;" }
-                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span>${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
+                  l.append("""          <li><a class="dir-link" href="${encodedHref}" title="${ariaLabel}"><span class="icon" aria-hidden="true">${icon}</span> <span class="entry-name">${fileName.escapeHtml()}</span> <span class="visually-hidden">${typeLabel}</span></a></li>""")
                   l.append('\n')
                }
            }

src/test/kotlin/html4tree/GeneratedIndexReadabilityTest.kt

@@ -44,7 +44,7 @@ class GeneratedIndexReadabilityTest {
         )
 
         val generatedHtml = generatedHtml()
-        val parentIndex = generatedHtml.indexOf("<span aria-hidden=\"true\">..</span>")
+        val parentIndex = generatedHtml.indexOf("<span class=\"entry-name\" aria-hidden=\"true\">..</span>")
         val firstIndex = generatedHtml.indexOf("alpha.txt")
         val middleIndex = generatedHtml.indexOf("middle.txt")
         val lastIndex = generatedHtml.indexOf("zulu.txt")
@@ -133,11 +133,24 @@ class GeneratedIndexReadabilityTest {
     }
 
     @Test
-    fun hoverAndKeyboardFocusUnderlineOnlyLinkText() {
-        process_dir(temporaryDirectory, setOf("index.html"), emptyArray())
+    fun interactiveStatesUnderlineVisibleFilenameOnly() {
+        val linkedFile = File(temporaryDirectory, "visible-name.txt").apply { writeText("target") }
+        process_dir(temporaryDirectory, setOf("index.html"), arrayOf(linkedFile))
 
+        val html = generatedHtml()
         val style = emittedStyle()
-        val completeTargetRule = Regex("""a:hover, a:focus-visible \{([\s\S]*?)\}""")
+        val linkedRow = Regex("""<a class="dir-link"[^>]*>([\s\S]*?visible-name\.txt[\s\S]*?)</a>""")
+            .find(html)
+            ?.groupValues
+            ?.get(1)
+        assertNotNull(linkedRow)
+        assertTrue(linkedRow.contains("<span class=\"entry-name\">visible-name.txt</span>"))
+        assertTrue(linkedRow.contains("<span class=\"icon\" aria-hidden=\"true\">"))
+        assertTrue(linkedRow.contains("<span class=\"visually-hidden\">파일</span>"))
+        assertFalse(linkedRow.contains("class=\"icon entry-name\""))
+        assertFalse(linkedRow.contains("class=\"visually-hidden entry-name\""))
+
+        val completeTargetRule = Regex("""a:hover, a:focus-visible, a:active \{([\s\S]*?)\}""")
             .find(style)
             ?.groupValues
             ?.get(1)
@@ -147,12 +160,13 @@ class GeneratedIndexReadabilityTest {
         assertTrue(
             style.contains(
                 """
-                a:hover span:last-child, a:focus-visible span:last-child {
+                a:hover .entry-name, a:focus-visible .entry-name, a:active .entry-name {
                   text-decoration: underline;
                 }
                 """.trimIndent()
             )
         )
+        assertFalse(style.contains("span:last-child"))
         assertTrue(style.contains("@media (prefers-reduced-motion: reduce)"))
     }