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>
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
- Add a TelerikDropDownButton using the standard Telerik example (source below).
- 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
- Add a TelerikMultiSelect using the standard Telerik example (source below).
- 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;
}
}
}
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:
- Please vote for this feature request, so that we can measure how many customers are affected by the described limitations.
- 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
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!
Magnifiable Image Component
A Blazor component designed to provide an interactive image magnification experience, similar to popular eCommerce websites.
Features
- Interactive Magnifier: On mouse hover, a magnifier appears beside the image, following the cursor and displaying a zoomed-in portion of the image. At the same time an overlay appears on the image indicating the zoomed-in portion of the image.
- Screen Space Awareness: The magnifier dynamically stretches to fill the available space to the right or left of the image, ensuring optimal use of the viewport and consistent margins.
- Popover Integration: Utilizes Telerik's Popover for the magnifier, ensuring it appears above all other UI elements and avoids clipping or stacking issues.
- Configurable Magnification: The magnification scale is configurable via the
MagnifyScaleparameter. - Accessibility: The image is wrapped in a button for keyboard accessibility, and all images support alt text.
- Full-Size View: Clicking the image opens a modal window displaying the image at its actual size.
Sample Code
MagnifiableImage.razor
@inject IJSRuntime JS
@using Microsoft.JSInterop
@* Container *@
<div @ref="_containerRef" class="@($"magnifiable-image-container {Class}")" style="height: @Height; width: @Width;">
@* Image *@
<button @onclick="@OnClick" class="magnifiable-image-button">
<img src="@Image.Src" alt="@Image.Alt" style="height: 100%; width: 100%;"
@onmousemove="@OnMouseMove" @onmouseenter="@OnMouseEnterAsync" @onmouseleave="@OnMouseLeave"/>
</button>
@* Magnifier *@
<TelerikPopover @ref="_popoverRef" AnchorSelector=".magnifiable-image-container" Position="@(_showOnRight ? PopoverPosition.Right : PopoverPosition.Left)" Offset="@MagnifierMargin"
Width="@($"{_magnifierWidth}px")" Height="@($"{_magnifierHeight}px")" Class="popover-magnifier" Collision="PopoverCollision.Fit">
<PopoverContent>
@* Magnified Image *@
<img src="@Image.Src" alt="@Image.Alt" class="magnified-image"
style="@($"width: {_magnifiedImageWidth}px; height: {_magnifiedImageHeight}px; transform: translateX({_magnifiedImageTransformX}px) translateY({_magnifiedImageTransformY}px); left: {_magnifiedImageLeft}px; top: {_magnifiedImageTop}px;")"/>
</PopoverContent>
</TelerikPopover>
@* Magnifier Overlay *@
@if (_isMouseOver)
{
<div class="magnifier-overlay"
style="@($"width: {_magnifierOverlayWidth}px; height: {_magnifierOverlayHeight}px; transform: translateX({_magnifierOverlayTransformX}px) translateY({_magnifierOverlayTransformY}px); left: {_magnifierOverlayLeft}px; top: {_magnifierOverlayTop}px;")))">
</div>
}
@* Actual Image *@
<TelerikWindow @bind-Visible="@_isClicked" Modal="true" CloseOnOverlayClick="true" Draggable="false" Resizable="false" Class="window-rounded">
<WindowActions>
<WindowAction Name="Close"/>
</WindowActions>
<WindowContent>
<img src="@Image.Src" alt="@Image.Alt"/>
</WindowContent>
</TelerikWindow>
</div>
<style>
.magnifiable-image-container {
position: relative;
display: inline-block;
cursor: zoom-in;
}
.magnifiable-image-button {
background: none;
border: none;
padding: 0;
margin: 0;
font: inherit;
color: inherit;
cursor: inherit !important;
outline: none;
box-shadow: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
display: block;
width: 100%;
height: 100%;
}
.magnifiable-image-button:focus-visible {
outline: none;
box-shadow: 0 0 0 2px color-mix(in srgb, var(--kendo-color-on-app-surface, #424242) 50%, transparent);
}
.popover-magnifier {
overflow: hidden;
border-radius: 0;
position: relative;
top: @(_adjustForTelerikFit ? $"{(_showOnBottom ? "" : "-")}{MagnifierMargin/4}px" : $"{(_showOnBottom ? "" : "-")}{MagnifierMargin}px");
}
.magnified-image {
position: absolute;
}
.magnifier-overlay {
position: absolute;
background: color-mix(in srgb, var(--kendo-color-primary, #1274AC) 15%, transparent);
pointer-events: none;
z-index: 5;
box-sizing: border-box;
display: block;
}
</style>
@code
{
[Parameter] public required ImageInfo Image { get; set; }
/// <summary>
/// The height of the image (e.g., "200px", "100%", or "auto"). Default is "auto".
/// </summary>
[Parameter]
public string Height { get; set; } = "auto";
/// <summary>
/// The width of the image (e.g., "200px", "100%", or "auto"). Default is "auto".
/// </summary>
[Parameter]
public string Width { get; set; } = "auto";
/// <summary>
/// The magnification scale for the magnifier. Default is 3 (3x magnification).
/// </summary>
[Parameter]
public double MagnifyScale { get; set; } = 3;
/// <summary>
/// Applies additional CSS classes to the MagnifiableImage's root element for custom styling and visual modifications.
/// </summary>
[Parameter]
public string Class { get; set; } = string.Empty;
private const int MagnifierMargin = 24;
// State for magnifier visibility and container reference
private bool _isMouseOver;
private bool _isClicked;
private ElementReference _containerRef;
private TelerikPopover? _popoverRef;
// Image and magnified image dimensions
private double _imageWidth;
private double _imageHeight;
private double _magnifiedImageWidth;
private double _magnifiedImageHeight;
// Magnifier position and size
private bool _showOnRight = true;
private bool _showOnBottom = true;
private bool _adjustForTelerikFit;
private double _magnifierWidth;
private double _magnifierHeight;
// Magnified image offset within the magnifier
private double _magnifiedImageLeft;
private double _magnifiedImageTop;
// Mouse position clamping bounds
private double _minMouseX;
private double _minMouseY;
private double _maxMouseX;
private double _maxMouseY;
// Mouse position and transform for magnified image
private double _mouseX;
private double _mouseY;
private double _magnifiedImageTransformX;
private double _magnifiedImageTransformY;
// Magnifier overlay size and transform
private double _magnifierOverlayWidth;
private double _magnifierOverlayHeight;
private double _magnifierOverlayLeft;
private double _magnifierOverlayTop;
private double _magnifierOverlayTransformX;
private double _magnifierOverlayTransformY;
private void OnClick()
{
_isClicked = true;
}
private async Task OnMouseEnterAsync()
{
_isMouseOver = true;
_popoverRef?.Show();
// Get layout info about the image container using getElementLayoutInfo from wwwroot/js/magnifiable-image.js
var containerLayoutInfo = await JS.InvokeAsync<ElementLayoutInfo>("getElementLayoutInfo", _containerRef);
// Store image size
_imageWidth = containerLayoutInfo.Width;
_imageHeight = containerLayoutInfo.Height;
_magnifiedImageWidth = _imageWidth * MagnifyScale;
_magnifiedImageHeight = _imageHeight * MagnifyScale;
// Determine magnifier position based on available space
_showOnRight = containerLayoutInfo.DistanceFromViewportRight >= containerLayoutInfo.DistanceFromViewportLeft;
_adjustForTelerikFit = Math.Abs(containerLayoutInfo.DistanceFromViewportBottom - containerLayoutInfo.DistanceFromViewportTop) < 20;
_showOnBottom = containerLayoutInfo.DistanceFromViewportBottom >= containerLayoutInfo.DistanceFromViewportTop;
// Calculate magnifier size based on available space
_magnifierWidth = _showOnRight
? containerLayoutInfo.DistanceFromViewportRight - MagnifierMargin*2
: containerLayoutInfo.DistanceFromViewportLeft - MagnifierMargin*2;
_magnifierHeight = containerLayoutInfo.ViewportHeight - MagnifierMargin*2;
// Center the magnified image in the magnifier
_magnifiedImageLeft = (_magnifierWidth / 2) - (_imageWidth / 2);
_magnifiedImageTop = (_magnifierHeight / 2) - (_imageHeight / 2);
// Calculate min and max mouse X/Y to prevent showing empty space in the magnifier
_minMouseX = Math.Floor((_magnifierWidth / MagnifyScale) / 2);
_minMouseY = Math.Floor((_magnifierHeight / MagnifyScale) / 2);
_maxMouseX = Math.Ceiling(_imageWidth - ((_magnifierWidth / MagnifyScale) / 2));
_maxMouseY = Math.Ceiling(_imageHeight - ((_magnifierHeight / MagnifyScale) / 2));
// Calculate magnifier overlay size and position
_magnifierOverlayWidth = Math.Floor(Math.Clamp(_magnifierWidth / MagnifyScale, 0, _imageWidth)) - 1;
_magnifierOverlayHeight = Math.Floor(Math.Clamp(_magnifierHeight / MagnifyScale, 0, _imageHeight)) - 1;
_magnifierOverlayLeft = -((_magnifierOverlayWidth / 2) + 1);
_magnifierOverlayTop = -((_magnifierOverlayHeight / 2) + 1);
}
private void OnMouseLeave()
{
_isMouseOver = false;
_popoverRef?.Hide();
}
private void OnMouseMove(MouseEventArgs e)
{
// Clamp mouse X/Y to prevent showing empty space in the magnifier
if (_minMouseX > _maxMouseX) _mouseX = _imageWidth / 2;
else _mouseX = Math.Clamp(e.OffsetX, _minMouseX, _maxMouseX);
if (_minMouseY > _maxMouseY) _mouseY = _imageHeight / 2;
else _mouseY = Math.Clamp(e.OffsetY, _minMouseY, _maxMouseY);
// Calculate the transform for the magnified image
_magnifiedImageTransformX = -Math.Round((_mouseX * MagnifyScale) - (_imageWidth / 2));
_magnifiedImageTransformY = -Math.Round((_mouseY * MagnifyScale) - (_imageHeight / 2));
// Calculate the transform for the magnifier overlay
_magnifierOverlayTransformX = Math.Round(_mouseX);
_magnifierOverlayTransformY = Math.Round(_mouseY);
_popoverRef?.Refresh();
}
private record ElementLayoutInfo(
double Width,
double Height,
double ViewportHeight,
double DistanceFromViewportLeft, // distance from viewport's left edge to element's left edge
double DistanceFromViewportRight, // distance from element's right edge to viewport's right edge
double DistanceFromViewportTop, // distance from viewport's top edge to element's top edge
double DistanceFromViewportBottom); // distance from element's bottom edge to viewport's bottom edge
}magnifiable-image.js
// Returns width, height, and the space to the left and right of the element relative to the viewport
window.getElementLayoutInfo = (element) => {
if (!element) return null;
const elementRect = element.getBoundingClientRect();
return {
width: elementRect.width,
height: elementRect.height,
viewportHeight: window.innerHeight,
distanceFromViewportLeft: elementRect.left, // distance from viewport's left edge to element's left edge
distanceFromViewportRight: window.innerWidth - elementRect.right, // distance from element's right edge to viewport's right edge
distanceFromViewportTop: elementRect.top, // distance from viewport's top edge to element's top edge
distanceFromViewportBottom: window.innerHeight - elementRect.bottom // distance from element's bottom edge to viewport's bottom edge
};
};Note
Only tested in Blazor WebAssembly. The component may see performance issues in Blazor Server.
Please expose the popup collision settings of the Popup and Popover components to all other applicable components, such as:
- AutoComplete
- ColorPicker
- ComboBox
- DropDownList
- DatePicker
- DateRangePicker
- DateTimePicker
- MultiColumnComboBox
- MultiSelect
- TimePicker
- Tooltip
I realize we can build Blazor components to associate "label" to controls, but IMHO, this should come standard with any control tool set. Reasons:
1. Coding simplicity
2. Automatic theme inheritance
3. Flexibility in label positioning relative to the control (left, right, top, bottom)
Example:
<TelerikCheckBox Label="Is Chasssis" LabelPosition="left" @bind-Value="equipment.IsChassis"/>
I realize you folks put some effort into a "Floating Label", but my users have rejected this implementation because:
1. Having Text in a label as a means to identify the label makes them think a value is already provided (so they try to remove it or call for support).
2. When typing in the label and the appearance of the label identification appears above adds to their confusion as they are used to seeing validation errors appearing above a label.
Hi,
is it possible to add control of vertical timeline like this (https://antblazor.com/en-US/components/timeline) with extra features like:
- adding new items with button on top
- inline edit
- item selection
- item actions
I also attached image of what i build based on control from link above, I would like to implement something similar with Telerik.
Maybe you can recommend some other controls to replace it with?
Thank you :)
_close_crop.png){kind=avatar}
