2.6. 내비게이션바에서 루트 아이템 클릭 시 포커스가 유지되도록 변경
2.6.1. 변경 전
기존에는 내비게이션바에서 메뉴 아이템을 선택한 후, 메뉴가 닫히면 포커스가 해제되거나 위치가 유지되지 않는 경우가 있었습니다.
접근성 측면에서 포커스가 명확히 유지되지 않아, 키보드 또는 마우스 조작 시 사용자의 조작 흐름이 끊기는 문제가 발생할 수 있었습니다.
2.6.2. 변경 후
1.0.4523 (2023년 6월 릴리즈) 버전에서 expandTrigger="click" 설정 시, 선택된 아이템에 포커스가 유지되도록 동작이 변경되었습니다.
선택된 아이템에는 .cl-hover 클래스가 자동으로 설정되며, 이는 접근성 강화를 위한 개선 사항입니다.
- 키보드 조작 기준
- 하위 메뉴 아이템에서 엔터 키 → 메뉴가 닫히면 루트 아이템에 포커스 이동
- 메뉴가 닫히지 않으면 선택된 아이템에 포커스 유지
- 루트 아이템에서 엔터 키 → 선택 및 포커스 유지
- 마우스 조작 기준
- 하위 메뉴 아이템 클릭 → 메뉴가 닫히면 루트 아이템에 포커스 이동
- 메뉴가 닫히지 않으면 클릭한 아이템에 포커스 유지
- 루트 아이템 클릭 시 → 포커스 유지
2.6.3. 조치 방안
기존 동작 방식으로 되돌리고자 할 경우, 다음 방법 중 하나를 선택하여 적용할 수 있습니다.
- 스타일로 아이템 포커스 호버 스타일 개선 방법
선택된 아이템이 .cl-hover.cl-selected 클래스를 동시에 가질 때 시각적 포커스 스타일을 조정할 수 있습니다..cl-navigationbar.mega-menu { .cl-navigationbar-bar { .cl-navigationbar-item { &:not(.cl-disabled).cl-hover.cl-selected{ background-color: @selection-background; color: @selection-foreground; } } } } - 아이템 클릭 이벤트에서 내비게이션 바 초점 해제하는 방법
포커스를 수동으로 제어하고 싶은 경우, selection-change 또는 item-click 이벤트 내에서 다음과 같이 제어할 수 있습니다:// 포커스 해제 navigationbar.blur(); // 포커스가 다시 필요한 경우 navigationbar.focus();