[fullcalendar] 이벤트 등록 렌더링 훅 함수를 활용한 접근성 조치 | eventDidMount, 디바운스

배경설명

• fullcalendar 라이브러리 (v.5.11.3) 활용한 달력 UI 접근성 조치 필요

조치 필요 대상

1. 날짜 숫자 영역 (.fc-daygrid-day-number) a 태그 속성 초기화

• href="javascripe:void(0);"
• role="button"
• aria-disabled=true

2. 이벤트 등록된 날짜 (.fc-daygrid-day) 하위 숫자 영역 a 태그 (.fc-daygrid-day-number) aria-disabled 속성 제거
3. fullcelander 기본 더보기 팝업 클릭 이벤트 바인딩
   • 모든 이벤트 렌더링 완료 후 호출 필수

분석

• fullcalendar 제공 렌더링 훅 (Rendering hook) 함수 활용
  • eventDidMount 이벤트 렌더링 직후
    • 달력 UI 등록된 이벤트 개수에 따라 n회 호출
    • 이벤트 미등록 시 호출 안 됨

설계

조치 필요 대상	eventDidMount 함수 내 수행 시점	참고
1. 날짜 숫자 영역 속성 초기화 ex. aria-disabled=true	eventDidMount 호출 최초 1회만	Boolean 변수 활용
2. 이벤트 등록된 날짜 숫자 영역 aria-disabled 속성 제거	이벤트 등록될 때마다	eventDidMount 호출될 때마다
3. Fullcelander 기본 더보기 팝업 클릭 이벤트 바인딩	eventDidMount 호출 마지막 1회만	디바운스 활용

개발

• Vuejs, fullcalendar 활용

// data
debounceTimer: null	// 디바운스전용타이머
isEventRenderEnd: true,	// 이벤트렌더링종료여부

// methods
eventDidMount (eventInfo) => {
	if (this.isEventRenderEnd) {
      	// 이벤트 등록 시작 시점에 한번만 호출
     	this.isEventRenderEnd = false;
      
      	// 1. 날짜 숫자 영역 속성 초기화
      	initFcDayCell();
    }
  
  	// 2. 이벤트 등록된 날짜 하위 숫자 영역 a 태그 aria-disabled 속성 제거
  	$(eventInfo.el).closest('td.fc-daygrid-day')
  		.find('.fc-daygrid-day-number')
  		.removeAttr('aria-disabled');
  
 	// 모든 이벤트 등록 완료 후 가장 마지막 이벤트만 처리 (디바운스)
  	if (this.debounceTimer) clearTimeout(this.debounceTimer)
  
  	this.debounceTimer = setTimeout(() => {
      	// 마지막 이벤트 등록 완료 직후 바로 호출
		this.debounceTimer = null;
      	this.isEventRenderEnd = true;
      
      	// 3. fullcelander 기본 더보기 팝업 클릭 이벤트 바인딩
      	this.handleFcPopupClick();
    }, 0);
},
// fullcalendar day cell 초기화
initFcDayCell () => {
	const allDayCellEls = document.querySelectorAll('#td.fc-daygrid-day');
  
  	allDayCellEls.foeEach((dayEl) => {
    	// 이벤트 없는 day cell 'role' 속성 제거
      	dayEl.removeAttribute('role')
      
      	// 1. 날짜 숫자 영역 속성 초기화
      	const dayNumEl = dayEl.querySelector('.fc-daygrid-day-number');
        dayNumEl.setAttribute('href', 'javascript:void(0);');
      	dayNumEl.setAttribute('role', 'button');
      	dayNumEl.setAttribute('aria-disabled', true);
    });
}