안녕하세요,
마지막 업데이트에서 uniform focus 스타일에 새로운 mixin이 추가되었는데, 이 mixin은 입력 필드, 선택 요소 등에 outline을 추가합니다. 접근성 측면에서는 매우 좋은 변화이지만, 저희는 입력 필드에 border-radius: 4px을 사용하고 있습니다. mixin을 오버라이드하거나 core mixins.scss에 border-radius: 0을 추가하여 포커스 시 border-radius가 4px에서 0으로 변경되도록 하는 것이 가능한가요?
왼쪽은 현재 모습이고, 오른쪽은 border-radius: 0; 적용 후 모습입니다.
감사합니다!
@mixin default-focus() {
border-color: var(--tertiary);
+ border-radius: 0;
outline: 1px solid var(--tertiary);
outline-offset: 0;
}
pmusaraj
(Penar Musaraj)
2월 4, 2021, 3:26오후
4
버튼에 둥근 모서리를 적용한 내부 테마를 사용 중입니다. 질문자님의 문제와 유사한 사례는 발견되지 않았습니다. 어떤 버튼인지 확인하기 위해 좀 더 큰 스크린샷을 제공해 주실 수 있을까요? 공개 테마를 사용 중인지 알려주시면 이 문제는 해결할 수 있을 것입니다.
pmusaraj
(Penar Musaraj)
2월 4, 2021, 3:58오후
6
아, 그렇군요. 코어에서는 이미 모든 입력 요소의 border가 0으로 설정되어 있으므로, 이 문제를 테마에서 처리하는 것이 가장 좋은 방법이라고 생각합니다:
따라서 테마에서는 현재 값을 설정하고 있는 동일한 위치에서 포커스된 입력 요소의 border-radius를 오버라이드하면 됩니다.
포커스 상태에서도 둥근 모서리를 유지하고 싶다면 다음과 같이 처리할 수도 있습니다:
input {
border-radius: 4px;
&:focus {
outline: none;
box-shadow: 0px 0px 0px 1px var(--tertiary);
}
}
(outline 속성은 둥근 모서리를 지원하지 않으므로, 위 예시에서는 이를 대체하기 위해 단색 그림자를 사용하는 방식으로 전환했습니다.)
정말 감사합니다! 그렇게 하겠습니다. 한 가지 더 질문이 있는데요… 아웃라인을 비활성화하는 것이 접근성 측면에서 나쁜 관행은 아닌가요?
pmusaraj
(Penar Musaraj)
2월 4, 2021, 4:03오후
8
포커스된 요소를 다른 방식으로 스타일링할 것이므로 괜찮다고 _생각_합니다.