@featherk/composables

This pacakge provides Vue 3 composables intended to augment and improve Kendo UI for Vue (Telerik) component behavior.

This package is not affiliated with or approved by Telerik.

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. Use of Kendo UI for Vue Grid requires a paid license from Telerik.

See Kendo UI for Vue Grid Documentation

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.

Styling and the .fk-grid class

• The composable will add the CSS class .fk-grid to the Grid's root element (see setupGridStyling() in the source). The composable itself does NOT include any CSS (no inline styles or stylesheet).
• The .fk-grid class is a hook used by the FeatherK stylesheet to apply visual styles. To see visual indicators (for example, the active/filtered status), you must include the appropriate FeatherK stylesheet for Kendo in your application.
• Ensure you are using the matching FeatherK styling release for correct visuals — e.g. featherk-q3-2024-v#.css (replace # with the patch version you are using).

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"            // optional: aria-label for screen reader
  @keydown="handleGridKeyDown"      // keyboard navigation
  @sortchange="handleSortChange"    // composable-aware sort handling
  navigatable="false"               // turn off cell to cell navigation
/>

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