@ihabdevteam/core 0.226.0 → 0.227.0

package/CHANGELOG.md

@@ -7,6 +7,33 @@ All notable changes to this project will be documented in this file.
 > 적은 글이라, 지금 이름으로 고쳐 놓으면 그 시절에 그 이름으로 받은 사람이
 > 제 이야기를 못 찾는다.
 
+## 0.227.0
+
+### 글자 칸 가운데에 서던 **세로줄**을 걷는다 (말귀 요청 ㊶)
+
+`styles.css` 의 전역 `:focus-visible` 이 `<input class="text-field__input">` 에도 걸려 **칸
+안쪽에 사각형이 하나 더** 그려졌다. 그 왼쪽 변이 `leftIcon` 바로 뒤에 서서 세로줄로 보였고
+(그림 오른끝과 입력 왼끝이 붙어 있어 더 도드라졌다), 사용자가 "가운데에 뭐 이상한 줄
+생긴다" 고 짚었다 — 글자 커서가 아니다.
+
+**`.text-field__input` 에는 `outline: none` 이 이미 있었는데 지고 있었다.** 스코핑을 거치면
+전역 규칙이 `.ihabdevteam-core-scope :focus-visible`(0-2-0)이 되어 `.text-field__input`
+(0-1-0)보다 세다. `:focus-visible` 을 붙여 0-3-0 으로 올려야 이긴다.
+
+**글자 칸은 마우스로 눌러도 `:focus-visible` 에 걸린다** — 명세가 그렇게 정해 두었다(단추는
+키보드일 때만 걸린다). 그래서 이 줄은 **누를 때마다** 보였다.
+
+접근성은 안 깎인다. `.text-field__wrap:focus-within` 이 테두리 색(`--color-main`)과 3px 고리로
+이미 초점을 말하고 있고, 지우는 것은 두 겹 중 **안쪽 하나**다. 브라우저 실측(Tab 으로 진짜
+초점을 옮겨서): 입력 `outline-style: none`, 틀 `border #499cdf` · `box-shadow 0 0 0 3px`.
+
+**강제 색 모드(`forced-colors: active`)에서는 되살린다.** 거기서는 `box-shadow` 가 버려져
+틀의 고리가 통째로 사라지므로, 안 되살리면 초점이 아무 데서도 안 보인다. 칸 **안쪽**에
+붙여 그린다(`outline-offset: -2px`) — 밖으로 내면 틀 테두리와 겹쳐 두 줄이 된다.
+
+> 이 고침은 **모든 `TextField`** 에 간다. `leftIcon` 이 없는 칸에서도 사각형은 그려지고 있었고,
+> 변이 칸 테두리와 겹쳐 잘 안 보였을 뿐이다.
+
 ## 0.226.0
 
 ### 카드의 표 번호가 **곁의 글과 같은 글꼴**이 된다 — 고정폭을 걷는다