Hi, I just came accross a bug in the TelerikStepper.

I try to create a custom version that switches to a custom success icon after a step is completed.
It contains the following codesnippets:

<TelerikStepper Linear="true" ValueChanged="@HandleValueChanged">
    <StepperSteps>
        @for (int i = 0; i < IsValidArray.Length; i++)
        {
            <StepperStep Valid="@IsValidArray[i]"></StepperStep>
        }
    </StepperSteps>
</TelerikStepper>

@code {
    bool?[] IsValidArray = [null, null, null, null];

    public void HandleValueChanged(int index)
    {
        for (int i = 0; i < IsValidArray.Length; i++)
        {
            IsValidArray[i] = index > i ? true : null;
        }
    }
}

Forward it works like expected:

When moving backwards it behaves strange:

Except if you are debugging (Visual Studio debugger), then everything works as expected:

Same thing can be achived when not debugging but clicking on the step a second time

According to the latest accessibility standards "aria-label" is needed upon using multiple Stepper components for differentiation.

"Unable to differentiate <nav> landmarks (e.g. site navigation) when more than 1 <nav> is on a page, Stepper contains a <nav> landmark with no aria-label or aria-labelledby attribute"