Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Appearance settings

Add accessibility for CV. #1152

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 6 commits into from
May 19, 2025
Merged
Show file tree
Hide file tree
Changes from 5 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 16 additions & 0 deletions 16 _contentTemplates/common/collectionview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
#collectionview-keyboard-notes
## Notes

Here are notes that the users should be aware of when using the keyboard navigation support:
didiyordanova marked this conversation as resolved.
Show resolved Hide resolved

* Groups are not part of the keyboard navigation support.
didiyordanova marked this conversation as resolved.
Show resolved Hide resolved
* When entering the CollectionView with the keyboard, if there is already a `CurrentItem` set, this item becomes focused and is used as a starting point for navigation onwards.
* When entering the CollectionView with the keyboard, if there is no `CurrentItem` set, the first rendered item becomes current. If there are no rendered items, then the first item from the data view becomes current. An example of no rendered items—when all groups in the `viewport` are collapsed. In this case when expanding the first group, the `CurrentItem` will become visible.
didiyordanova marked this conversation as resolved.
Show resolved Hide resolved
* When changing the `CurrentItem` to an item that is not in the `viewport`, the CollectionView scrolls to this item. The CollectionView won't scroll to an item if the `CurrentItem` is inside a collapsed group and the item is not visible.
#end

#collectionview-keyboard-common-text
While applying part of the keyboard keys, you can also change the current item behavior of the CollectionView component. For more details, see the article on [setting the .NET MAUI CollectionView Current Item]({%slug collectionview-current-item%})

The following table lists the actions and keyboard combinations that are available in the CollectionView:
#end
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
---
title: MacCatalyst
page_title: .NET MAUI CollectionView Documentation - Keyboard Support on MacCatalyst
description: Learn more about the available keyboard combinations as part of the supported Telerik UI for .NET MAUI CollectionView accessibility standards.
position: 2
slug: collectionview-keyboard-support-mac
---

# .NET MAUI CollectionView Keyboard Support on MacCatalyst

The [Telerik UI for .NET MAUI CollectionView]({%slug collectionview-overview%}) provides keyboard navigation support on `MacCatalyst`.

