@featherk/composables

This package 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, initialization (new initA11y()), 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, onMounted, watch } from 'vue';
import { useGridA11y } from '@featherk/composables';

const gridRef = ref(null);
const dataResult = ref({ data: [] }); // example data container

const {
  activeFilterButton,
  handleGridKeyDown,
  handleSortChange,
  initA11y // NEW: must be called after Grid + data are present in DOM
} = useGridA11y(gridRef);

2) Initialize accessibility after Grid mounts and data is available

Call initA11y() once the Grid element is in the DOM and the initial (non-empty) data set is ready. If data loads async, watch it. initA11y() performs initial attribute setup, internal bookkeeping, and prepares focus targets.

onMounted(() => {
  // Adjust source as needed for your data state
  watch(
    () => dataResult.value.data,
    (rows) => {
      if (rows && rows.length && gridRef.value) {
        initA11y();        // safe to call again; will no-op after first successful init
      }
    },
    { immediate: true }
  );
});

If data can change from empty to non-empty multiple times, the composable guards against redundant full initialization.

3) 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
/>

4) 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}`;
  const merged = { ...trElement.props, 'aria-label': ariaLabel };
  return h('tr', merged, defaultSlots);
};

5) Focus the active filter button after filter changes

import { nextTick } from 'vue';

function onFilterChange(event: any) {
  // update filter state + reload data
  nextTick(() => {
    if (activeFilterButton.value) {
      activeFilterButton.value.focus();
    }
  });
}

6) Custom sort handling with composable helper

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

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

7) Summary checklist

• Import and call useGridA11y(gridRef)
• Wait for Grid mount + data, then call initA11y()
• Bind returned keyboard handler to Grid @keydown
• Bind returned sort handler to Grid @sortchange (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