Merge pull request #386 from telerik/add-docs-folder

chore: add common docs files

Author: zdravkov

docs/accessibility/_meta.yml

@@ -0,0 +1,3 @@
+title: Accessibility
+position: 950
+category: common

docs/accessibility/accessibility-compliance.md

@@ -0,0 +1,107 @@
+---
+title: Accessibility Support
+page_title: Accessibility Support - Kendo UI for Vue Docs & Demos
+description: "A list of the Kendo UI components for Vue in terms of the accessibility and keyboard navigation support they provide."
+slug: compliance_accessibility
+position: 90
+---
+
+# Accessibility Support
+
+How the Kendo UI for Vue Team Approaches Accessibility
+
+When implementing any Kendo UI for Vue component, the Kendo UI for Vue team follows the WAI-ARIA specification to ensure that the right foundation for the accessibility of each component is laid. From there, the team employs automated testing across the Kendo UI for Vue library through the Compliance Sheriff tool, which the team has found to be the tool that works best for automated accessibility testing of the product. Each component also goes through manual testing, which includes testing the components with various screen readers and testing out other aspects of accessibility such as keyboard navigation.
+
+Due to the complexity of some of the components in the Kendo UI for Vue UI library, the team sometimes runs into scenarios not covered by the WAI-ARIA specification. In those cases, they tap into the web development accessibility know-how of the rest of the Progress organization, including feedback from accessibility-minded users, for expertise and feedback based on 10 years of creating web component libraries. This knowledge-sharing across internal teams and clients helps the team ensure that Kendo UI for Vue can reach a certain level of accessibility compliance even with its most advanced components.
+
+The following table lists the accessibility compliance levels and keyboard navigation support provided by the Kendo UI for Vue UI components.
+
+|Component |Section 508|WCAG 2.1| Accessibility Example | Accessibility Documentation |
+|:---          |:---|:---|:---|:---
+|`Appbar`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_appbar) |
+|`ArcGauge`|`No`|`n/a`| `n/a` | `n/a` |
+|`AutoComplete`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_autocomplete) | [Documentation](slug:accessibility_autocomplete) |
+|`Avatar`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_avatar) |
+|`Badge`|`No`|`n/a`| `n/a` | `n/a` |
+|`BottomNavigation`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_bottomnavigation) |
+|`Button`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_button) |
+|`ButtonGroup`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_buttongroup) |
+|`Calendar`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_calendar) | [Documentation](slug:accessibility_calendar) |
+|`Card`|`No`|`n/a`| `n/a` | `n/a` |
+|`Chart`|`No`|`n/a`| `n/a` | `n/a` |
+|`CheckBox`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_checkbox) | [Documentation](slug:accessibility_checkbox) |
+|`Chip`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_chip) |
+|`Chiplist`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_chiplist) | [Documentation](slug:accessibility_chiplist) |
+|`ChunkProgressBar`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_chunkprogressbar) |
+|`CircularGauge`|`No`|`n/a`| `n/a` | `n/a` |
+|`ColorGradient`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_colorgradient) |
+|`ColorPalette`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_colorpalette) | [Documentation](slug:accessibility_colorpalette) |
+|`ColorPicker`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_colorpicker) | [Documentation](slug:accessibility_colorpicker) |
+|`ComboBox`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_combobox) | [Documentation](slug:accessibility_combobox) |
+|`DateInput`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_dateinput) | [Documentation](slug:accessibility_dateinput) |
+|`DatePicker`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_datepicker) | [Documentation](slug:accessibility_datepicker) |
+|`DateRangePicker`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_daterangepicker) | [Documentation](slug:accessibility_daterangepicker) |
+|`DateTimePicker`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_datetimepicker) | [Documentation](slug:accessibility_datetimepicker) |
+|`Dialog`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_dialog) | [Documentation](slug:accessibility_dialog) |
+|`Drawer`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_drawer) |
+|`DropDownButton`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_dropdownbutton) | [Documentation](slug:accessibility_dropdownbutton) |
+|`DropDownList`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_dropdownlist) | [Documentation](slug:accessibility_dropdownlist) |
+|`Editor`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_editor) |
+|`ExpansionPanel`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_expansionpanel) | [Documentation](slug:accessibility_expansionpanel) |
+|`Filter`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_filter) |
+|`FlatColorPicker`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_flatcolorpicker) |
+|`FloatingActionButton `|`Yes`|`AA`| [Demo](slug:keyboard_navigation_floatingactionbutton) | [Documentation](slug:accessibility_floatingactionbutton) |
+|`FloatingLabel`|`No`|`n/a`| `n/a` | `n/a` |
+|`Form`|`No`|`n/a`| `n/a` | `n/a` |
+|`Grid`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_grid) | [Documentation](slug:accessibility_grid) |
+|`GridLayout`|`No`|`n/a`| `n/a` | `n/a` |
+|`Input`|`No`|`n/a`| `n/a` | `n/a` |
+|`Label`|`No`|`n/a`| `n/a` | `n/a` |
+|`LinearGauge`|`No`|`n/a`| `n/a` | `n/a` |
+|`ListBox`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_listbox) |
+|`Listview`|`Yes`|`AAA`| `n/a` | [Documentation](slug:accessibility_listview) |
+|`Loader`|`No`|`n/a`| `n/a` | `n/a` |
+|`MaskedTextBox`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_maskedtextbox) |
+|`Menu`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_menu) | [Documentation](slug:accessibility_menu) |
+|`MultiSelect`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_multiselect) | [Documentation](slug:accessibility_multiselect) |
+|`Notification`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_notification) |
+|`NumericTextBox`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_numerictextbox) | [Documentation](slug:accessibility_numerictextbox) |
+|`Pager `|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_pager) |
+|`PanelBar`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_panelbar) | [Documentation](slug:accessibility_panelbar) |
+|`Popup`|`Yes`|`AA`| `n/a` | `n/a` |
+|`ProgressBar`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_progressbar) |
+|`RadialGauge`|`No`|`n/a`| `n/a` | `n/a` |
+|`RadioButton`|`Yes`|`AA`| `n/a` | `n/a` |
+|`RadioGroup`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_radiogroup)  | [Documentation](slug:accessibility_radiogroup) |
+|`RangeSlider`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_rangeslider)  | [Documentation](slug:accessibility_rangeslider) |
+|`Scheduler`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_scheduler)  | [Documentation](slug:accessibility_scheduler) |
+|`ScrollView`|`No`|`n/a`| `n/a` | `n/a` |
+|`Signature`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_signature) |
+|`Skeleton`|`Yes`|`AAA`| `n/a` | [Documentation](slug:accessibility_skeleton) |
+|`Slider`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_slider) | [Documentation](slug:accessibility_slider) |
+|`SplitButton`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_splitbutton) | [Documentation](slug:accessibility_splitbutton) |
+|`Splitter`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_splitter) | [Documentation](slug:accessibility_splitter) |
+|`StackLayout`|`No`|`n/a`| `n/a` | `n/a` |
+|`Stepper`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_stepper) | [Documentation](slug:accessibility_stepper) |
+|`Stockchart`|`No`|`n/a`| `n/a` | `n/a` |
+|`Switch`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_switch) | [Documentation](slug:accessibility_switch) |
+|`Tabstrip`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_tabstrip) | [Documentation](slug:accessibility_tabstrip) |
+|`TextArea`|`Yes`|`AAA`| `n/a` | [Documentation](slug:accessibility_textarea) |
+|`TileLayout`|`Yes`|`AAA`| `n/a` | [Documentation](slug:accessibility_tilelayout) |
+|`TimePicker`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_timepicker) | [Documentation](slug:accessibility_timepicker) |
+|`Toolbar`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_toolbar) |
+|`Tooltip`|`Yes`|`AA`| `n/a` | [Documentation](slug:accessibility_tooltip) |
+|`Treelist`|`No`|`n/a`| `n/a` | `n/a` |
+|`TreeView`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_treeview) | [Documentation](slug:accessibility_treeview) |
+|`Upload`|`Yes`|`AAA`| [Demo](slug:keyboard_navigation_upload) | [Documentation](slug:accessibility_upload) |
+|`Window`|`Yes`|`AA`| [Demo](slug:keyboard_navigation_window) | [Documentation](slug:accessibility_window) |
+
+
+The UI for Vue Native components are highly extensible and customizable. This means that, depending on the level of customization applied, you may be introducing rendering that is not accessible. Therefore, it is recommended that you test any modifications you make to the Kendo UI for Vue components to ensure the components still meet the desired level of accessibility standards. Additionally, be mindful of components working with custom input (images, text, HTML content, and so on) and make sure your content is accessible, too.
+
+> Last updated on `14 March, 2023`. Related to v3.8.5 of the Native Vue components. Using Vue v3.2.47.
+
+## Suggested Links
+
+* [Overview of Accessibility](slug:overview_accessibility)
+* [Telerik Blogs: Accessibility Guidebook for Web Development](https://www.telerik.com/blogs/web-accessibility-guidebook-for-developers?fbclid=IwAR2L0K0iOGfagkvLQQUBM5hxkO2s7P_ZM7gT3dqdj1_LO328eHN9NkVjk0o)

docs/accessibility/accessibility-swatch.md

@@ -0,0 +1,40 @@
+---
+title: Ocean Blue A11y Accessibility Swatch
+page_title: Ocean Blue A11y Accessibility Swatch
+description: "Ocean Blue A11y Accessibility Swatch in the Kendo UI for Vue suite."
+slug: themes_swatch_accessibility
+position: 2
+---
+
+# Ocean Blue A11y Accessibility Swatch
+
+The [Web Content Accessibility Guidelines](https://www.w3.org/TR/WCAG21/) sections [1.4.3 Contrast (Minimum)](https://www.w3.org/TR/WCAG21/#contrast-minimum) and [1.4.6 Contrast (Enhanced)](https://www.w3.org/TR/WCAG21/#contrast-enhanced) define the required contrast ratio for compliance. The WCAG Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. The Kendo UI for Vue library conforms to WCAG Level AA with the Default Ocean Blue A11y theme swatch coming with enabled contrast focus indicators (available as of version **6.0.1** of the [Default Theme](https://www.telerik.com/kendo-vue-ui/components/styling/theme-default/)).
+
+You can test the accessibility swatch in all Kendo UI for Vue demos by choosing it in the `Change Theme` menu:
+
+![Ocean Blue A11y Accessibility Swatch](ocean-blue-a11y-accessibility-swatch.gif)
+
+Kendo UI for Vue distributes the Default Ocean Blue A11y theme swatch with the `@progress/kendo-theme-default` package. If you don't need to apply any [customization](https://www.telerik.com/kendo-vue-ui/components/styling/customizing/) to the theme, you can can reference the precompiled CSS directly from unpkg CDN:
+
+````html
+https://cdn.kendostatic.com/themes/6.0.1/default/default-ocean-blue-a11y.css
+````
+
+If you prefer, or you need to customize the provided accessibility swatch, you can install the Default theme and import the swatch styles directly:
+
+````jsx
+// Import the Default theme accessibility swatch
+import '@progress/kendo-theme-default/dist/default-ocean-blue-a11y.scss';
+````
+
+## Known Limitations
+
+`BottomNavigation` and `ColorPalette` fail the *WCAG success criteria 1.4.11 Non-text contrast for the focus indicator* on its items.
+
+## Suggested Links
+
+* [Overview of Accessibility]({% slug overview_accessibility %})
+* [ThemeBuilder Pro App](https://themebuilderapp.telerik.com/)
+* [kendo-themes Repository](https://github.com/telerik/kendo-themes)
+* [Kendo Themes Swatches Wiki](https://github.com/telerik/kendo-themes/wiki/Swatches)
+

docs/accessibility/index.md

@@ -0,0 +1,79 @@
+---
+title: Overview
+page_title: Accessibility Overview - Kendo UI for Vue
+description: "General accessibility standards and keyboard navigation requirements for web applications and their support by Kendo UI for Vue."
+slug: overview_accessibility
+position: 0
+---
+
+# Accessibility Overview
+
+Websites and applications are accessible when they provide full control over their features by enabling users with disabilities to access their content by using assistive technologies or keyboard navigation.
+
+For the full list of components which support accessibility and keyboard navigation, refer to the article on [accessibility support by Kendo UI for Vue](slug:compliance_accessibility).
+
+## Standards and Policies
+
+Accessible websites and applications normally comply with some or all of the following standards:
+
+* [Section 508](#toc-section-508)
+* [Web Content Accessibility Guidelines (WCAG)](#toc-web-content-accessibility-guidelines)
+
+### Section 508
+
+Since 1998, Section 508 is part of the [U.S. Rehabilitation Act of 1973](https://en.wikipedia.org/wiki/Rehabilitation_Act_of_1973). Section 508 represents a set of accessibility standards which were defined by the U.S. General Services Administration (GSA) and which initially applied to Federal agencies only with the aim to ensure that their electronic and information technology is accessible to people with disabilities.
+
+[In 2017, Section 508 was reorganized](https://www.access-board.gov/guidelines-and-standards/communications-and-it/about-the-ict-refresh/overview-of-the-final-rule) to meet and reflect recent communication technology innovations and nowadays the Section 508 guidelines impact not only all U.S. Federal agencies, but also affect any company which does business with a Federal agency. Such companies include vendors, private contractors, financial industry, healthcare and legal organizations, and partners of those agencies which operate in the United States or abroad.
+
+For more information, refer to:
+
+* [Section 508 (Latest Amendment)](https://www.access-board.gov/the-board/laws/rehabilitation-act-of-1973#508)
+* [Rehabilitation Act of 1973](https://legcounsel.house.gov/Comps/Rehabilitation%20Act%20Of%201973.pdf)
+* [Kendo UI for Vue: Accessibility Support](slug:compliance_accessibility)
+
+### Web Content Accessibility Guidelines
+
+The Web Content Accessibility Guidelines (WCAG) which are set by the World Wide Web Consortium (W3C) define recommendations for making web content accessible to people with physical and cognitive disabilities. WCAG defines accessibility principles with their respective success criteria. Depending on the implemented success criteria by a web application, the WCAG provide the A, AA, and AAA levels of accessibility conformance.
+
+For more information, refer to:
+
+* [WCAG 2 Quick Reference Guide](https://www.w3.org/WAI/WCAG21/quickref/)
+* [WCAG 2.1 Guidelines](https://www.w3.org/TR/WCAG21)
+
+## Technical Specifications
+
+* [WAI-ARIA](#toc-wai-aria)
+* [Keyboard navigation](#toc-keyboard-navigation)
+
+### WAI-ARIA
+
+WAI-ARIA is a set of technical specifications which were developed by the W3C and which provide the semantics for the assistive technologies to access and interpret web content and web applications. The WAI-ARIA recommendations (standards) divide the semantics into roles and into states and properties which those roles support. For example, a [`checkbox` role](https://www.w3.org/TR/wai-aria-1.1/#checkbox) supports the [`aria-checked`](https://www.w3.org/TR/wai-aria-1.1/#aria-checked) state which indicates whether a checkbox, radio button, or a similar UI element is checked.
+
+The WAI-ARIA framework targets web developers who create web applications by using AJAX, scripting, and other rich application techniques.
+
+For more information, refer to:
+
+* [Accessible Rich Internet Applications (WAI-ARIA) 1.1](https://www.w3.org/TR/wai-aria-1.1/)
+* [WAI-ARIA Role Definitions](https://www.w3.org/TR/wai-aria-1.1/#role_definitions)
+* [WAI-ARIA State and Property Definitions](https://www.w3.org/TR/wai-aria-1.1/#state_prop_def)
+* [Kendo UI for Vue: Accessibility Support](slug:compliance_accessibility)
+
+### Keyboard Navigation
+
+By default, users can only navigate to links, buttons, and form controls with a keyboard. The navigation order in which interactive items receive keyboard focus has to be logical and intuitive. Generally, keyboard navigation logic needs to follow the visual horizontal and vertical flow of the page. For example, left to right and top to bottom, header first followed by the main and then the page navigation.
+
+[Keyboard accessibility](https://www.w3.org/WAI/WCAG21/quickref/#keyboard-accessible) is a category under the [WCAG Operable principle](https://www.w3.org/WAI/WCAG21/quickref/#principle2).
+
+In WCAG 2.1, the keyboard accessible category provides the following success criteria:
+
+* [Keyboard](https://www.w3.org/WAI/WCAG21/quickref/#keyboard)
+* [No Keyboard Trap](https://www.w3.org/WAI/WCAG21/quickref/#no-keyboard-trap)
+* [Keyboard (No Exception)](https://www.w3.org/WAI/WCAG21/quickref/#keyboard-no-exception)
+* [Character Key Shortcuts](https://www.w3.org/WAI/WCAG21/quickref/#character-key-shortcuts)
+
+## Suggested Links
+
+* [Accessibility Support by Kendo UI for Vue](slug:compliance_accessibility)
+* [GSA Government-Wide Section 508 Accessibility Program](https://www.access-board.gov/the-board/laws/rehabilitation-act-of-1973#508)
+* [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices/)
+* [Accessibility Swatch for Kendo UI for Vue](slug:themes_swatch_accessibility)

docs/accessibility/ocean-blue-a11y-accessibility-swatch.gif

@@ -0,0 +1,2 @@
+title: Styling & Themes
+position: 20

docs/changelog/styling/_meta.yml

@@ -0,0 +1,3 @@
+title: TypeScript Integration
+position: 1000
+category: common