2.6. 내비게이션바에서 루트 아이템 클릭 시 포커스가 유지되도록 변경

2.6.1. 변경 전

기존에는 내비게이션바에서 메뉴 아이템을 선택한 후, 메뉴가 닫히면 포커스가 해제되거나 위치가 유지되지 않는 경우가 있었습니다.
접근성 측면에서 포커스가 명확히 유지되지 않아, 키보드 또는 마우스 조작 시 사용자의 조작 흐름이 끊기는 문제가 발생할 수 있었습니다.

2.6.2. 변경 후

1.0.4523 (2023년 6월 릴리즈) 버전에서 expandTrigger="click" 설정 시, 선택된 아이템에 포커스가 유지되도록 동작이 변경되었습니다.
선택된 아이템에는 .cl-hover 클래스가 자동으로 설정되며, 이는 접근성 강화를 위한 개선 사항입니다.

• 키보드 조작 기준
  • 하위 메뉴 아이템에서 엔터 키 → 메뉴가 닫히면 루트 아이템에 포커스 이동
  • 메뉴가 닫히지 않으면 선택된 아이템에 포커스 유지
  • 루트 아이템에서 엔터 키 → 선택 및 포커스 유지
• 마우스 조작 기준
  • 하위 메뉴 아이템 클릭 → 메뉴가 닫히면 루트 아이템에 포커스 이동
  • 메뉴가 닫히지 않으면 클릭한 아이템에 포커스 유지
  • 루트 아이템 클릭 시 → 포커스 유지

2.6.3. 조치 방안

기존 동작 방식으로 되돌리고자 할 경우, 다음 방법 중 하나를 선택하여 적용할 수 있습니다.

1. 스타일로 아이템 포커스 호버 스타일 개선 방법
   선택된 아이템이 .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;
               }
           }
       }
   }

2. 아이템 클릭 이벤트에서 내비게이션 바 초점 해제하는 방법
   포커스를 수동으로 제어하고 싶은 경우, selection-change 또는 item-click 이벤트 내에서 다음과 같이 제어할 수 있습니다:

   // 포커스 해제
   navigationbar.blur();
   
   // 포커스가 다시 필요한 경우
   navigationbar.focus();