Unplanned
Last Updated: 26 Jan 2022 13:36 by ADMIN
Created by: IT
Comments: 3
Category: DropDownList
Type: Bug Report
1

I'm using the Kendo Angular DropDownList component and I'm facing a couple of accessibility issues.

I got two issues, the same as those I get in my own application using the DropDownList component.
I've attached the output for both issues below.

First issue and an explanation of the issue and its solutions can be seen in the first attachment.

Second issue and an explanation of the issue and its solutions can be seen in the sercond attachment.

 

Completed
Last Updated: 18 May 2021 14:25 by ADMIN

1.) Use grouping functionality for the drop list's data.

2.) Have at least one item disabled. (Easiest to replicate if the first item is disabled)

3.) Click on dropdown to open the popup.

4.) If first item is disabled notice the group it belongs to is not displayed in the popup. If the first item isn't disabled scroll until disabled item is at the top of the list and the group information will be cleared.

 

Easily replicated if you modify the stackblitz from this page https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdownlist/grouping/ to disable the first item in the list

 

 

"Meat" should be displayed in that empty row at the top. Lines 12 and 26-28 are the only modifications made to the code found at the url above.

 

Declined
Last Updated: 16 Apr 2019 12:12 by ADMIN

In the example below "X-Small" is initially the selected item in the dropdown.  Once you click the "Sort" button and sort the array, "2X-Large" becomes the highlighted item in the dropdown but "X-Small" is displayed.  I would expect that "X-Small" would be highlighted.  After opening and closing the dropdown "2x-Large" becomes the selected item even if you don't select it.  The same behavior does not happen with a simple select dropdown.

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <form>
    <div>
      <p>T-shirt size:</p>
      <kendo-dropdownlist [data]="listItems" [(ngModel)]="selectedShirt" name="shirtsize">
      </kendo-dropdownlist>
    </div>
    <br/>
    <div>
    <select [(ngModel)]="selectedShirt" name="shirtsize2">
      <option *ngFor="let d of listItems">{{d}}</option>
    </select>
    </div>
    <br/>
    <button (click)="sortArray()">Sort</button>
  </form>
  `
})
export class AppComponent implements OnInit {
    public listItems: Array<string> = ["X-Small", "Small", "Medium", "Large", "X-Large", "2X-Large"];
    public selectedShirt: string;
    ngOnInit(){
      this.selectedShirt = this.listItems[0];
    }

    sortArray(){
      this.listItems.sort((a, b) => a.localeCompare(b));
    }
}