[add] Grid. Added the Conformance report (VPAT) (DHX-5290) - #141
Open
Sorokin-Oleg wants to merge 4 commits into
Open
Sorokin-Oleg wants to merge 4 commits into
Sorokin-Oleg wants to merge 4 commits into
Conversation
Sorokin-Oleg
marked this pull request as ready for review
September 11, 2026 11:25
mafanya23
reviewed
Oct 1, 2026
|
|
||
| ### Colorpicker | ||
|
|
||
| The color palette is exposed as a list of options. You can find the following **roles** and **attributes** in the DOM: |
Contributor
There was a problem hiding this comment.
Возможно, стоить добавить определение swatch, поскольку в гайдах Colorpicker его нет. Вариант:
The color palette is exposed as a list of options, one per swatch (a single color cell of the palette).
mafanya23
reviewed
Oct 1, 2026
|
|
||
| ## Localization of screen-reader strings | ||
|
|
||
| The accessible names and announcements that the widgets generate are stored in the locale of each widget as keys with the `aria_` prefix, for example `aria_toolbar` in the `toolbar` locale, `aria_dialog` in the `window` locale, `aria_palette` and the color names in the `colorpicker` locale, and `aria_confirm` in the `message` locale. Translate them with the `dhx.i18n.setLocale()` method before the widget is initialized: |
Contributor
There was a problem hiding this comment.
Примеры можно сделать отдельным предложением с подпунктами для удобства восприятия:
For example:
aria_toolbarin thetoolbarlocalearia_dialogin thewindowlocalearia_paletteand the color names in thecolorpickerlocalearia_confirmin themessagelocale
mafanya23
reviewed
Oct 1, 2026
| ::: | ||
|
|
||
| ## Assistive technology | ||
| ## Low vision and colour |
Contributor
There was a problem hiding this comment.
В этом гайде используется вариант colour, необходимо использовать color
mafanya23
reviewed
Oct 1, 2026
|
|
||
| ### Translatable screen-reader names | ||
|
|
||
| The strings the screen reader hears live in the Grid locale, so they translate with the rest of the UI. They fall into two groups: |
Contributor
There was a problem hiding this comment.
The strings that a screen reader hears come from the Grid locale, so they are translated with the rest of the UI
mafanya23
reviewed
Oct 1, 2026
| ## Keyboard navigation | ||
|
|
||
| Keyboard navigation is on by default (`keyNavigation: true`); set `keyNavigation: false` to opt out. Focus enters the Grid through hidden focus sentinels placed before the header and after the footer, which direct it into the correct zone. Within each zone a single cell is the tab stop, and the arrow keys move between cells from there. | ||
| Keyboard navigation is on by default (`keyNavigation: true`); set `keyNavigation: false` to opt out. It works in every configuration: without a selection module the keys move the active cell, and with one they move the selection as well; see [Keyboard navigation with and without selection](#selectionmodules). Focus enters the Grid through hidden focus sentinels placed before the header and after the footer, which direct it into the correct zone. Within each zone a single cell is the tab stop, and the arrow keys move between cells from there. <kbd>Tab</kbd> at the first or the last cell leaves the Grid in every configuration, including one with frozen columns (`leftSplit` / `rightSplit`). |
Contributor
There was a problem hiding this comment.
Keyboard navigation is on by default (keyNavigation: true); set keyNavigation: false to turn it off. It works with or without a selection module: without one, the navigation keys move only the active cell; with one, the selection moves together with the active cell. See Keyboard navigation with and without selection.
Focus enters the Grid..
mafanya23
reviewed
Oct 1, 2026
|
|
||
| ## Notes | ||
|
|
||
| - This report evaluates DHTMLX Grid in its **recommended accessibility configuration**: keyboard navigation enabled (`keyNavigation: true`, the default), WAI-ARIA output active (enabled by default), and an AA-conformant colour scheme selected through `dhx.setTheme("contrast-light")` / `dhx.setTheme("contrast-dark")` or the equivalent `data-dhx-theme` attribute. Where a conformance level depends on this configuration, the Remarks say so. See the [Accessibility](grid/accessibility.md) guide for setup instructions. |
Contributor
There was a problem hiding this comment.
В этом доке тоже используется colour вместо color
mafanya23
reviewed
Oct 1, 2026
| @@ -1,26 +1,41 @@ | |||
| --- | |||
Contributor
There was a problem hiding this comment.
em-dashes в этом гайде исправлены в коммите 1a045d8 (при мерже ветки 9.4)
mafanya23
reviewed
Oct 2, 2026
| | **1.4.3** Contrast (Minimum) | Supports | The `contrast-light` and `contrast-dark` themes meet AA out of the box: body text is about 8.5:1 and 13.2:1 against the cell background, secondary and additional text about 7.3:1 and 10.2:1, and both themes raise the base font size to 16px and are colour-blind friendly. The built-in dark theme also meets AA for body text. Meeting the criterion requires selecting one of these themes - one supported method meets it. | | ||
| | **1.4.4** Resize Text | Supports | Text can be resized to 200% without loss of content or functionality; the header, body and footer scale with it and the grid does not break. Typography and row geometry are token-driven (`--dhx-font-size-normal`, `--dhx-line-height-normal`, `--dhx-step-size`, `rowHeight`), and the contrast themes ship a 16px base. | | ||
| | **1.4.5** Images of Text | Supports | All text is rendered as real text. Icons are font glyphs; the product uses no raster images. | | ||
| | **1.4.10** Reflow | Supports | Content scrolls and remains operable at 400% zoom. As a data grid, two-dimensional layout is intrinsic to the content, for which the criterion permits two-dimensional scrolling. | |
Contributor
There was a problem hiding this comment.
Вариант:
Content scrolls and remains operable at 400% zoom. A two-dimensional layout is intrinsic to tabular data, and the criterion exempts such content from reflow, so the grid scrolls both horizontally and vertically.
mafanya23
reviewed
Oct 2, 2026
| sidebar_label: Accessibility | ||
| title: JavaScript Grid - Accessibility | ||
| description: You can learn about accessibility and keyboard navigation in DHTMLX Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. | ||
| --- |
Contributor
There was a problem hiding this comment.
добавлю более уникальное описание
mafanya23
reviewed
Oct 2, 2026
| sidebar_label: Conformance report (VPAT) | ||
| title: JavaScript Grid - Accessibility Conformance Report | ||
| description: You can explore the accessibility conformance report (VPAT 2.5) for DHTMLX Grid in the documentation of the DHTMLX JavaScript UI library. Browse developer guides and API reference, try out code examples and live demos, and download a free 30-day evaluation version of DHTMLX Suite. | ||
| --- |
Contributor
There was a problem hiding this comment.
здесь тоже можно добавить более уникальное описание? Или лучше оставить таким?
mafanya23
reviewed
Oct 2, 2026
| | **3.2.3** Consistent Navigation | Not Applicable | Applies across a set of web pages; host-application concern. | | ||
| | **3.2.4** Consistent Identification | Supports | Components with the same function are identified consistently across the header, body and footer zones - the same roles, the same naming pattern and the same key bindings. | | ||
| | **3.3.3** Error Suggestion | Supports | Where a correction is known, it is applied: numeric input outside the column's `min`/`max` bounds is corrected to the nearest valid value, so a valid value is always produced. Suggestion text for application-level validation is provided by the host application, through `beforeEditEnd`. | | ||
| | **3.3.4** Error Prevention (Legal, Financial, Data) | Supports | Actions that change or remove data are reversible and guarded: the History module provides undo and redo for edits, range clearing and clipboard operations, and every such action can additionally be gated by the host through the cancelable `before*` events - among them `beforeEditEnd`, `beforeKeyDown`, `beforeSort`, `beforeResizeStart`, `beforeRowDrag`/`beforeRowDrop` and `beforeColumnDrag`/`beforeColumnDrop`. | |
Contributor
There was a problem hiding this comment.
Вариант:
Actions that change or remove data are reversible and guarded. The History module provides undo and redo for edits, range clearing and clipboard operations. Every such action can additionally be gated by the host through the cancelable before* events, among them beforeEditEnd, beforeKeyDown, beforeSort, beforeResizeStart, beforeRowDrag/beforeRowDrop and beforeColumnDrag/beforeColumnDrop.
mafanya23
reviewed
Oct 2, 2026
| | **3.3.3** Error Suggestion | Supports | Where a correction is known, it is applied: numeric input outside the column's `min`/`max` bounds is corrected to the nearest valid value, so a valid value is always produced. Suggestion text for application-level validation is provided by the host application, through `beforeEditEnd`. | | ||
| | **3.3.4** Error Prevention (Legal, Financial, Data) | Supports | Actions that change or remove data are reversible and guarded: the History module provides undo and redo for edits, range clearing and clipboard operations, and every such action can additionally be gated by the host through the cancelable `before*` events - among them `beforeEditEnd`, `beforeKeyDown`, `beforeSort`, `beforeResizeStart`, `beforeRowDrag`/`beforeRowDrop` and `beforeColumnDrag`/`beforeColumnDrop`. | | ||
| | **3.3.8** Accessible Authentication (Minimum) (2.2 only) | Not Applicable | The product performs no authentication. | | ||
| | **4.1.3** Status Messages | Supports | A visually-hidden polite live region (`role="status"`, `aria-live="polite"`, `aria-atomic="true"`) announces dynamic changes without moving focus - sort direction changes, filter results with the matching row count, completed loads, and numeric-editor range corrections. The same region is available to the host application through the public [`announce()`](grid/api/grid_announce_method.md) method, and every built-in message is localizable through the `aria_*` locale keys. State that persists is additionally exposed on the elements themselves: sort direction through `aria-sort`, selection through `aria-selected`, dataset size through `aria-rowcount`/`aria-colcount`, and branch state through `aria-expanded`. | |
Contributor
There was a problem hiding this comment.
Вариант для первого предложения:
Grid uses a visually hidden live region (role="status", aria-live="polite", aria-atomic="true") to announce dynamic changes without moving focus. The announcements cover changes of the sort direction, filter results with the matching row count, completed loads, and numeric-editor range corrections.
mafanya23
reviewed
Oct 2, 2026
|
|
||
| | Criteria | Conformance level | Remarks and explanations | | ||
| |---|---|---| | ||
| | 602.2 Accessibility and Compatibility Features | Supports | The documentation describes the product's accessibility features: the [Accessibility](grid/accessibility.md) guide covers the WAI-ARIA model, the keyboard zones and shortcuts, keyboard navigation with and without the selection modules, the high-contrast themes and the focus model, together with the related configuration, the [`announce()`](grid/api/grid_announce_method.md) API and the localizable `aria_*` strings. | |
Contributor
There was a problem hiding this comment.
Можно добавить ссылку для "localizable aria_* strings" на Translatable screen-reader names в гайде Accessibility (grid/accessibility.md#translatable-screen-reader-names)
mafanya23
reviewed
Oct 2, 2026
|
|
||
| | Criteria | Conformance level | Remarks and explanations | | ||
| |---|---|---| | ||
| | 12.1.1 Accessibility and compatibility features | Supports | The [Accessibility](grid/accessibility.md) guide documents the product's accessibility features - the WAI-ARIA model, the keyboard zones and shortcuts, keyboard navigation with and without the selection modules, the high-contrast themes, the focus model, the [`announce()`](grid/api/grid_announce_method.md) API and the localizable `aria_*` strings. | |
Contributor
There was a problem hiding this comment.
То же предложение: добавить ссылку для "localizable aria_* strings" на Translatable screen-reader names в гайде Accessibility (grid/accessibility.md#translatable-screen-reader-names)
mafanya23
reviewed
Oct 2, 2026
| Keyboard navigation works without any selection module: the navigation keys move the active cell, but do not select it. Set the [selection](grid/api/grid_selection_config.md) property to move the selection with the keyboard, and set the [editable](grid/api/grid_editable_config.md) property to edit cells from the keyboard. Read the details in the [Key Navigation](grid/configuration.md#keyboard-navigation) article and in the [Grid accessibility](grid/accessibility.md) guide. | ||
|
|
||
| @changelog: added in v6.3; the keyboard navigation model was extended in v9.3.5 | ||
| @changelog: added in v6.3; the keyboard navigation model was extended in v9.3.5; navigation and editing without a selection module were added in v9.3.12 |
Contributor
There was a problem hiding this comment.
@changelog:
- navigation and editing without a selection module were added in v9.3.12
- the keyboard navigation model was extended in v9.3.5
- added in v6.3
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
No description provided.