현재 /about 페이지에 있습니다. 사이드바에서 ‘더 보기’ 메뉴를 더 열어 보세요.
보시다시피, 현재 About 페이지에 있음에도 불구하고 ‘Users’ 항목이 선택된 것처럼 보입니다. 현재 있는 페이지가 선택된 항목인 것이 더 자연스럽지 않나요? 현재 있는 페이지가 사이드바의 메뉴 외부에 있는 리스트 아이템으로 이동하기 때문에 이런 일이 발생합니다.
따라서 맨 위 항목이 선택되지 않은 것처럼 보이도록 할 수 있을까요?
4개의 좋아요
정확히 말하면, 이 스크린샷을 찍을 당시 제 손가락은 ‘Users’ 항목을 누르고 있지 않았습니다.
2개의 좋아요
더 보기 메뉴에서 첫 번째 항목이 왜 강조 표시되는지 궁금합니다. 해당 항목을 검사하면 강조 표시가 사라집니다.
현재 활성화된 항목은 메뉴에서 꺼내어 상위 메뉴로 이동하는 패턴을 선호합니다. 따라서 실제로 활성화된 항목이 없으므로 더 보기 메뉴에는 활성화 강조 표시가 없어야 하는 것 같습니다. 다만, 이 패턴은 일관성이 없습니다. 예를 들어 Meta의 리더보드 페이지에서는 이 규칙이 적용되지 않습니다.
4개의 좋아요
메뉴가 열릴 때 키보드 내비게이션을 위해 첫 번째 항목에 포커스가 맞춰지기 때문입니다.
focus를 focus-visible로 변경할 수 있으며, 이렇게 하면 필요한 경우에만(예: 키보드 내비게이션 사용 시) 하이라이트가 표시되어야 합니다.
6개의 좋아요
빠른 수정 감사합니다!
3개의 좋아요