better aria labels for abbreviated dates, rowgroup role

fullcalendar · Sep 30, 2021 · ce16ebc · ce16ebc
1 parent 11a4d20
commit ce16ebc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/common/src/common/TableDowCell.tsx b/packages/common/src/common/TableDowCell.tsx
@@ -7,6 +7,7 @@ import { RenderHook } from './render-hook'
 import { Dictionary } from '../options'
 import { CLASS_NAME, renderInner } from './table-cell-util'
 import { DayHeaderContentArg } from '../render-hook-misc'
+import { createFormatter } from '../datelib/formatting'
 
 export interface TableDowCellProps {
   dow: number
@@ -18,6 +19,8 @@ export interface TableDowCellProps {
   extraClassNames?: string[]
 }
 
+const WEEKDAY_FORMAT = createFormatter({ weekday: 'long' })
+
 export class TableDowCell extends BaseComponent<TableDowCellProps> {
   render() {
     let { props } = this
@@ -63,6 +66,7 @@ export class TableDowCell extends BaseComponent<TableDowCellProps> {
           >
             <div className="fc-scrollgrid-sync-inner">
               <a
+                aria-label={dateEnv.format(date, WEEKDAY_FORMAT)}
                 className={[
                   'fc-col-header-cell-cushion',
                   props.isSticky ? 'fc-sticky' : '',

diff --git a/packages/common/src/common/nav-link.ts b/packages/common/src/common/nav-link.ts
@@ -9,9 +9,9 @@ const WEEK_FORMAT = createFormatter({ week: 'long' })
 
 export function buildNavLinkAttrs(context: ViewContext, date: DateMarker, type = 'day') {
   const { dateEnv, options } = context
+  let dateStr = dateEnv.format(date, type === 'week' ? WEEK_FORMAT : DAY_FORMAT)
 
   if (options.navLinks) {
-    let dateStr = dateEnv.format(date, type === 'week' ? WEEK_FORMAT : DAY_FORMAT)
     let zonedDate = dateEnv.toDate(date)
 
     return {
@@ -20,7 +20,10 @@ export function buildNavLinkAttrs(context: ViewContext, date: DateMarker, type =
       tabIndex: 0,
     }
   }
-  return {}
+
+  return {
+    'aria-label': dateStr,
+  }
 }
 
 function buildNavLinkData(date: DateMarker, type: string) {

diff --git a/packages/common/src/scrollgrid/SimpleScrollGrid.tsx b/packages/common/src/scrollgrid/SimpleScrollGrid.tsx
@@ -89,17 +89,19 @@ export class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProps, Simpl
     // if so, use a simpler dom structure, jam everything into a lone tbody.
     let isBuggy = !getCanVGrowWithinCell()
 
+    const roleAttrs = { role: 'rowgroup' }
+
     return createElement(
       'table',
       {
         role: 'table',
         className: classNames.join(' '),
         style: { height: props.height },
       },
-      Boolean(!isBuggy && headSectionNodes.length) && createElement('thead', {}, ...headSectionNodes),
-      Boolean(!isBuggy && bodySectionNodes.length) && createElement('tbody', {}, ...bodySectionNodes),
-      Boolean(!isBuggy && footSectionNodes.length) && createElement('tfoot', {}, ...footSectionNodes),
-      isBuggy && createElement('tbody', {}, ...headSectionNodes, ...bodySectionNodes, ...footSectionNodes),
+      Boolean(!isBuggy && headSectionNodes.length) && createElement('thead', roleAttrs, ...headSectionNodes),
+      Boolean(!isBuggy && bodySectionNodes.length) && createElement('tbody', roleAttrs, ...bodySectionNodes),
+      Boolean(!isBuggy && footSectionNodes.length) && createElement('tfoot', roleAttrs, ...footSectionNodes),
+      isBuggy && createElement('tbody', roleAttrs, ...headSectionNodes, ...bodySectionNodes, ...footSectionNodes),
     )
   }