From fb6fffae3506b16a11d6c695934e96a3d02006f5 Mon Sep 17 00:00:00 2001
From: seonghobae <8172694+seonghobae@users.noreply.github.com>
Date: Mon, 22 Jun 2026 13:54:56 +0000
Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=8E=A8=20Palette:=20[UX=20improvement?=
 =?UTF-8?q?]=20=EC=96=B8=EC=96=B4=20=EC=A0=84=ED=99=98=20=EB=B2=84?=
 =?UTF-8?q?=ED=8A=BC=20=EC=A0=91=EA=B7=BC=EC=84=B1=20=EB=B0=8F=20=ED=98=B8?=
 =?UTF-8?q?=EB=B2=84=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B0=9C=EC=84=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

💡 What: 언어 전환 버튼에 `aria-label` 추가 및 버튼 요소들에 `hover` 시 `opacity` 변화 트랜지션 추가
🎯 Why: 스크린 리더 사용자가 축약어(KO, EN) 대신 명확한 언어명을 인지하게 하고, 일반 사용자가 인터랙티브 요소에 대한 시각적 피드백을 받을 수 있도록 개선
📸 Before/After: 버튼 호버 시 opacity가 0.8로 부드럽게 변경됨
♿ Accessibility: `aria-label`을 통한 스크린 리더 음성 피드백 최적화
---
 commit_message.txt |  6 ++++++
 index.html         |  4 ++--
 styles.css         | 10 ++++++++++
 3 files changed, 18 insertions(+), 2 deletions(-)
 create mode 100644 commit_message.txt

diff --git a/commit_message.txt b/commit_message.txt
new file mode 100644
index 0000000..3f220da
--- /dev/null
+++ b/commit_message.txt
@@ -0,0 +1,6 @@
+🎨 Palette: [UX improvement] 언어 전환 버튼 접근성 및 호버 스타일 개선
+
+💡 What: 언어 전환 버튼에 `aria-label` 추가 및 버튼 요소들에 `hover` 시 `opacity` 변화 트랜지션 추가
+🎯 Why: 스크린 리더 사용자가 축약어(KO, EN) 대신 명확한 언어명을 인지하게 하고, 일반 사용자가 인터랙티브 요소에 대한 시각적 피드백을 받을 수 있도록 개선
+📸 Before/After: 버튼 호버 시 opacity가 0.8로 부드럽게 변경됨
+♿ Accessibility: `aria-label`을 통한 스크린 리더 음성 피드백 최적화
diff --git a/index.html b/index.html
index dbb0157..2c465b2 100644
--- a/index.html
+++ b/index.html
@@ -43,8 +43,8 @@
         <a href="https://github.com/ContextualWisdomLab">GitHub</a>
       </nav>
       <div class="language-switch" role="group" aria-label="Language">
-        <button type="button" data-lang="ko" aria-pressed="true">KO</button>
-        <button type="button" data-lang="en" aria-pressed="false">EN</button>
+        <button type="button" data-lang="ko" aria-pressed="true" aria-label="한국어">KO</button>
+        <button type="button" data-lang="en" aria-pressed="false" aria-label="English">EN</button>
       </div>
     </header>
 
diff --git a/styles.css b/styles.css
index dfc509c..6a583f0 100644
--- a/styles.css
+++ b/styles.css
@@ -105,6 +105,11 @@ a {
   font-size: 13px;
   font-weight: 850;
   cursor: pointer;
+  transition: opacity 0.2s;
+}
+
+.language-switch button:hover {
+  opacity: 0.8;
 }
 
 .language-switch button[aria-pressed="true"] {
@@ -210,6 +215,11 @@ h1 {
   text-decoration: none;
   font-size: 15px;
   font-weight: 800;
+  transition: opacity 0.2s;
+}
+
+.button:hover {
+  opacity: 0.8;
 }
 
 .button.primary {

From 2217393983cae2b06ec972cf09047a97ba1c2990 Mon Sep 17 00:00:00 2001
From: Seongho Bae <me@seonghobae.me>
Date: Mon, 29 Jun 2026 01:49:07 +0900
Subject: [PATCH 2/2] Improve language switch accessibility state

---
 index.html | 4 ++--
 styles.css | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.html b/index.html
index 2c465b2..d2f1e2f 100644
--- a/index.html
+++ b/index.html
@@ -43,8 +43,8 @@
         <a href="https://github.com/ContextualWisdomLab">GitHub</a>
       </nav>
       <div class="language-switch" role="group" aria-label="Language">
-        <button type="button" data-lang="ko" aria-pressed="true" aria-label="한국어">KO</button>
-        <button type="button" data-lang="en" aria-pressed="false" aria-label="English">EN</button>
+        <button type="button" data-lang="ko" lang="ko" aria-pressed="true" aria-label="한국어">KO</button>
+        <button type="button" data-lang="en" lang="en" aria-pressed="false" aria-label="English">EN</button>
       </div>
     </header>
 
diff --git a/styles.css b/styles.css
index 6a583f0..93dede1 100644
--- a/styles.css
+++ b/styles.css
@@ -108,7 +108,7 @@ a {
   transition: opacity 0.2s;
 }
 
-.language-switch button:hover {
+.language-switch button:not([aria-pressed="true"]):hover {
   opacity: 0.8;
 }