list view day row, only one tabbable link

fullcalendar · Sep 30, 2021 · 08fa7a9 · 08fa7a9
1 parent c0e950c
commit 08fa7a9
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 24 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,6 @@
 
 FEATURE: week formatting arg accepts 'long'
 BREAKING: navLinkData no longer sent to navlink hooks. need to apply navLinkAttrs instead
-TODO: list-view event focusing
 
 v5.9.0 (2021-07-28)
 -------------------

diff --git a/packages/common/src/common/nav-link.ts b/packages/common/src/common/nav-link.ts
@@ -7,29 +7,40 @@ import { ViewContext } from '../ViewContext'
 const DAY_FORMAT = createFormatter({ year: 'numeric', month: 'long', day: 'numeric' })
 const WEEK_FORMAT = createFormatter({ week: 'long' })
 
-export function buildNavLinkAttrs(context: ViewContext, dateMarker: DateMarker, viewType = 'day') {
+export function buildNavLinkAttrs(
+  context: ViewContext,
+  dateMarker: DateMarker,
+  viewType = 'day',
+  isTabbable = true,
+) {
   const { dateEnv, options, calendarApi } = context
   let dateStr = dateEnv.format(dateMarker, viewType === 'week' ? WEEK_FORMAT : DAY_FORMAT)
 
   if (options.navLinks) {
     let zonedDate = dateEnv.toDate(dateMarker)
+
+    const handleInteraction = (ev: UIEvent) => {
+      let customAction =
+        viewType === 'day' ? options.navLinkDayClick :
+        viewType === 'week' ? options.navLinkWeekClick : null
+
+      if (typeof customAction === 'function') {
+        customAction.call(calendarApi, dateEnv.toDate(dateMarker), ev)
+      } else {
+        if (typeof customAction === 'string') {
+          viewType = customAction
+        }
+        calendarApi.zoomTo(dateMarker, viewType)
+      }
+    }
+
     return {
       title: formatWithOrdinals(options.navLinkHint, [dateStr, zonedDate], dateStr),
       'data-navlink': '', // for legacy selectors. TODO: use className?
-      ...createAriaClickAttrs((ev: UIEvent) => {
-        let customAction =
-          viewType === 'day' ? options.navLinkDayClick :
-          viewType === 'week' ? options.navLinkWeekClick : null
-
-        if (typeof customAction === 'function') {
-          customAction.call(calendarApi, dateEnv.toDate(dateMarker), ev)
-        } else {
-          if (typeof customAction === 'string') {
-            viewType = customAction
-          }
-          calendarApi.zoomTo(dateMarker, viewType)
-        }
-      })
+      ...(isTabbable
+        ? createAriaClickAttrs(handleInteraction)
+        : { onClick: handleInteraction }
+      )
     }
   }
 

diff --git a/packages/list/src/ListViewHeaderRow.tsx b/packages/list/src/ListViewHeaderRow.tsx
@@ -32,15 +32,14 @@ export class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowProps> {
     // will ever be falsy? also, BAD NAME "alt"
     let sideText = options.listDaySideFormat ? dateEnv.format(dayDate, options.listDaySideFormat) : ''
 
-    let navLinkAttrs = buildNavLinkAttrs(this.context, dayDate)
-
     let hookProps: HookProps = {
       date: dateEnv.toDate(dayDate),
       view: viewApi,
       textId,
       text,
       sideText,
-      navLinkAttrs,
+      navLinkAttrs: buildNavLinkAttrs(this.context, dayDate),
+      sideNavLinkAttrs: buildNavLinkAttrs(this.context, dayDate, 'day', false),
       ...dayMeta,
     }
 
@@ -77,17 +76,15 @@ export class ListViewHeaderRow extends BaseComponent<ListViewHeaderRowProps> {
 }
 
 function renderInnerContent(props: HookProps) {
-  let { navLinkAttrs } = props
-
   return (
     <Fragment>
       {props.text && (
-        <a id={props.textId} className="fc-list-day-text" {...navLinkAttrs}>
+        <a id={props.textId} className="fc-list-day-text" {...props.navLinkAttrs}>
           {props.text}
         </a>
       )}
-      {props.sideText && (
-        <a aria-hidden={true} className="fc-list-day-side-text" {...navLinkAttrs}>
+      {props.sideText && ( /* not keyboard tabbable */
+        <a aria-hidden={true} className="fc-list-day-side-text" {...props.sideNavLinkAttrs}>
           {props.sideText}
         </a>
       )}