@[template](/_contentTemplates/common/collectionview.md#collectionview-keyboard-common-text)


| Hotkey Combinations | Action |
didiyordanova marked this conversation as resolved.
Show resolved Hide resolved
| -------------------- | ------ |
| `Tab` | Enters or exits the CollectionView. |
| `Up Arrow` | Navigates to the previous item in the CollectionView when the orientation of the `ItemsLayout` is `Vertical`. |
| `Down Arrow` | Navigates to the next item in the CollectionView when the orientation of the `ItemsLayout` is `Vertical`. |
| `Left Arrow` | Navigates to the previous item in the CollectionView when the orientation of the `ItemsLayout` is `Horizontal`. |
| `Right Arrow` | Navigates to the previous item in the CollectionView when the orientation of the `ItemsLayout` is `Horizontal`. |
| `Space` | Selects the currently focused item in `Single` `SelectionMode`. When `SelectionMode` is multiple, the `Space` key selects/deselects the current item. |
| `Fn` + `Up Arrow` | When all items are in the viewport, the first item becomes current. When not all items are in the viewport, the first rendered item becomes current. When pressing `Page Up` again, a new portion of items appear and the first of them becomes current. |
didiyordanova marked this conversation as resolved.
Show resolved Hide resolved
| `Fn` + `Down Arrow` | When all items are in the viewport, the last item becomes current. When not all items are in the viewport, the last rendered item becomes current. When pressing `Page Down` again, a new portion of items appear and the last of them becomes current. |
didiyordanova marked this conversation as resolved.
Show resolved Hide resolved
| `Fn` + `Left Arrow` | The first item in the CollectionView becomes current. |
| `Fn` + `Right Arrow` | The last item in the CollectionView becomes current. |


@[template](/_contentTemplates/common/collectionview.md#collectionview-keyboard-notes)

## Additional Resources

- [.NET MAUI CollectionView Product Page](https://www.telerik.com/maui-ui/collectionview)
- [.NET MAUI CollectionView Forum Page](https://www.telerik.com/forums/maui?tagId=1829)
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

## See Also

- [Keyboard navigation support on MacCatalyst]({%slug collectionview-keyboard-support-mac%})
- [Screen Reader]({%slug collectionview-accessibility-screen-reader%})
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
title: WinUI
page_title: .NET MAUI CollectionView Documentation - Keyboard Support for WinUI
description: Learn more about the available keyboard combinations as part of the supported Telerik UI for .NET MAUI CollectionView accessibility standards.
position: 1
slug: collectionview-keyboard-support-winui
---

# .NET MAUI CollectionView Keyboard Support on WinUI

The [Telerik UI for .NET MAUI CollectionView]({%slug collectionview-overview%}) provides keyboard navigation support on `WinUI`.

@[template](/_contentTemplates/common/collectionview.md#collectionview-keyboard-common-text)


| Hotkey Combinations | Action |
| -------------------- | ------ |
| `Tab` | Enters or exits the CollectionView. |
| `Shift` + `Tab` | Enters or exits the CollectionView. |
| `Up Arrow` | Navigates to the previous item in the CollectionView when the orientation of the `ItemsLayout` is `Vertical`. |
| `Down Arrow` | Navigates to the next item in the CollectionView when the orientation of the `ItemsLayout` is `Vertical`. |
| `Left Arrow` | Navigates to the previous item in the CollectionView when the orientation of the `ItemsLayout` is `Horizontal`. |
| `Right Arrow` | Navigates to the previous item in the CollectionView when the orientation of the `ItemsLayout` is `Horizontal`. |
| `Space` | Selects the currently focused item in `Single` `SelectionMode`. When `SelectionMode` is multiple, the `Space` key selects/deselects the current item. |
| `Page Up` | When all items are in the viewport, the first item becomes current. When not all items are in the viewport, the first rendered item becomes current. When pressing `Page Up` again, a new portion of items appear and the first of them becomes current. |
| `Page down` | When all items are in the viewport, the last item becomes current. When not all items are in the viewport, the last rendered item becomes current. When pressing `Page Down` again, a new portion of items appear and the last of them becomes current. |
| `Home` | The first item in the CollectionView becomes current. |
| `End` | The last item in the CollectionView becomes current. |


@[template](/_contentTemplates/common/collectionview.md#collectionview-keyboard-notes)

## Additional Resources

- [.NET MAUI CollectionView Product Page](https://www.telerik.com/maui-ui/collectionview)
- [.NET MAUI CollectionView Forum Page](https://www.telerik.com/forums/maui?tagId=1829)
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

## See Also

- [Keyboard navigation support on MacCatalyst]({%slug collectionview-keyboard-support-mac%})
- [Screen Reader]({%slug collectionview-accessibility-screen-reader%})
19 changes: 19 additions & 0 deletions 19 controls/collectionview/accessibility/screen-reader.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
title: Screen Reader
page_title: .NET MAUI CollectionView Documentation - Screen Reader
description: The Telerik UI for .NET MAUI CollectionView provides screen reader support for Android and iOS.
position: 0
slug: collectionview-accessibility-screen-reader
tags: accessibility, collectionview, screen reader, accessibility support, dotnet maui
---

# .NET MAUI CollectionView Screen Reader Support (Android and iOS)

The Telerik UI for .NET MAUI CollectionView provides extensive accessibility support and enables users with disabilities to acquire complete control over its features.

The CollectionView allows the users to use the Android (TalkBack) and iOS (VoiceOver) screen readers for voice descriptions of the elements inside the CollectionView.

## See Also

- [Keyboard navigation support on MacCatalyst]({%slug collectionview-keyboard-support-mac%})
- [Keyboard navigation support on WinUI]({%slug collectionview-keyboard-support-winui%})
37 changes: 37 additions & 0 deletions 37 controls/collectionview/current-item.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
---
title: Current Item
page_title: .NET MAUI CollectionView Documentation - Current Item
description: Learn how to set the behavior and style the appearance of the current cell of the Telerik UI for .NET MAUI CollectionView component.
position: 25
slug: collectionview-current-item
tags: current item, keyboard navigation, maui, collectionview, dotnet maui
---

# .NET MAUI CollectionView Current Item

The [Telerik UI for .NET MAUI CollectionView]({%slug colelctionview-overview%}) provides options for configuring the behavior and style of its current item.

## Setting the Behavior

The CollectionView allows you to use the `CurrentItem` property of type `object` to programmatically modify the current item during keyboard navigation, when using the mouse, and so on.

## Styling the Item

You can style the current item by setting the `Focused`, `FocusedSelected`, and `FocusedMouseOver` [visual states of the CollectionView]({%slug collectionview-visual-states%}). Define the visual states by using the [Item Styling of the CollectionView]({%slug collectionview-item-styling%}).

## Additional Resources

- [.NET MAUI CollectionView Product Page](https://www.telerik.com/maui-ui/collectionview)
- [.NET MAUI CollectionView Forum Page](https://www.telerik.com/forums/maui?tagId=1829)
- [Telerik .NET MAUI Blogs](https://www.telerik.com/blogs/mobile-net-maui)
- [Telerik .NET MAUI Roadmap](https://www.telerik.com/support/whats-new/maui-ui/roadmap)

## See Also

- [Data Binding]({%slug collectionview-data-binding%})
- [Grouping]({%slug collectionview-grouping%})
- [Filtering]({%slug collectionview-filtering%})
- [Sorting]({%slug collectionview-sorting%})
- [Selection]({%slug collectionview-selection%})
- [Commands]({%slug collectionview-commands%})
- [Events]({%slug collectionview-events%})
2 changes: 1 addition & 1 deletion 2 controls/collectionview/styling/item-style.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ page_title: .NET MAUI CollectionView Documentation - Item Styling
description: Check the Telerik for .NET MAUI CollectionView styling options for the Item Style.
position: 0
slug: collectionview-item-styling
tags: style,, item, collectionview, maui, dotnet maui
tags: style, item, collectionview, maui, dotnet maui
---

# .NET MAUI CollectionView Styling
Expand Down
36 changes: 36 additions & 0 deletions 36 controls/collectionview/styling/visual-states.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
---
title: Visual States
page_title: .NET MAUI CollectionView Documentation - Visual States
description: Learn how to set the border color, background color, and other visual states to the Telerik UI for .NET MAUI CollectionView item.
position: 0
slug: collectionview-visual-states
tags: style, visual states, item, collectionview, maui, dotnet maui
---

# .NET MAUI CollectionView Visual States

This article describes the visual states provided by the CollectionView control.

You can use these visual states to change the appearance of the control based on its state—such as when it's disabled, focused, hovered, and more.

The CollectionView provides the following `CommonStates` visual states:

| Visual State | Description |
| ------------- | --------------- |
| `Normal` | Applies when the item is in its normal state. |
| `Selected` | Applies when the item is selected—for `Single` or `Multiple` `SelectionMode`. |
| `MouseOver` | Applies when the mouse cursor is hovering over the item. |
| `Focused` | Applies when setting the current item. |
| `FocusedMouseOver` | Applies when the current item is set and the mouse cursor is hovering it. |
| `FocusedSelected` | Applies when the item is selected and focused. |
| `Disabled` | Applies when the ColelctionView item `IsEnabled` is `False`. |

## See Also

- [Grouping]({%slug collectionview-grouping%})
- [Filtering]({%slug collectionview-filtering%})
- [Sorting]({%slug collectionview-sorting%})
- [Selection]({%slug collectionview-selection%})
- [Commands]({%slug collectionview-commands%})
- [Events]({%slug collectionview-commands%})

Loading
Morty Proxy This is a proxified and sanitized view of the page, visit original site.