Title: WCAG 1.3.1: Ensures elements with an ARIA role that require child roles contain them (#\39 374a450-079d-4586-b823-d6bc7723505f)
Tags: Accessibility, WCAG 1.3.1, aria-required-children

Issue: Ensures elements with an ARIA role that require child roles contain them (aria-required-children - https://accessibilityinsights.io/info-examples/web/aria-required-children)

Target application: Hermes Home - https://localhost/TrafficLoss

Element path: #\39 374a450-079d-4586-b823-d6bc7723505f

Snippet: <div class="k-grid-aria-root" id="9374a450-079d-4586-b823-d6bc7723505f" role="grid" aria-label="Data table">

How to fix: 
Fix any of the following:
  Element has children which are not allowed (see related nodes)
  Element has no aria-busy="true" attribute

Environment: Microsoft Edge version 111.0.1661.41

====

This accessibility issue was found using Accessibility Insights for Web 2.37.3 (axe-core 4.6.3), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

============================  code =============================

                           <TelerikGrid Data="@ViewModel.RDLInformation" TItem="TLSummary"
                                                        Pageable="true" 
                                                        Sortable="true" 
                                                        Groupable="false"
                                                        FilterMode="Telerik.Blazor.GridFilterMode.FilterRow"
                                                        Resizable="true" 
                                                        Reorderable="true"
                                                        Height = "100%">

....

                            </TelerikGrid>

Issue: Opening and closing a window will cause the window to reopen with each following OnClick. This seems to have been introduced with the upgrade to .net10

Code: Below is an example used on the basic Telerik Blazor template. Copy this and replace Home.razor with it.

@page "/"

<PageTitle>Telerik Blazor App | Home</PageTitle>

<div id="home-page">
    <HomeSvg />

    <h1>Hello, Telerik UI for Blazor!</h1>

    <p>Welcome to your new Telerik Blazor app.</p>

    <TelerikButton OnClick="OpenWindow1">Click Here First</TelerikButton>
    <TelerikButton OnClick="OpenWindow2">Click Here Second</TelerikButton>
    <TelerikButton OnClick="@(async () => {await Task.Delay(100);})">Unrelated OnClick</TelerikButton>


</div>

<TelerikWindow Visible="ShowWindow1">
    <WindowActions>
        <WindowAction OnClick="CloseWindow1" Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <span>Moving window now will help find this window in next step, but not necessary to replicate bug.</span>
        <br />
        <span>Close window using 'X'.</span>
    </WindowContent>
</TelerikWindow>

<TelerikWindow Visible="ShowWindow2">
    <WindowActions>
        <WindowAction OnClick="CloseWindow2" Name="Close"></WindowAction>
    </WindowActions>
    <WindowContent>
        <span>Window 1 shouldn't be appearing now, but it it is. Window 1 may be behind this window if you didn't drag in previous step.</span>
        <br />
        <span>If you close these windows, and click the 'Unrelated OnClick' button, both of these windows will reappear, despite just firing Task.Delay(100)</span>
    </WindowContent>
</TelerikWindow>

<style>
    #home-page {
        margin-left: auto;
        margin-right: auto;
        max-width: max-content;
        text-align: center;
        font-size: var(--kendo-font-size-xl);
    }

    @@media (min-height: calc(56px + 50px + 400px)) {
        /* header + footer + home page container*/
        #home-page {
            margin-top: calc(50vh - 28px - 25px - 200px);
        }
    }
</style>

@code {
    public bool ShowWindow1 { get; set; }
    public bool ShowWindow2 { get; set; }

    public async Task OpenWindow1()
    {
        ShowWindow1 = true;
    }

    public async Task OpenWindow2()
    {
        ShowWindow2 = true;
    }

    public void CloseWindow1()
    {
        ShowWindow2 = false;
        StateHasChanged();
    }

    public void CloseWindow2()
    {
        ShowWindow2 = false;
    }
}

Description

When the dropdown is open, the button's aria-controls attribute references a value that matches the popup's data-id, not its actual id. Since aria-controls must point to an element's id, the attribute is invalid and no element in the DOM matches the reference, breaking the accessible relationship between the button and its popup. 

Button renders:

aria-controls="50dc5df2-b83e-41bd-8c34-98470aba77c6"

Popup element has:

data-id="50dc5df2-b83e-41bd-8c34-98470aba77c6"
id="8630d4e4-2f22-4eaf-b96c-7cae113b70ed"

Steps to Reproduce

1. Add a TelerikDropDownButton using the standard Telerik example (source below).
2. Open the dropdown and inspect the HTML or run a Lighthouse audit.

