useGridA11y — Integration Quick Reference

BIG DISCLAIMER

This package is experimental and NOT READY FOR PRODUCTION. Do not use this package in production environments. The API, types, and build output are unstable. Tests and documentation are incomplete. You may encounter breaking changes, missing features, or rough edges. Use only for local experimentation or as a reference.

Compatibility

The current version of useGridA11y composable was developed targeting Kendo UI for Vue version 6.4.1.

This library is not affiliated with or approved by Telerik.

Short description

@featherk/composables provides small Vue 3 composables intended to augment and improve accessibility and behavior for Kendo UI components (Telerik). The library is developed alongside a demo app that shows usage patterns and integration points.

Notes

• The composable expects a Grid ref (a Vue ref to the Grid component).
• For row-level navigation, disable the Grid's cell-level dynamic tabindex behavior (omit or set navigatable="false" on the Grid).
• The composable returns helpers for keyboard handling, focus management, and sort/filter interactions.

Prerequisites

• Vue 3 (script setup)
• @progress/kendo-vue-grid installed
• @featherk/composables installed

Install (if needed)

npm install @featherk/composables

1) Minimal import + setup

Place inside a <script setup lang="ts"> block. Provide a Grid ref and call the composable.

import { ref } from 'vue';
import { useGridA11y } from '@featherk/composables';

const gridRef = ref(null);

const { activeFilterButton, handleGridKeyDown, handleSortChange } = useGridA11y(gridRef);

2) Wire keyboard handler on the Grid

Template snippet showing essential bindings (keep other Grid props as required by your app):

<Grid
  ref="gridRef"
  :dataItems="dataResult.data"
  :dataItemKey="'id'"
  :rowRender="renderRow"
  @keydown="handleGridKeyDown"          <!-- keyboard navigation -->
  @sortchange="handleSortChange"        <!-- composable-aware sort handling -->
  navigatable="false"                   <!-- optional: prefer row-level nav -->
/>

3) Provide an accessible row renderer (aria-label)

Not part of @featherk/composable, but good practice

Kendo Grid rowRender allows you to add an aria-label so screen readers announce row contents.

const renderRow = (h: any, trElement: any, defaultSlots: any, props: any) => {
  const ariaLabel = `Name: ${props.dataItem.name}, Price: ${props.dataItem.price}`;
  // merge existing props and add aria-label
  const merged = { ...trElement.props, 'aria-label': ariaLabel };
  return h('tr', merged, defaultSlots);
};

4) Focus the active filter button after filter changes

The composable returns activeFilterButton (a ref) which you can focus after DOM updates.

import { nextTick } from 'vue';

function onFilterChange(event: any) {
  // update your filter state and data here

  nextTick(() => {
    if (activeFilterButton.value) {
      activeFilterButton.value.focus();
    }
  });
}

5) Custom sort handling with composable helper

If you need to show a loader or call an API, pass a custom callback into the composable's sort helper so the composable does its internal work and your app performs side effects.

const optionalCustomSort = (event: any) => {
  loader.value = true;
  // example async
  setTimeout(() => {
    loader.value = false;
    // apply sort state and reload data
  }, 200);
};

function onSortChange(event: any) {
  handleSortChange(event, optionalCustomSort);
}

6) Summary checklist

• Import and call useGridA11y(gridRef)
• Bind returned keyboard handler to Grid @keydown
• Bind returned sort handler to Grid @sortchange (and optionally pass a custom callback)
• Use returned activeFilterButton to manage focus after filter updates
• Provide a rowRender that adds a descriptive aria-label for each row
• Set navigatable="false" on the Grid to prefer row-level navigation