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>

Page Down and Page Up buttons are not working until the user clicks on the scroll when virtual scrolling is enabled.

To reproduce the issue:

1. Open the following REPL example:

https://blazorrepl.telerik.com/QHYPQVFv55nHGRWV59

2. Focus on the Grid.

3. Try to scroll with the PageDown button.

When I override the IsValid method to return a ValidationResult the Incell & Inline edit modes allow the editing to be continued even if an invalid value is present. 

===

Telerik edit: A possible workaround is to cancel OnUpdate and possibly, OnEdit too. Here is a complete example:

https://blazorrepl.telerik.com/QyaWxkvv10stL8jB06

Hi Team,
I would like a parameter that allows users to select a time from the TimePicker popup without having to press Set.

Current behaviour
Selecting an hour or minute in the popup changes its internal pending selection, but does not update the bound Value or fire the public ValueChanged callback. Users must press Set to apply the selection. Clicking outside the popup discards it.

Requested behaviour
Please consider adding an AutoCommit Boolean parameter, defaulting to false to preserve existing behaviour.

When enabled:
- Each valid hour/minute selection immediately updates Value and fires ValueChanged.
- The popup stays open so users can adjust both hours and minutes.
- Clicking outside closes the popup and retains the latest selected time.
- Pressing Set is no longer required.

I have been trying to improve my Lighthouse score with Google and one of the items it is tagging is the "telerik-blazor.js" file.  I have seen new practices where the JavaScript is imported as needed, see this article here from Microsoft.

Can you please consider this in the future?

===

Telerik edit: A possible workaround is to build the Telerik JavaScript file without some of the components that you don't need.

Please support ColumnVirtualization in a Grid that also has multi-column headers (column bands) and locked columns, all three at once.

Follows ticket 1720022, where Ivan Danchev confirmed two defects in this combination (Telerik UI for Blazor 15.1.0, Blazor Server, ScrollMode Virtual, 45 columns of fixed px width in bands, the first band locked, Grid Width in px):

1. A band's header colspan is computed from its visible leaf columns and ignores the columns hidden by virtualization, so the header row goes out of step with the data rows and a band partly in view shows no title.

2. With any locked column the virtualizer merges every hidden column into one spacer cell. The spacer is a whole number of columns wide, so it cannot match an arbitrary scroll offset and leaves an empty strip, narrower than one column, between the locked block and the first scrolled column, in the header and every row. The spacer also carries the first hidden column's band into the header row.

Why it matters: on Blazor Server every rendered cell is a component held on the circuit. For our 45-column logbook grid the cells and loading placeholders are most of each user's memory (about 50 MB of render tree), and column virtualization would cut that by about two thirds. Wide data grids are usually grouped into bands with an identifying block locked on the left, so the combination is the normal case for a grid wide enough to need column virtualization.

Related: feedback items 1546425 and 1538964.

My users use Tab to focus the masked textbox and when they start typing (its content was highlighted because of getting focus with Tab), that typing action does not put the range (caret) in the correct place - it remains at position 0 rather than going to position 1.

For example, in the below phone mask they type "9" and then "0" and I would expect to get "90" but I get "0".

---

ADMIN EDIT

A workaround is to collapse the range when the input gets focus:

@inject IJSRuntime JsInterop

<input />
<span @onfocusin="@CollapseInputSelection" @ref="@ParentElem">
    <TelerikMaskedTextBox Mask="+1 (000) 000-0000"
                          IncludeLiterals="true"
                          @bind-Value="@CellPhoneNumber"
                          Class="form-control" />
</span>

@* move this script to an actual script file instead of using this hack *@
<script suppress-error="BL9992">
    function collapseInputSelection(root) {
        setTimeout(function () {
            var input = root.querySelector("input");
            if (input) {
                input.setSelectionRange(0, 0);
            }
        }, 20);
    }
</script>

@code{
    string CellPhoneNumber { get; set; }

    ElementReference ParentElem { get; set; }
    async Task CollapseInputSelection()
    {
        await JsInterop.InvokeVoidAsync("collapseInputSelection", ParentElem);
    }
}

---

I want the user to only be able to select times between, for example, 11AM and 1PM. Setting Min and Max does not limit that, I can select any time:

A RadioGroup inside a Grid EditorTemplate will fire OnBlur when the user clicks on it. This will close the edit cell and (usually) not apply the new value.

Here is a test page: https://blazorrepl.telerik.com/wvbmkMvd48rpMN4547

The code below compiles and doesn't give any browser errors when run, but when you collapse a row, all data is collapsed and you can't expand it again.

If you change the line that generates the data to use a List instead of IEnumerable it will work as expected.

REPRODUCIBLE

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected IEnumerable<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i));
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

WORKAROUND

<TelerikTreeList Data=Data
                 IdField="@nameof(Record.Id)"
                 ParentIdField="@nameof(Record.ParentId)"
                 Height="100%">
    <TreeListColumns>
        <TreeListCheckboxColumn CheckBoxOnlySelection="true" />
        <TreeListColumn Field="@nameof(Record.Text)" Title="" Expandable="true" />
        <TreeListColumn Field="@nameof(Record.Id)" Title="ID" />
        <TreeListColumn Field="@nameof(Record.ParentId)" Title="PARENT" />
    </TreeListColumns>
</TelerikTreeList>
@code {
    protected List<Record> Data = new List<Record>();

    protected override void OnInitialized()
    {
        Data = Enumerable.Range(1, 10).Select(i => new Record(i)).ToList();
    }

    public class Record
    {
        public Record(int i)
        {
            Id = i;
            if (i % 5 == 1)
                ParentId = null;
            else
                ParentId = (i - ((i - 1) % 5));
            Text = "Item " + i;
        }
        public long Id { get; set; }
        public long? ParentId { get; set; }
        public string Text { get; set; }
    }
} 

The ContextMenu components triggers a page scroll up on first opening. The problem may be specific to WebAssembly apps. Here is a test page with an applied workaround:

https://blazorrepl.telerik.com/wglavwvy31XgaQIJ18

The important code in the above example is:

<TelerikContextMenu @ref="@ContextMenuRef" />

@code {
    private TelerikContextMenu<ContextMenuItem> ContextMenuRef { get; set; }

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender && ContextMenuRef is not null)
        {
            await Task.Delay(1);
            await ContextMenuRef.ShowAsync(1, 1);
            await ContextMenuRef.HideAsync();
        }
    }
}

I'm trying to use the Blazor editor but the "Insert Image" function is very basic. Previously using Webforms & Core the insert image in the editor presented the user with a file management and image upload popup. Is this functionality available with the Blazor component?

=====ADMIN EDIT=====

Possible alternative:

1. Utilize a custom Editor's tool that opens a Window or Dialog containing a FileManager.
2. Use the FileManager's SelectedItemsChanged event to determine which image the user wants to insert into the Editor.
3. Programmatically execute the Editor's insertImage command.