<TelerikDropDownButton Icon="@SvgIcon.Share" OnClick="@(()=>OnItemClick("Primary"))">
    <DropDownButtonContent>Share</DropDownButtonContent>
    <DropDownButtonItems>
        <DropDownButtonItem Icon="@SvgIcon.Facebook" OnClick="@(()=>OnItemClick("Facebook"))">Facebook</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Twitter" OnClick="@(()=>OnItemClick("Twitter"))">Twitter</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Linkedin" OnClick="@(()=>OnItemClick("Linkedin"))">Linkedin</DropDownButtonItem>
        <DropDownButtonItem Icon="@SvgIcon.Reddit" OnClick="@(()=>OnItemClick("Reddit"))">Reddit</DropDownButtonItem>
    </DropDownButtonItems>
</TelerikDropDownButton>

Description

When the dropdown is open, the input's aria-activedescendant attribute references an id that does not exist in the DOM. Since aria-activedescendant must point to the id of an actually rendered option element, the attribute is invalid and assistive technologies cannot determine which option is currently active.

Input renders:

aria-activedescendant="b45bcb14-4093-4de8-ad31-cae8ec8ca9c4"

Steps to Reproduce

1. Add a TelerikMultiSelect using the standard Telerik example (source below).
2. Open the dropdown and inspect the HTML or run a Lighthouse audit.

<TelerikMultiSelect Data="@Hobbies"
@bind-Value="@SelectedHobbyIds"
ValueField="@nameof(HobbiesDto.HobbyId)"
TextField="@nameof(HobbiesDto.HobbyName)"
Placeholder="Select your favourite sport..."
Id="multiselect"
Width="100%"
Rounded="@ThemeConstants.DropDownList.Rounded.Medium"
FillMode="@ThemeConstants.AutoComplete.FillMode.Outline"
TagMode="@MultiSelectTagMode.Single"
ShowClearButton="false">
    <MultiSelectSettings>
        <MultiSelectPopupSettings Height="@CustomThemeConstants.Multiselect.PopupHeight" MaxHeight="@CustomThemeConstants.Multiselect.PopupMaxHeight" />
    </MultiSelectSettings>
</TelerikMultiSelect>

@code {
    public List<int> SelectedHobbyIds { get; set; } = [];

    public IEnumerable<HobbiesDto> Hobbies { get; set; } = new List<HobbiesDto>()
    {
        new HobbiesDto(1, "Basketball"),
        new HobbiesDto(2, "Golf"),
        new HobbiesDto(3, "Baseball"),
        new HobbiesDto(4, "Table Tennis"),
        new HobbiesDto(5, "Volleyball"),
        new HobbiesDto(6, "Football"),
        new HobbiesDto(7, "Boxing"),
        new HobbiesDto(8, "Badminton"),
        new HobbiesDto(9, "Cycling"),
        new HobbiesDto(10, "Gymnastics"),
        new HobbiesDto(11, "Swimming"),
        new HobbiesDto(12, "Wrestling"),
        new HobbiesDto(13, "Snooker"),
        new HobbiesDto(14, "Skiing"),
        new HobbiesDto(15, "Handball"),
    };

    public class HobbiesDto
    {
        public int    HobbyId   { get; set; }
        public string HobbyName { get; set; } = string.Empty;

        public HobbiesDto() { }

        public HobbiesDto(int id, string name)
        {
            HobbyId = id;
            HobbyName = name;
        }
    }
}

The following exception occurs:

Microsoft.JSInterop.JSDisconnectedException: JavaScript interop calls cannot be issued at this time. This is because the circuit has disconnected and is being disposed.

............

at Telerik.Blazor.Components.Common.Loader.ComponentLoaderContainer.DisposeAsync()

When the user closes the browser and the web page contains any of the below components:

• DockManager
• FileManager
• Grid
• ListView
• PdfViewer
• PivotGrid
• Scheduler
• SpreadSheet
• TreeList

This public feature request:

• Explains how the TelerikRootComponent works.
• Outlines the problems of the current software design in static .NET 8 Blazor apps.
• Measures customer demand for a major change that may possibly resolve the current limitations.

How the TelerikRootComponent Works

Historically, the TelerikRootComponent was designed with the following purposes:

• To host and render all Telerik Blazor popups as RenderFragments. This means that all popups are rendered where the TelerikRootComponent is defined in the application's component hierarchy. In most cases, correct popup position requires the TelerikRootComponent to wrap all the content on the web page. Otherwise the correct position is not guaranteed and this is documented. In addition, the TelerikRootComponent instance is a CascadingValue, which allows it to collect all popup RenderFragments.
• The TelerikRootComponent exposes parameters for global application-wide Telerik settings, such as icon type or RTL support. This is another reason why it makes sense to have a single TelerikRootComponent that wraps all the page content.

Problems and Limitations in .NET 8 Blazor Static Apps

.NET 8 Blazor apps with "Per Component" interactivity location create a big challenge for the above state of affairs:

• Cascading values do not pass across render mode boundaries. .NET 8 includes a new feature for passing cascading values to interactive components (builder.Services.AddCascadingValues()), but this mechanism does not support passing of RenderFragments, because they are not JSON serializable. This brings the requirement that the TelerikRootComponent is part of an interactive component hierarchy.
• When the TelerikRootComponent is in a non-layout .razor file, it triggers more re-renders than normally. They are related to internal MediaQuery instances and all popups, which the root component manages.

