@progress/wct-a11y-spec

{ "autocomplete": { "component": "autocomplete", "rules": [ { "selector": ".k-input-inner", "checks": [ { "selector": ".k-input-inner", "id": "k-autocomplete-role", "test": true, "usage": "Announces the presence of a autocomplete as inner element of the autocomplete used for filtering.", "value": "combobox", "attribute": "role" }, { "id": "k-autocomplete-label", "test": true, "multiple": true, "usage": "The input needs an accessible name to be assigned to it.", "attribute": [ "label for=", "aria-label", "aria-labelledby" ] }, { "id": "k-autocomplete-expanded", "test": true, "usage": "Announces the state of the visibility of the popup.", "attribute": "aria-expanded", "value": [ "true", "false" ] }, { "id": "k-autocomplete-controls", "test": true, "usage": "Points to the popup element. Signifies that the `combobox` element controls the `listbox`.", "value": ".k-animation-container id", "attribute": "aria-controls" }, { "id": "k-autocomplete-activedescendent", "test": true, "when": "open", "usage": "Points to the focused item in the popup. The focused item is changed via keyboard navigation. If the popup is not visible, the attribute should not point to any element or should be removed.", "value": ".k-list-item id", "attribute": "aria-activedescendent" }, { "id": "k-autocomplete-autocomplete-list", "test": true, "when": "filtering", "usage": "Attribute is rendered and value is set to list when **filtering** feature is enabled.", "value": "list", "attribute": "aria-autocomplete" }, { "id": "k-autocomplete-autocomplete-both", "test": true, "when": "filtering suggest", "usage": "Attribute is rendered and value is set to both when both **filtering** and **suggest** features are enabled.", "value": "both", "attribute": "aria-autocomplete" }, { "id": "k-autocomplete-autocomplete-inline", "test": true, "when": "suggest", "usage": "Attribute is rendered and value is set to only **suggest** feature is enabled.", "value": "inline", "attribute": "aria-autocomplete" }, { "id": "k-autocomplete-disabled", "test": true, "usage": "Attribute is rendered only when the autocomplete is disabled.", "when": "disabled", "multiple": true, "attribute": [ "disabled", "aria-disabled" ], "value": "true" }, { "id": "k-autocomplete-readonly", "test": true, "usage": "Attribute is rendered only when the autocomplete is readonly.", "when": "readonly", "multiple": true, "attribute": [ "readonly", "aria-readonly" ], "value": "true" }, { "id": "k-autocomplete-busy", "test": true, "when": "loading remote", "usage": "Attribute is rendered only when the autocomplete is loading data.", "value": "true", "attribute": "aria-busy" }, { "id": "k-autocomplete-focusable", "test": true, "usage": "The element must be focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-animation-container", "checks": [ { "selector": ".k-animation-container", "test": true, "id": "k-popuplist-role", "attribute": "role", "value": "region", "usage": "When the component container is appended to the `<body>` element of the document, it needs a landmark role to be assigned to it. Otherwise, it should be appended to an element with an appropriate landmark role." }, { "test": true, "id": "k-popuplist-label", "multiple": true, "attribute": [ "aria-label", "aria-labelledby" ], "usage": "Provides a label when the container has a `region` role assigned." } ] }, { "selector": ".k-list-ul", "checks": [ { "selector": ".k-list-ul", "test": true, "id": "k-popuplist-ul-role", "attribute": "role", "value": "listbox", "usage": "Identifies the ul element as a listbox." } ] }, { "selector": ".k-list-item", "checks": [ { "selector": ".k-list-item", "test": true, "id": "k-popuplist-item-role", "attribute": "role", "value": "option", "usage": "Identifies the li element as a listbox option." } ] }, { "selector": ".k-list-item.k-selected", "checks": [ { "selector": ".k-list-item.k-selected", "test": true, "id": "k-popuplist-item-selected", "attribute": "aria-selected", "value": "true", "usage": "Indicates the selected state of the item." } ] } ] }, "button": { "component": "button", "rules": [ { "selector": ".k-button", "checks": [ { "selector": ".k-button", "id": "k-button-role", "test": true, "multiple": true, "usage": "If for any reason the used element is not a `<button>` it should have an explicitly set `role` to `button`.", "attribute": [ "role=button", "nodeName=button" ] }, { "id": "k-button-label", "test": true, "when": "no text", "attribute": "aria-label", "usage": " Announces the purpose of the button if no text is provided to an icon button." } ] } ] }, "buttongroup": { "component": "buttongroup", "rules": [ { "selector": ".k-button-group", "checks": [ { "selector": ".k-button-group", "id": "k-buttongroup-role", "test": true, "usage": "Sets the proper role for the group.", "value": "group", "attribute": "role" }, { "id": "k-buttongroup-disabled", "test": true, "when": "disabled", "usage": "Attribute is rendered only when the entire button group is disabled.", "value": "true", "attribute": "aria-disabled" } ] }, { "selector": ".k-button", "checks": [ { "selector": ".k-button", "id": "k-buttongroup-button-pressed", "test": true, "usage": "Specifies the current state of the Button. Only the selected button in the Group would have this attribute set to `true`.", "attribute": "aria-pressed" } ] } ] }, "calendar": { "component": "calendar", "rules": [ { "selector": ".k-calendar-table", "checks": [ { "selector": ".k-calendar-table", "id": "k-calendar-role", "test": true, "usage": "Specifies the role of the Calendar dates table.", "value": "grid", "attribute": "role" }, { "id": "k-calendar-label", "test": true, "usage": "Pointing to the current view label (e.g. `March 2022` or `2020-2029`).", "attribute": "aria-labelledby", "value": ".k-nav-fast id" }, { "id": "k-calendar-activedescendant", "test": true, "when": "focused", "usage": "Pointing to the currently active (focused) date/month/year/decade in the table.", "attribute": "aria-activedescendant", "value": ".k-calendar-td.k-selected id" }, { "id": "k-calendar-tabindex", "test": true, "usage": "Makes the grid focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-calendar-table>thead>tr>th", "checks": [ { "selector": ".k-calendar-table>thead>tr>th", "id": "k-calendar-th-scope", "test": true, "usage": "Specifies that the header is applied to a column.", "value": "col", "attribute": "scope" }, { "id": "k-calendar-th-label", "test": true, "usage": "Specifies the full name of the day of the week (the column header).", "attribute": "aria-label" } ] }, { "selector": ".k-calendar-table>tbody>tr>td", "checks": [ { "selector": ".k-calendar-table>tbody>tr>td", "id": "k-calendar-td-selected", "test": true, "when": "selected", "usage": "Specifies whether the date is selected or not.", "attribute": "aria-selected", "value": "true" }, { "id": "k-calendar-td-disabled", "test": true, "when": "disabled", "usage": "When a date is not available for selection, its gridcell element must have the attribute set to `true`.", "attribute": "aria-disabled", "value": "true" }, { "id": "k-calendar-td-label", "test": true, "when": "yearView", "usage": "Applicable in year view - for better context contains the full name of the month. May also be applied in month view to specify the full text for a date.", "attribute": "aria-label" } ] }, { "selector": ".k-nav-next,.k-nav-prev", "checks": [ { "selector": ".k-nav-next,.k-nav-prev", "id": "k-calendar-nav-btn-role", "test": true, "usage": "Previous / Next buttons must either be `<button>` elements or have the appropriate role.", "attribute": [ "role=button", "nodeName=button" ] }, { "id": "k-calendar-nav-btn-label", "test": true, "usage": "Previous and Next buttons must have descriptive text set as they contain only an icon (no text).", "multiple": true, "attribute": [ "aria-label", "title" ] }, { "id": "k-calendar-nav-btn-disabled", "test": true, "when": "disabled", "usage": "When navigation is not allowed outside the current month/year/decade the Previous and Next buttons should have this attribute set to `true`.", "attribute": "aria-disabled", "value": "true" }, { "id": "k-calendar-nav-btn-tabindex", "test": true, "usage": "The buttons must be focusable.", "value": "-1", "attribute": "tabindex" } ] }, { "selector": ".k-nav-fast", "checks": [ { "selector": ".k-nav-fast", "id": "k-calendar-nav-fast-role", "test": true, "usage": "Go to parent view button must either be a `<button>` element or must have the appropriate role.", "attribute": [ "role=button", "nodeName=button" ] }, { "id": "k-calendar-nav-fast-label", "test": true, "usage": "Go to parent view button must have descriptive text set explaining its purpose.", "attribute": [ "aria-label", "title" ] }, { "id": "k-calendar-nav-fast-disabled", "test": true, "when": "disabled", "usage": "When navigation is not allowed outside the current view the button should have this attribute set to `true`.", "attribute": "aria-disabled" }, { "id": "k-calendar-nav-fast-tabindex", "test": true, "usage": "The buttons must be focusable.", "value": "-1", "attribute": "tabindex" } ] }, { "selector": ".k-nav-today", "checks": [ { "selector": ".k-nav-today", "id": "k-calendar-nav-today-role", "test": true, "usage": "Today link must either be `<a>` element or must have the appropriate role.", "attribute": [ "role=link", "nodeName=a" ] }, { "id": "k-calendar-nav-today-tabindex", "test": true, "usage": "The link must be focusable.", "value": "-1", "attribute": "tabindex" } ] } ] }, "checkbox": { "component": "checkbox", "rules": [ { "selector": ".k-checkbox", "checks": [ { "selector": ".k-checkbox", "id": "k-checkbox-role", "test": true, "multiple": true, "usage": "Announces the checkbox role of the element.", "attribute": [ "role=checkbox", "type=checkbox" ] }, { "id": "k-checkbox-label", "test": true, "usage": "The input needs an accessible name to be assigned to it.", "attribute": [ "label for=", "aria-label", "aria-labelledby" ] }, { "id": "k-checkbox-checked", "test": true, "when": "checked", "multiple": true, "attribute": [ "aria-checked=true", "checked" ], "usage": "Announces the checked state of the checkbox." }, { "id": "k-checkbox-disabled", "test": true, "when": "disabled", "multiple": true, "attribute": [ "disabled", "aria-disabled=true" ], "usage": "Attribute is rendered only when the switch is disabled." } ] } ] }, "colorgradient": { "component": "colorgradient", "rules": [ { "selector": ".k-colorgradient", "checks": [ { "selector": ".k-colorgradient", "id": "k-colorgradient-role", "test": true, "usage": "The focusable wrapper of the component should be considered a `textbox`. That signifies it has a value that could be submitted.", "value": "textbox", "attribute": "role" }, { "id": "k-colorgradient-label", "test": true, "usage": "The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component.", "attribute": [ "aria-label", "aria-labelledby" ] }, { "id": "k-colorgradient-disabled", "test": true, "when": "disabled", "usage": "Attribute is rendered only when the ColorPalette is disabled.", "value": "true", "attribute": "aria-disabled" }, { "id": "k-colorgradient-tabindex", "test": true, "usage": "The element must be focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-hsv-draghandle", "checks": [ { "selector": ".k-hsv-draghandle", "id": "k-colorgradient-hsv-orientation", "test": true, "usage": "The implicit orientation for the `role=\"slider\"` must be removed.", "value": "undefined", "attribute": "aria-orientation" }, { "id": "k-colorgradient-hsv-label", "test": true, "usage": "Must provide information about the purpose of the `slider` (for example: \"Color well with two-dimensional slider for selecting saturation and lightness\") and the currently selected color (for example: \"X: 142, Y: 93\").", "attribute": "aria-label" }, { "id": "k-colorgradient-hsv-valuetext", "test": true, "usage": "Must specify the values on both X and Y axis.", "attribute": "aria-valuetext" } ] }, { "selector": ".k-numerictextbox>.k-input-inner", "checks": [ { "selector": ".k-numerictextbox>.k-input-inner", "id": "k-colorgradient-numeric-label", "test": true, "usage": "Must provide information about the numeric input purpose - the name of the chanel it is aimed at (`red chanel`, `green chanel`, `blue chanel`, or `alpha chanel`).", "attribute": "aria-label" } ] } ] }, "colorpalette": { "component": "colorpalette", "rules": [ { "selector": ".k-colorpalette", "checks": [ { "selector": ".k-colorpalette", "id": "k-colorpalette-role", "test": true, "usage": "The focusable wrapper of the component should announce its role as a `grid`.", "value": "grid", "attribute": "role" }, { "id": "k-colorpalette-label", "test": true, "usage": "The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component.", "multiple": true, "attribute": [ "aria-label", "aria-labelledby" ] }, { "id": "k-colorpalette-activedescendent", "test": true, "usage": "Points to the focused cell in the table. The focused cell is changed via keyboard navigation.", "value": ".k-colorpalette-tile id", "attribute": "aria-activedescendent" }, { "id": "k-colorpalette-disabled", "test": true, "when": "disabled", "usage": "Attribute is rendered only when the ColorPalette is disabled.", "value": "true", "attribute": "aria-disabled" }, { "id": "k-colorpalette-tabindex", "test": true, "usage": "The element must be focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-colorpalette-table", "checks": [ { "selector": ".k-colorpalette-table", "id": "k-colorpalette-table-role", "test": true, "usage": "Negates the default role of the element, as it is wrapped within a `role=\"grid\"` element.", "value": [ "none", "presentation" ], "attribute": "role" } ] }, { "selector": ".k-colorpalette-table>tbody>tr", "checks": [ { "selector": ".k-colorpalette-table>tbody>tr", "id": "k-colorpalette-tr-role", "test": true, "usage": "Required as the semantic role of its parent `<table>` has been removed.", "value": "row", "attribute": "role" } ] }, { "selector": ".k-colorpalette-tile", "checks": [ { "selector": ".k-colorpalette-tile", "id": "k-colorpalette-td-role", "test": true, "usage": "Required as the semantic role of its parent `<table>` has been removed.", "value": "gridcell", "attribute": "role" }, { "id": "k-colorpalette-td-label", "test": true, "usage": "The text representation of the color value for the current cell.", "multiple": true, "attribute": [ "aria-label", "title" ] }, { "id": "k-colorpalette-td-selected", "test": true, "when": "selected", "usage": "Present on the currently selected cell in the component.", "value": "true", "attribute": "aria-selected" } ] } ] }, "colorpicker": { "component": "colorpicker", "rules": [ { "selector": ".k-colorpicker", "checks": [ { "selector": ".k-colorpicker", "id": "k-colorpicker-role", "test": true, "usage": "The focusable element of the component should have role `combobox` (an input with popup).", "value": "combobox", "attribute": "role" }, { "id": "k-colorpicker-label", "test": true, "multiple": true, "usage": "The component needs an accessible name to be assigned to it. Must also include the currently selected value in the component.", "attribute": [ "aria-label", "aria-labelledby" ] }, { "id": "k-colorpicker-haspopup", "test": true, "usage": "Indicates the component has a Dialog Popup.", "value": "dialog", "attribute": "aria-haspopup" }, { "id": "k-colorpicker-expanded", "test": true, "usage": "Announces the state of the visibility of the popup.", "attribute": "aria-expanded" }, { "id": "k-colorpicker-controls", "test": true, "usage": "Points to the popup element. Signifies that the `combobox` element controls the `dialog`.", "value": ".k-colorpicker-popup id", "attribute": "aria-controls" }, { "id": "k-colorpicker-disabled", "test": true, "when": "disabled", "usage": "Attribute is rendered only when the picker is disabled.", "value": "true", "attribute": "aria-disabled" }, { "id": "k-colorpicker-tabindex", "test": true, "usage": "The element must be focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-colorgradient", "checks": [ { "selector": ".k-colorgradient", "id": "k-colorpicker-colorgradient-role", "test": true, "usage": "The ColorGradient element must have its role removed.", "attribute": "role", "value": [ "none", "undefined" ] }, { "id": "k-colorpicker-colorgradient-label", "test": true, "usage": "The ColorGradient element must have its `aria-label` attribute removed.", "attribute": "aria-label", "value": "undefined" }, { "id": "k-colorpicker-colorgradient-tabindex", "test": true, "usage": "The ColorGradient must be removed from the page tab sequence.", "attribute": "tabindex", "value": [ "-1", "undefined" ] } ] } ] }, "combobox": { "component": "combobox", "rules": [ { "selector": ".k-input-inner", "checks": [ { "selector": ".k-input-inner", "id": "k-combobox-role", "test": true, "usage": "Announces the presence of a combobox as inner element of the combobox used for filtering.", "value": "combobox", "attribute": "role" }, { "id": "k-combobox-label", "test": true, "usage": "The input needs an accessible name to be assigned to it.", "attribute": [ "label for=", "aria-label", "aria-labelledby" ] }, { "id": "k-combobox-expanded", "test": true, "usage": "Announces the state of the visibility of the popup.", "attribute": "aria-expanded", "value": [ "true", "false" ] }, { "id": "k-combobox-controls", "test": true, "usage": "Points to the popup element. Signifies that the `combobox` element controls the `listbox`.", "value": ".k-animation-container id", "attribute": "aria-controls" }, { "id": "k-combobox-activedescendent", "test": true, "when": "open", "usage": "Points to the focused item in the popup. The focused item is changed via keyboard navigation. If the popup is not visible, the attribute should not point to any element or should be removed.", "value": ".k-list-item.k-selected id", "attribute": "aria-activedescendent" }, { "id": "k-combobox-autocomplete-list", "test": true, "when": "filtering", "usage": "Attribute is rendered and value is set to list when **filtering** feature is enabled.", "value": "list", "attribute": "aria-autocomplete" }, { "id": "k-autocomplete-autocomplete-both", "test": true, "when": "filtering suggest", "usage": "Attribute is rendered and value is set to both when both **filtering** and **suggest** features are enabled.", "value": "both", "attribute": "aria-autocomplete" }, { "id": "k-autocomplete-autocomplete-inline", "test": true, "when": "suggest", "usage": "Attribute is rendered and value is set to only **suggest** feature is enabled.", "value": "inline", "attribute": "aria-autocomplete" }, { "id": "k-combobox-disabled", "test": true, "usage": "Attribute is rendered only when the combobox is disabled.", "when": "disabled", "multiple": true, "attribute": [ "disabled", "aria-disabled" ], "value": "true" }, { "id": "k-combobox-readonly", "test": true, "usage": "Attribute is rendered only when the combobox is readonly.", "when": "readonly", "multiple": true, "attribute": [ "readonly", "aria-readonly" ], "value": "true" }, { "id": "k-combobox-busy", "test": true, "when": "busy", "usage": "Attribute is rendered only when the combobox is loading data.", "value": "true", "attribute": "aria-busy" }, { "id": "k-combobox-tabindex", "test": true, "usage": "The element must be focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-input-button", "checks": [ { "selector": ".k-input-button", "id": "k-combobox-arrow-role", "test": true, "usage": "The element should either be a `<button>` element or should have `role=\"button\"` assigned.", "attribute": [ "role=button", "nodeName=button" ] }, { "id": "k-combobox-arrow-label", "test": true, "usage": "Button element must have discernible text.", "attribute": "aria-label" }, { "id": "k-combobox-arrow-tabindex", "test": true, "usage": "Button element should not be focusable.", "value": "-1", "attribute": "tabindex" } ] }, { "selector": ".k-animation-container", "checks": [ { "selector": ".k-animation-container", "test": true, "id": "k-popuplist-role", "attribute": "role", "value": "region", "usage": "When the component container is appended to the `<body>` element of the document, it needs a landmark role to be assigned to it. Otherwise, it should be appended to an element with an appropriate landmark role." }, { "test": true, "id": "k-popuplist-label", "multiple": true, "attribute": [ "aria-label", "aria-labelledby" ], "usage": "Provides a label when the container has a `region` role assigned." } ] }, { "selector": ".k-list-ul", "checks": [ { "selector": ".k-list-ul", "test": true, "id": "k-popuplist-ul-role", "attribute": "role", "value": "listbox", "usage": "Identifies the ul element as a listbox." } ] }, { "selector": ".k-list-item", "checks": [ { "selector": ".k-list-item", "test": true, "id": "k-popuplist-item-role", "attribute": "role", "value": "option", "usage": "Identifies the li element as a listbox option." } ] }, { "selector": ".k-list-item.k-selected", "checks": [ { "selector": ".k-list-item.k-selected", "test": true, "id": "k-popuplist-item-selected", "attribute": "aria-selected", "value": "true", "usage": "Indicates the selected state of the item." } ] } ] }, "dateinput": { "component": "dateinput", "rules": [ { "selector": ".k-input-inner", "checks": [ { "selector": ".k-input-inner", "id": "k-dateinput-role", "test": true, "usage": "The element should either be an `<input type=\"text\">` element or should have `role=\"textbox\"` assigned.", "multiple": true, "attribute": [ "role=textbox", "type=text" ] }, { "id": "k-dateinput-label", "test": true, "usage": "The input needs an accessible name to be assigned to it.", "multiple": true, "attribute": [ "label for=", "aria-label", "aria-labelledby" ] }, { "id": "k-dateinput-disabled", "test": true, "usage": "Attribute is rendered only when the DateInput is disabled.", "when": "disabled", "multiple": true, "attribute": [ "disabled", "aria-disabled" ] }, { "id": "k-dateinput-readonly", "test": true, "usage": "Attribute is rendered only when the DateInput is readonly.", "when": "readonly", "multiple": true, "attribute": [ "readonly", "aria-readonly" ] }, { "id": "k-dateinput-tabindex", "test": true, "usage": "The element should be focusable.", "value": "0", "attribute": "tabindex" } ] } ] }, "datepicker": { "component": "datepicker", "rules": [ { "selector": ".k-input-inner", "checks": [ { "selector": ".k-input-inner", "id": "k-datepicker-role", "test": true, "usage": "The input element should follow the `combobox` specification.", "value": "combobox", "attribute": "role" }, { "id": "k-datepicker-label", "test": true, "usage": "The input needs an accessible name to be assigned to it.", "multiple": true, "attribute": [ "label for=", "aria-label", "aria-labelledby" ] }, { "id": "k-datepicker-haspopup", "test": true, "usage": "Indicates the component has a Calendar Popup that implements `role=\"grid\"`.", "value": "grid", "attribute": "aria-haspopup" }, { "id": "k-datepicker-expanded", "test": true, "usage": "Announces whether the Popup is visible or not.", "attribute": "aria-expanded", "value": [ "true", "false" ] }, { "id": "k-datepicker-controls", "test": true, "usage": "Points to the popup element. Signifies that the `combobox` element controls the Calendar `grid`.", "value": ".k-animation-container id", "attribute": "aria-controls" }, { "id": "k-datepicker-activedescendent", "test": true, "usage": "Points to the focused item (date/month/year) in the Calendar Popup. Should only be present when the Popup is open.", "value": ".k-calendar-td id", "attribute": "aria-activedescendent" }, { "id": "k-datepicker-disabled", "test": true, "usage": "Attribute is rendered only when the DatePicker is disabled.", "when": "disabled", "multiple": true, "attribute": [ "disabled", "aria-disabled" ] }, { "id": "k-datepicker-readonly", "test": true, "usage": "Attribute is rendered only when the DatePicker is readonly.", "when": "readonly", "multiple": true, "attribute": [ "readonly", "aria-readonly" ] }, { "id": "k-datepicker-tabindex", "test": true, "usage": "The element must be focusable.", "value": "0", "attribute": "tabindex" } ] }, { "selector": ".k-input-button", "checks": [ { "selector": ".k-input-button", "id": "k-datepicker-arrow-role", "test": true, "usage": "The element should either be a `<button>` element or should have `role=\"button\"` assigned.", "attribute": [ "role=button", "nodeName=button" ] }, { "id": "k-datepicker-arrow-label", "test": true, "usage": "The button needs an accessible name to be assigned to it.", "attribute": "aria-label" }, { "id": "k-datepicker-arrow-tabindex", "test": true, "usage": "Button element should not be focusable.", "value": "-1", "attribute": "tabindex" } ] } ] }, "daterangepicker": { "component": "daterangepicker", "rules": [ { "selector": ".k-input-inner", "checks": [ { "selector": ".k-input-inner", "id": "k-daterangepicker-role", "test": true, "usage": "The input element should follow the `combobox` specification.",