@progress/wct-a11y-spec
Version:
Contains accessibility and keyboard navigation specification of Telerik and Kendo web components.
1,189 lines (1,188 loc) • 417 kB
JSON
{
"actionsheet": {
"component": "actionsheet",
"rules": [
{
"selector": ".k-actionsheet",
"checks": [
{
"selector": ".k-actionsheet",
"id": "k-actionsheet-role",
"test": true,
"usage": "Announces the dialog role of the component.",
"value": "dialog",
"attribute": "role"
},
{
"id": "k-actionsheet-label",
"test": true,
"usage": "Associates the title of the action sheet.",
"value": ".k-actionsheet-title id",
"attribute": "aria-labelledby"
},
{
"id": "k-actionsheet-hidden",
"test": true,
"usage": "Announces the hidden state of the ActionSheet container.",
"value": [
"true",
"false"
],
"attribute": "aria-hidden"
},
{
"id": "k-actionsheet-modal",
"test": true,
"usage": "Announces that the action sheet is modal.",
"value": "true",
"attribute": "aria-modal"
}
]
},
{
"selector": ".k-actionsheet .k-actionsheet-title",
"checks": [
{
"selector": ".k-actionsheet .k-actionsheet-title",
"id": "k-actionsheet-header-id",
"test": true,
"usage": "Used to associate the title with the action sheet wrapper element.",
"attribute": "id"
}
]
},
{
"selector": ".k-list-ul",
"checks": [
{
"selector": ".k-list-ul",
"id": "k-actionsheet-items-wrapper-role",
"test": true,
"usage": "Sets the role attribute of the action sheet items wrapper to group.",
"value": "group",
"attribute": "role"
}
]
},
{
"selector": ".k-actionsheet-item",
"checks": [
{
"selector": ".k-actionsheet-item",
"id": "k-actionsheet-item-tabindex",
"test": true,
"usage": "Makes items focusable and includes them in the natural tab sequence.",
"value": "0",
"attribute": "tabindex"
},
{
"id": "k-actionsheet-item-role",
"test": true,
"usage": "Sets action sheet items role to button.",
"value": "button",
"attribute": "role"
}
]
},
{
"selector": ".k-actionsheet-item.k-disabled",
"checks": [
{
"selector": ".k-actionsheet-item.k-disabled",
"id": "k-actionsheet-action-disabled",
"test": true,
"usage": "Announces action items as disabled as necessary.",
"value": "true",
"attribute": "aria-disabled"
}
]
}
]
},
"aiprompt": {
"component": "aiprompt",
"rules": [
{
"selector": ".k-prompt-expander .k-button",
"checks": [
{
"selector": ".k-prompt-expander .k-button",
"id": "k-prompt-expander-controls",
"test": true,
"usage": "Points to the controlled element based on the given `id`.",
"value": ".k-prompt-expander-content id",
"attribute": "aria-controls"
}
]
},
{
"selector": ".k-prompt-expander .k-prompt-expander-content",
"checks": [
{
"selector": ".k-prompt-expander .k-prompt-expander-content",
"id": "k-prompt-expander-content-list",
"test": true,
"usage": "Indicates that the suggestion container element is a list.",
"value": "list",
"attribute": "role"
}
]
},
{
"selector": ".k-prompt-expander .k-prompt-suggestion",
"checks": [
{
"selector": ".k-prompt-expander .k-prompt-suggestion",
"id": "k-prompt-suggestion-option",
"test": true,
"usage": "Indicates that the suggestion element is a listitem.",
"value": "listitem",
"attribute": "role"
},
{
"id": "k-prompt-suggestion-tabindex",
"test": true,
"usage": "The element should be focusable.",
"value": [
"0",
"-1"
],
"attribute": "tabindex"
}
]
}
]
},
"autocomplete": {
"component": "autocomplete",
"rules": [
{
"selector": ".k-input-inner",
"checks": [
{
"selector": ".k-input-inner",
"id": "k-autocomplete-role",
"test": true,
"usage": "Announces the presence of an AutoComplete as the inner element of the AutoComplete that is used for filtering.",
"value": "combobox",
"attribute": "role"
},
{
"id": "k-autocomplete-label",
"test": true,
"multiple": true,
"usage": "The input needs an accessible name that will be assigned to it.",
"attribute": [
"label for",
"aria-label",
"aria-labelledby"
]
},
{
"id": "k-autocomplete-expanded",
"test": true,
"usage": "Announces the state of the popup visibility.",
"attribute": "aria-expanded",
"value": [
"true",
"false"
]
},
{
"id": "k-autocomplete-controls",
"test": true,
"usage": "Points to the `listbox` element. Signifies that the `combobox` element controls the `listbox` one.",
"value": ".k-list-ul 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 with keyboard navigation. If the popup is not visible, the attribute must not point to any element or must be removed.",
"value": ".k-list-item.k-focus id",
"attribute": "aria-activedescendant"
},
{
"id": "k-autocomplete-autocomplete-list",
"test": true,
"when": "filtering",
"usage": "The attribute is rendered and the value is set to `list` when the filtering feature is enabled.",
"value": "list",
"attribute": "aria-autocomplete"
},
{
"id": "k-autocomplete-autocomplete-both",
"test": true,
"when": "filtering suggest",
"usage": "The attribute is rendered and the value is set to `both` when both the filtering and suggest features are enabled.",
"value": "both",
"attribute": "aria-autocomplete"
},
{
"id": "k-autocomplete-autocomplete-inline",
"test": true,
"when": "suggest",
"usage": "The attribute is rendered and the value is set to `only` when the suggest feature is enabled.",
"value": "inline",
"attribute": "aria-autocomplete"
},
{
"id": "k-autocomplete-readonly",
"test": true,
"usage": "The attribute is rendered only when the AutoComplete is read-only.",
"when": "readonly",
"multiple": true,
"attribute": [
"readonly",
"aria-readonly"
],
"value": "true"
},
{
"id": "k-autocomplete-busy",
"test": true,
"when": "loading remote",
"usage": "The 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-invalid .k-input-inner,.ng-invalid .k-input-inner",
"checks": [
{
"selector": ".k-invalid .k-input-inner,.ng-invalid .k-input-inner",
"test": true,
"id": "k-autocomplete-invalid",
"usage": "The attribute is rendered only when the AutoComplete is in a form and announces the valid state of the component.",
"value": "true",
"attribute": "aria-invalid"
}
]
},
{
"selector": ".k-disabled .k-input-inner",
"checks": [
{
"selector": ".k-disabled .k-input-inner",
"id": "k-autocomplete-disabled",
"test": true,
"usage": "The attribute is rendered only when the AutoComplete is disabled.",
"multiple": true,
"attribute": [
"disabled=disabled",
"aria-disabled=true"
]
}
]
},
{
"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 requires you to assing a `landmark` role to it. Otherwise, append it to an element with an appropriate `landmark` role."
},
{
"test": true,
"id": "k-popuplist-label",
"multiple": true,
"attribute": [
"aria-label",
"aria-labelledby"
],
"usage": "When the container has a `region` role assigned, povides a label."
}
]
},
{
"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."
},
{
"test": true,
"id": "k-popuplist-item-id",
"when": "grouped",
"attribute": "id",
"usage": "When grouped, the list items must have an `id` attribute specified, so that the `aria-owns` attribute of their group header elements (with `role=group`) point to that ids."
},
{
"test": true,
"id": "k-popuplist-item-described",
"when": "grouped",
"attribute": "aria-describedby",
"usage": "When grouped, the list items must have an `aria-describedby` attribute pointing to the id of the `k-list-item-text` element in their `k-list-group-item`."
}
]
},
{
"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."
}
]
},
{
"selector": ".k-list-group-item",
"checks": [
{
"selector": ".k-list-group-item",
"test": true,
"id": "k-popuplist-group-item-role",
"attribute": "role",
"value": "group",
"usage": "The group elements in the popup list must be have `role=group`."
},
{
"test": true,
"id": "k-popuplist-group-item-owns",
"attribute": "aria-owns",
"usage": "The group elements in the popup list must own the list items belonging to their group."
}
]
},
{
"selector": ".k-list-group-item>.k-list-item-text",
"checks": [
{
"selector": ".k-list-group-item>.k-list-item-text",
"test": true,
"id": "k-popuplist-group-text-id",
"attribute": "id",
"usage": "The `k-list-item-text` elements of the `k-list-group-item` must have an id specified. The `aria-labelledby` attribute of the list items in the group must point to that id."
}
]
}
]
},
"avatar": {
"component": "avatar",
"rules": [
{
"selector": ".k-avatar img",
"checks": [
{
"selector": ".k-avatar img",
"id": "k-avatar-image-alt",
"test": true,
"usage": "Assures the presence of an `alt` attribute in a nested `img` tag inside the Avatar.",
"attribute": "alt"
}
]
}
]
},
"BottomNavigation": {
"component": "BottomNavigation",
"rules": [
{
"selector": ".k-bottom-nav",
"checks": [
{
"selector": ".k-bottom-nav",
"id": "k-bottom-nav-role",
"test": true,
"usage": "The landmark role `navigation` must be assigned to the bottom navigation.",
"attribute": [
"role=navigation",
"nodeName=nav"
]
}
]
},
{
"selector": ".k-bottom-nav-item",
"checks": [
{
"selector": ".k-bottom-nav-item",
"id": "k-bottom-nav-item-role",
"test": true,
"usage": "Associate the link purpose of the bottom navigation items.",
"attribute": [
"role=link",
"nodeName=a"
]
}
]
},
{
"selector": ".k-bottom-nav-item.k-selected",
"checks": [
{
"selector": ".k-bottom-nav-item.k-selected",
"id": "k-bottom-nav-item-current",
"test": true,
"usage": "Associate the link purpose of the bottom navigation items.",
"value": "true",
"attribute": "aria-current"
}
]
}
]
},
"breadcrumb": {
"component": "breadcrumb",
"rules": [
{
"selector": ".k-breadcrumb",
"checks": [
{
"selector": ".k-breadcrumb",
"id": "k-breadcrumb-label",
"test": true,
"usage": "Indicates the type of navigation provided by the `nav` element.",
"value": "Breadcrumb",
"attribute": "aria-label"
}
]
},
{
"selector": ".k-breadcrumb-item .k-breadcrumb-link,.k-breadcrumb-item .k-breadcrumb-root-link",
"checks": [
{
"selector": ".k-breadcrumb-item .k-breadcrumb-link,.k-breadcrumb-item .k-breadcrumb-root-link",
"id": "k-breadcrumb-item-link-role",
"test": true,
"usage": "The breadcrumb item should render either an `<a>` element, or should have `role=\"link\"` assigned.",
"attribute": [
"role=link",
"nodeName=a"
]
}
]
},
{
"selector": ".k-breadcrumb-last-item .k-breadcrumb-link,.k-breadcrumb-last-item .k-breadcrumb-root-link",
"checks": [
{
"selector": ".k-breadcrumb-last-item .k-breadcrumb-link,.k-breadcrumb-last-item .k-breadcrumb-root-link",
"id": "k-breadcrumb-item-link-current",
"test": true,
"usage": "The last breadcrumb item that points to the active page should have `aria-current=\"page\"`.",
"value": "page",
"attribute": "aria-current"
}
]
},
{
"selector": ".k-breadcrumb-last-item .k-breadcrumb-link",
"checks": [
{
"selector": ".k-breadcrumb-last-item .k-breadcrumb-link",
"id": "k-breadcrumb-item-link-disabled",
"test": true,
"usage": "Indicates that the last breadcrumb item is disabled.",
"value": "true",
"attribute": "aria-disabled"
}
]
},
{
"selector": ".k-breadcrumb-delimiter-icon",
"checks": [
{
"selector": ".k-breadcrumb-delimiter-icon",
"id": "k-breadcrumb-delimiter-icon-hidden",
"test": true,
"usage": "The breadcrumb delimiter icon should not be accessed through assistive technology.",
"value": "true",
"attribute": "aria-hidden"
}
]
}
]
},
"button": {
"component": "button",
"rules": [
{
"selector": ".k-button",
"checks": [
{
"selector": ".k-button",
"id": "k-button-role",
"test": true,
"multiple": true,
"usage": "If the used element is not `<button>`, explicitly set its `role` to `button`.",
"attribute": [
"role=button",
"nodeName=button"
]
}
]
}
]
},
"buttongroup": {
"component": "buttongroup",
"rules": [
{
"selector": ".k-button-group:not(.k-split-button)",
"checks": [
{
"selector": ".k-button-group:not(.k-split-button)",
"id": "k-buttongroup-role",
"test": true,
"usage": "Sets the proper role for the group of buttons.",
"value": "group",
"attribute": "role"
}
]
},
{
"selector": ".k-button-group.k-disabled",
"checks": [
{
"selector": ".k-button-group.k-disabled",
"id": "k-buttongroup-disabled",
"test": true,
"usage": "The attribute is rendered only when the entire button group is disabled.",
"value": "true",
"attribute": "aria-disabled"
}
]
},
{
"selector": ".k-button-group:not(.k-split-button):not(.k-scheduler-navigation):not(.k-zoom-control) .k-button",
"checks": [
{
"selector": ".k-button-group:not(.k-split-button):not(.k-scheduler-navigation):not(.k-zoom-control) .k-button",
"id": "k-buttongroup-button-pressed",
"test": true,
"usage": "Specifies the current state of the ButtonGroup. Only the selected button within the group will have this attribute set to `true`.",
"attribute": "aria-pressed"
}
]
}
]
},
"calendar": {
"component": "calendar",
"rules": [
{
"selector": ".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range) .k-calendar-table",
"checks": [
{
"selector": ".k-calendar:not(.k-calendar-infinite):not(.k-calendar-range) .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-focus id"
},
{
"id": "k-calendar-tabindex",
"test": true,
"usage": "Makes the grid focusable.",
"value": "0",
"attribute": "tabindex"
}
]
},
{
"selector": ".k-content:nth-child(1) .k-calendar-th",
"checks": [
{
"selector": ".k-content:nth-child(1) .k-calendar-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"
},
{
"id": "k-calendar-th-role",
"test": true,
"usage": "The row in the `<thead>` must contain `<th>` elements or elements with `role=\"columnheader\"`.",
"attribute": [
"role=columnheader",
"nodeName=th"
]
}
]
},
{
"selector": ".k-calendar-td.k-selected",
"checks": [
{
"selector": ".k-calendar-td.k-selected",
"id": "k-calendar-td-selected",
"test": true,
"usage": "Specifies whether the date is selected or not.",
"attribute": "aria-selected",
"value": "true"
}
]
},
{
"selector": ".k-calendar-td.k-disabled",
"checks": [
{
"selector": ".k-calendar-td.k-disabled",
"id": "k-calendar-td-disabled",
"test": true,
"usage": "When a date is not available for selection, its gridcell element must have the attribute set to `true`.",
"attribute": "aria-disabled",
"value": "true"
}
]
},
{
"selector": ".k-year .k-calendar-td",
"checks": [
{
"selector": ".k-year .k-calendar-td",
"id": "k-calendar-td-label",
"test": true,
"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-tabindex",
"test": true,
"usage": "The buttons must not be focusable.",
"value": "-1",
"attribute": "tabindex"
}
]
},
{
"selector": ".k-nav-next.k-disabled,.k-nav-prev.k-disabled",
"checks": [
{
"selector": ".k-nav-next.k-disabled,.k-nav-prev.k-disabled",
"id": "k-calendar-nav-btn-disabled",
"test": true,
"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"
}
]
},
{
"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-tabindex",
"test": true,
"usage": "The buttons must not be focusable.",
"value": "-1",
"attribute": "tabindex"
}
]
},
{
"selector": ".k-nav-fast.k-disabled",
"checks": [
{
"selector": ".k-nav-fast.k-disabled",
"id": "k-calendar-nav-fast-disabled",
"test": true,
"usage": "When navigation is not allowed outside the current view the button should have this attribute set to `true`.",
"attribute": "aria-disabled"
}
]
},
{
"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 not be focusable.",
"value": "-1",
"attribute": "tabindex"
}
]
}
]
},
"captcha": {
"component": "captcha",
"rules": [
{
"selector": ".k-captcha-image>img",
"checks": [
{
"selector": ".k-captcha-image>img",
"id": "k-captcha-image-alt",
"test": true,
"usage": "The Captcha image must have an `alt` tag, so that the.",
"attribute": "alt"
}
]
},
{
"selector": ".k-captcha-image-controls>.k-button",
"checks": [
{
"selector": ".k-captcha-image-controls>.k-button",
"id": "k-captcha-image-button-role",
"test": true,
"usage": "The image control buttons must have an appropriate role.",
"attribute": [
"role=button",
"nodeName=button"
]
},
{
"id": "k-captcha-image-button-label",
"test": true,
"usage": "Each button must have an accessible name as they are all represented by icons and no text is available in their contents.",
"attribute": [
"aria-label",
"title"
]
}
]
},
{
"selector": ".k-captcha-input .k-input-inner",
"checks": [
{
"selector": ".k-captcha-input .k-input-inner",
"id": "k-captcha-input-role",
"test": true,
"usage": "Describes the role of the component.",
"attribute": [
"role=textbox",
"nodeName=input"
]
},
{
"id": "k-captcha-input-label",
"test": true,
"usage": "The input needs an accessible name to be assigned to it.",
"attribute": [
"label for",
"aria-label",
"aria-labelledby"
]
}
]
},
{
"selector": ".k-disabled .k-input-inner",
"checks": [
{
"selector": ".k-disabled .k-input-inner",
"id": "k-captcha-disabled",
"test": true,
"usage": "Attribute is rendered only when the textbox is disabled.",
"multiple": true,
"attribute": [
"disabled=disabled",
"aria-disabled=true"
]
}
]
},
{
"selector": ".k-captcha-input>input",
"checks": [
{
"selector": ".k-captcha-input>input",
"id": "k-captcha-hidden-input",
"test": true,
"usage": "The hidden input holding the Captcha ID value so that the remote could validate the user input.",
"attribute": "type",
"value": "hidden"
}
]
}
]
},
"card": {
"component": "card",
"rules": [
{
"selector": ".k-card-list .k-card",
"checks": [
{
"selector": ".k-card-list .k-card",
"id": "k-card-role",
"test": true,
"usage": "When the card is located in a list, it should accept the listitem role.",
"value": "listitem",
"attribute": "role"
},
{
"id": "k-card-tabindex",
"test": true,
"multiple": true,
"usage": "The card component is focusable. By enabling navigatable setting in the card component, it is focusable and all inner elements are not until Enter key is pressed.",
"value": "0",
"attribute": "tabindex"
},
{
"id": "k-card-describedby",
"test": true,
"usage": "Associate the card to the title element when going through the cards.",
"value": ".k-card-title id",
"attribute": "aria-describedby"
},
{
"id": "k-card-keyshortcuts",
"test": true,
"usage": "Announces the bound Enter key for the Card component that will enable the navigation inside the card.",
"value": "Enter",
"attribute": "aria-keyshortcuts"
}
]
}
]
},
"carousel": {
"component": "carousel",
"rules": [
{
"selector": ".k-scrollview",
"checks": [
{
"selector": ".k-scrollview",
"id": "k-carousel-role",
"test": true,
"usage": "Specifies the role of the Carousel element.",
"value": "application",
"attribute": "role"
},
{
"id": "k-carousel-roledescription",
"test": true,
"usage": "Clarifies the role of the Carousel element.",
"value": "carousel",
"attribute": "aria-roledescription"
},
{
"id": "k-carousel-tabindex",
"test": true,
"usage": "Carousel element must be focusable.",
"value": "0",
"attribute": "tabindex"
}
]
},
{
"selector": ".k-scrollview-wrap",
"checks": [
{
"selector": ".k-scrollview-wrap",
"id": "k-carousel-items-role",
"test": true,
"usage": "Clarifies the scrollview wrap as a list of items (images).",
"value": "list",
"attribute": "role"
}
]
},
{
"selector": ".k-scrollview>.k-sr-only",
"checks": [
{
"selector": ".k-scrollview>.k-sr-only",
"id": "k-carousel-live-polite",
"test": true,
"usage": "Identifies a hidden element as a live region in the `polite` state, meaning assistive technology users are informed about changes to the region at the next available opportunity.",
"value": "polite",
"attribute": "aria-live"
},
{
"id": "k-carousel-live-off",
"test": true,
"when": "auto",
"usage": "Identifies a hidden element as a live region that is in the `off` state, meaning assistive technology users are not informed about changes to the region.",
"value": "off",
"attribute": "aria-live"
}
]
},
{
"selector": ".k-scrollview-wrap>*",
"checks": [
{
"selector": ".k-scrollview-wrap>*",
"id": "k-carousel-item-role",
"test": true,
"usage": "Specifies the role of each Carousel item.",
"value": "listitem",
"attribute": "role"
},
{
"id": "k-carousel-item-roledescription",
"test": true,
"usage": "Clarifies the role of the Carousel item.",
"attribute": "aria-roledescription",
"value": "slide"
}
]
},
{
"selector": ".k-scrollview-prev,.k-scrollview-next",
"checks": [
{
"selector": ".k-scrollview-prev,.k-scrollview-next",
"id": "k-carousel-button-role",
"test": true,
"usage": "Specifies the role of the element as a Button.",
"multiple": true,
"attribute": [
"role=button",
"nodeName=button"
]
},
{
"id": "k-carousel-button-label",
"test": true,
"usage": "Specifies label for the Previous/Next button.",
"attribute": "aria-label"
},
{
"id": "k-carousel-button-controls",
"test": true,
"usage": "Points to the id of the items container element.",
"attribute": "aria-controls",
"value": ".k-scrollview-wrap id"
}
]
}
]
},
"chart": {
"component": "chart",
"rules": [
{
"selector": ".k-chart",
"checks": [
{
"selector": ".k-chart",
"id": "chart-role",
"test": true,
"usage": "Indicates that the Chart element is a Graphics Document.",
"value": "graphics-document",
"attribute": "role"
},
{
"id": "chart-role-description",
"test": true,
"usage": "User-set value that clarifies the type of Chart to screen reader users.",
"attribute": "aria-roledescription"
},
{
"id": "chart-label",
"test": true,
"usage": "Announces the user-set title of the Chart.",
"attribute": "aria-label"
}
]
},
{
"selector": ".k-chart-point",
"checks": [
{
"selector": ".k-chart-point",
"id": "chart-point-role",
"test": true,
"multiple": true,
"usage": "Specifies the role of the series point elements.",
"attribute": "role",
"value": "graphics-symbol"
},
{
"id": "chart-point-role-description",
"test": true,
"multiple": true,
"usage": "Describes the role of the series point elements.",
"attribute": "aria-roledescription",
"value": "Point"
}
]
},
{
"selector": ".k-chart-legend-item",
"checks": [
{
"selector": ".k-chart-legend-item",
"id": "chart-legend-item-role",
"test": true,
"multiple": true,
"usage": "Specifies the role of the legend item element.",
"attribute": "role",
"value": "checkbox"
},
{
"id": "chart-legend-item-label",
"test": true,
"multiple": true,
"usage": "Specifies the name of the series associated with this legend item.",
"attribute": "aria-label"
},
{
"id": "chart-legend-item-role-description",
"test": true,
"multiple": true,
"usage": "Specifies the name of the series associated with this legend item.",
"attribute": "aria-roledescription",
"value": "Legend item"
}
]
}
]
},
"chat": {
"component": "chat",
"rules": [
{
"selector": ".k-message-list",
"checks": [
{
"selector": ".k-message-list",
"id": "k-chat-message-list-role",
"test": true,
"usage": "The role of the Chat message list must imply that there is a log (list) of messages.",
"attribute": "role",
"value": "log"
},
{
"id": "k-chat-message-list-label",
"test": true,
"attribute": "aria-label",
"usage": "Announces the purpose of the Chat message list (for ex. 'Message list')."
}
]
},
{
"selector": ".k-quick-reply",
"checks": [
{
"selector": ".k-quick-reply",
"id": "k-chat-quick-reply-role",
"test": true,
"usage": "The quick reply elements must be exposed as buttons.",
"attribute": "role",
"value": "button"
},
{
"id": "k-chat-quick-reply-tabindex",
"test": true,
"usage": "The quick reply elements must be part of the page tabsequence.",
"attribute": "tabindex",
"value": "0"
}
]
},
{
"selector": ".k-message-box>.k-input-inner",