WCAG

Module Extensions

AdditionalData (Extended from @revolist/revogrid)

interface AdditionalData {
  /**
   * WCAG plugin configuration.
   * @deprecated Use `grid.wcag` instead.
   */
  wcag?: WCAGConfig;
}

---

HTMLRevoGridElement (Extended from global)

interface HTMLRevoGridElement {
  /**
   * WCAG plugin configuration.
   */
  wcag?: WCAGConfig;
}

Plugin API

WCAGPlugin

WCAG Plugin is responsible for enhancing the accessibility features of the RevoGrid component. It ensures that the grid is fully compliant with Web Content Accessibility Guidelines (WCAG) 2.1. This plugin should be the last plugin you add, as it modifies the grid’s default behavior.

The WCAG Plugin performs the following tasks:

• Sets the ‘dir’ attribute to ‘ltr’ for left-to-right text direction.
• Sets the ‘role’ attribute to ‘treegrid’ for treelike hierarchical structure.
• Sets the ‘aria-keyshortcuts’ attribute to ‘Enter’ and ‘Esc’ for keyboard shortcuts.
• Adds event listeners for keyboard navigation and editing.
• Creates an optional aria-live region for saved edit and validation rejection announcements.

By default, the plugin adds ARIA roles and properties to the grid elements, providing semantic information for assistive technologies. These roles include ‘grid’, ‘row’, and ‘gridcell’. The plugin also sets ARIA attributes such as ‘aria-rowindex’, ‘aria-colindex’, and ‘aria-selected’.

The WCAG Plugin ensures that the grid is fully functional and usable for users with various disabilities, including visual impairments, deaf-blindness, and cognitive disabilities.

Note: The WCAG Plugin should be added as the last plugin in the list of plugins, as it modifies the grid’s default behavior and may conflict with other plugins if added earlier.

Dependencies

• Ordering after other-grid-plugins: Register this plugin last because it modifies grid accessibility props after other plugins.

class WCAGPlugin {}

import { WCAGPlugin, type WCAGConfig } from '@revolist/revogrid-pro';

const wcag: WCAGConfig = {
  announcements: {
    live: 'polite',
    labels: {
      edit: (context) =>
        'prop' in context
          ? `Saved ${context.columnName} on row ${context.rowNumber}: ${context.value}`
          : `Saved ${context.cellCount} cells`,
      error: (context) =>
        'prop' in context
          ? `${context.columnName} on row ${context.rowNumber} was not updated`
          : `${context.cellCount} cells were not updated`,
    },
  },
};

const grid = document.createElement('revo-grid');
grid.plugins = [WCAGPlugin];
grid.wcag = wcag;

Configuration

grid.wcag is the preferred configuration API. additionalData.wcag is still supported for framework integrations that pass plugin options through a shared additionalData object.

grid.wcag = {
  announcements: {
    enabled: true,
    edit: true,
    error: true,
    live: 'polite',
    atomic: true,
    liveRegionClassName: 'rv-wcag-live-region',
  },
};

Set announcements: false to disable the live region.

---

getDefaultWCAGAnnouncementMessage

export function getDefaultWCAGAnnouncementMessage(
  context: WCAGAnnouncementContext,
): string;

---

normalizeWCAGConfig

export function normalizeWCAGConfig(config?: WCAGConfig): ResolvedWCAGConfig;

---

WCAGAnnouncementKind

export type WCAGAnnouncementKind = 'edit' | 'error';

---

WCAGSingleCellAnnouncementContext

interface WCAGSingleCellAnnouncementContext {
  kind: WCAGAnnouncementKind;
  rowIndex: number;
  rowNumber: number;
  rowType: DimensionRows;
  prop: ColumnProp;
  columnName: string;
  value: DataFormat;
  detail: BeforeSaveDataDetails | EventManagerEvent;
}

---

WCAGMultiCellAnnouncementContext

interface WCAGMultiCellAnnouncementContext {
  kind: WCAGAnnouncementKind;
  rowType: DimensionRows;
  cellCount: number;
  detail: BeforeRangeSaveDataDetails | EventManagerEvent;
}

---

WCAGAnnouncementContext

export type WCAGAnnouncementContext =
  | WCAGSingleCellAnnouncementContext
  | WCAGMultiCellAnnouncementContext;

---

WCAGAnnouncementLabels

interface WCAGAnnouncementLabels {
  edit?: (context: WCAGAnnouncementContext) => string;
  error?: (context: WCAGAnnouncementContext) => string;
}

---

WCAGAnnouncementsConfig

interface WCAGAnnouncementsConfig {
  enabled?: boolean;
  edit?: boolean;
  error?: boolean;
  live?: 'off' | 'polite' | 'assertive';
  atomic?: boolean;
  liveRegionClassName?: string;
  labels?: WCAGAnnouncementLabels;
}

---

WCAGConfig

interface WCAGConfig {
  announcements?: boolean | WCAGAnnouncementsConfig;
}

---

ResolvedWCAGAnnouncementsConfig

interface ResolvedWCAGAnnouncementsConfig {
  enabled: boolean;
  edit: boolean;
  error: boolean;
  live: 'off' | 'polite' | 'assertive';
  atomic: boolean;
  liveRegionClassName: string;
  labels: WCAGAnnouncementLabels;
}

---

ResolvedWCAGConfig

interface ResolvedWCAGConfig {
  announcements: ResolvedWCAGAnnouncementsConfig;
}