Mixin 기본 포커스 관련 질문

안녕하세요,

마지막 업데이트에서 uniform focus 스타일에 새로운 mixin이 추가되었는데, 이 mixin은 입력 필드, 선택 요소 등에 outline을 추가합니다. 접근성 측면에서는 매우 좋은 변화이지만, 저희는 입력 필드에 border-radius: 4px을 사용하고 있습니다. mixin을 오버라이드하거나 core mixins.scss에 border-radius: 0을 추가하여 포커스 시 border-radius가 4px에서 0으로 변경되도록 하는 것이 가능한가요?

왼쪽은 현재 모습이고, 오른쪽은 border-radius: 0; 적용 후 모습입니다. :arrow_down:

감사합니다! :slight_smile:

@mixin default-focus() {
  border-color: var(--tertiary);
+ border-radius: 0;
  outline: 1px solid var(--tertiary);
  outline-offset: 0;
}

버튼에 둥근 모서리를 적용한 내부 테마를 사용 중입니다. 질문자님의 문제와 유사한 사례는 발견되지 않았습니다. 어떤 버튼인지 확인하기 위해 좀 더 큰 스크린샷을 제공해 주실 수 있을까요? 공개 테마를 사용 중인지 알려주시면 이 문제는 해결할 수 있을 것입니다.

아, 그렇군요. 코어에서는 이미 모든 입력 요소의 border가 0으로 설정되어 있으므로, 이 문제를 테마에서 처리하는 것이 가장 좋은 방법이라고 생각합니다:

따라서 테마에서는 현재 값을 설정하고 있는 동일한 위치에서 포커스된 입력 요소의 border-radius를 오버라이드하면 됩니다.

포커스 상태에서도 둥근 모서리를 유지하고 싶다면 다음과 같이 처리할 수도 있습니다:

input {
  border-radius: 4px;
  &:focus {
    outline: none;
    box-shadow: 0px 0px 0px 1px var(--tertiary);
  }
}

(outline 속성은 둥근 모서리를 지원하지 않으므로, 위 예시에서는 이를 대체하기 위해 단색 그림자를 사용하는 방식으로 전환했습니다.)

정말 감사합니다! :slight_smile: 그렇게 하겠습니다. 한 가지 더 질문이 있는데요… 아웃라인을 비활성화하는 것이 접근성 측면에서 나쁜 관행은 아닌가요?

포커스된 요소를 다른 방식으로 스타일링할 것이므로 괜찮다고 _생각_합니다.