So, developers who work with a globally static app with specific interactive components ("islands of interactivity") may need to:

• Place the TelerikRootComponent somewhere inside the component hierarchy, so it can't wrap all the page content. This will lead to wrong popup position.
• Use multiple TelerikRootComponents. This requires to define the same parameters for each TelerikRootComponent instance.

Next Steps

All developers who develop static .NET 8 Blazor apps with "Per Component" interactivity location:

1. Please vote for this feature request, so that we can measure how many customers are affected by the described limitations.
2. Post here and describe:
   • Why do you need to use apps with "Per Component" interactivity.
   • Your specific challenges with the current TelerikRootComponent setup.

Currently working on moving from winform to Blazor and found a feature not supported in Telerik atm.

Getting current error when trying to enable Virtualiztion inside a grid

Groupable is not supported with the Virtualization feature of Telerik Grid

Where im already setting grouping on one of the columns

It is a very common occurrence to need to open a menu link in a new tab. Currently the prescribed way to do this is to create a Template for the Menu Items. This involves a lot of manual implementation  (verbose template code,  helper methods, changing the menu item object to not use the Url property so as to override the default UrlField behavior). This is a lot of extra work to accomplish a very common and simple task. 

I propose that a new property be introduced to the Menu component (to be added to Menu Items) - a boolean field that defines whether or not to open the link in a new tab (i.e. "NewTab", or "External", or something of the like). It could default to false so that, in most cases, it could be ignored. But if set to true, the Menu component would handle adding "target='_blank'" and "rel='noopener noreferer'" to the link, while leaving all of the other functionality and styling in place. 

It would greatly simplify the usage. And I would suggest that every programming who is building navigation menus would have a case where it's needed.

I would think, though I haven't looked at the core code yet, that this would be a relatively simple feature to add.   

public class MenuItem
{
    public string Text { get; set; }
    public ISvgIcon? Icon { get; set; }
    public string Url { get; set; } = string.Empty;
    public bool NewTab { get; set; } = false;
    public List<MenuItem>? Items { get; set; }

    public MenuItem(string text, ISvgIcon? icon, string url, bool newTab, List<MenuItem>? items)
    {
        Text = text;
        Icon = icon;
        Url= url;
        NewTab = newTab;
        Items = items;
    }
}

Hello,

We want the grid column chooser to have a search bar for the user to search what column they need to add/remove to the grid.
We use many non-visible columns in our grid and allow the user to customize what they want to see via the column chooser.  
However, since the user cannot search the available columns they have to scroll with their mouse through a large list to find what they want.
(Notice the scroll bar in the following screenshot)

Thank you

Hi, 

   I have a new laptop with a fresh install of visual studio and telerik etc etc.  When I went to get the ai coding assistants to work, nothing I did worked.  Spent hours trying to figure it out when Claude suggested I install NODE.  After I did that, and went the the telerik blazor extension to "Configure MCP server globally" the ai worked.

   First, have the configuration check to see if node is working and installed and give a warning if it is not, or let people know that it needs to be installed to make it work.  Secondly, add this to the documentation.  Such a pain in the ass when the documentation isn't complete.  The amount of time i spent on this is stupid compared to how simple the solution was.

Peter

I would like a comopnent similar to this one https://demos.telerik.com/kendo-ui/dropdowntree/index

The goal is to be able to show and select hierarchical data, because the multiselect is flat https://demos.telerik.com/blazor-ui/multiselect/overview

Hello

I notice that zoom on chart with numeric values make the axis values with a lot of decimal and didn't find a way to round them.

We can see it directly in the documentation here

Is there a way to keep the axis to rounded value ?

Thank you
Regards,
Thomas

On a grid grouped by one or more fields, provide an option for end users to expand/collapse all rows at will. The following image is a suggestion of where this option (most likely a button) should appear:

We use QueryableExtensions.ToDataSourceResultmethod to load some data in our component. And at some moment we need to cancel data loading. But ToDataSourceResult method doesn’t support CancellationToken. So we are forced to use a workaround and just ignore the task's result. But task is still executing and causing the performance hit…

It would be great if you implemented support for this feature!

The TelerikPanelBar component is using Right and Left arrows on keyboard to opening and closing each tab. 
https://demos.telerik.com/blazor-ui/panelbar/keyboard-navigation

When the page is zoomed to 200%, it gets a horizontal scrollbar, which is normally controlled with the left and right arrow keys on keyboard. However, these keys are assigned to opening and closing the TelerikPanelBar component, which makes it impossible to scroll the page horizontally while we have Tab on TelerikPanelBar. Is there any workaround that would allow horizontal scrolling with the left and right arrow keys on keyboard at this zoom level? Maybe it’s possible to change TelerikPanelBar behavior and opening and closing it by different keys?