Cascading dropdown with filter fails 508 accessibility test

[Mark]

My application was recently tested for 508 compliance. I have a cascading dropdown section on one form. First dropdown is a standard dropdown and the second is a filterable dropdown. When I select an option from the first, open the second and type, I am unable to navigate to the options to select one with the keyboard.

I was able to replicate this in the example code by making the second dropdown filterable (NOTE: I'm returning all the data when filtering for simplicity). See below:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DropDownList, DropDownListChangeEvent, DropDownListFilterChangeEvent } from "@progress/kendo-react-dropdowns";
import { dataCategories, dataProducts, dataOrders } from "./data";
import { filterBy } from '@progress/kendo-data-query';

const defaultItemCategory = { categoryName: "Select Category ..." };
const defaultItemProduct = { productName: "Select Product ..." };
const defaultItemOrder = { orderName: "Select Order ..." };

const App = () => {
  const [state, setState] = React.useState({
    category: null,
    product: null,
    order: null,
    orders: dataOrders,
    products: dataProducts
  });

  const categoryChange = (event: DropDownListChangeEvent) => {
    const category = event.target.value;
    const products = dataProducts.filter(
      product => product.categoryId === category.categoryId
    );

    setState({
      ...state,
      category: category,
      products: products,
      product: null,
      order: null
    });
  };

  const productChange = (event: DropDownListChangeEvent) => {
    const product = event.target.value;
    const orders = dataOrders.filter(
      order => order.productId === product.productId
    );

    setState({
      ...state,
      product: product,
      orders: orders,
      order: null
    });
  };

  const orderChange = (event: DropDownListChangeEvent) => {
    setState({ ...state, order: event.target.value });
  };

  const ddlProducts_onFilterChange = (event: DropDownListFilterChangeEvent) => {
    setState({ products: state.products });
  }



  const category = state.category;
  const product = state.product;
  const order = state.order;

  const hasCategory = category && category !== defaultItemCategory;
  const hasProduct = product && product !== defaultItemProduct;

  return (
    <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
      <div>
        Categories
        <br />
        <DropDownList
          style={{ width: '300px' }}
          data={dataCategories}
          textField="categoryName"
          onChange={categoryChange}
          defaultItem={defaultItemCategory}
          value={category}
        />
      </div>
      <div>
        Products
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasCategory}
          data={state.products}
          textField="productName"
          onChange={productChange}
          defaultItem={defaultItemProduct}
          value={product}
          filterable={ true }
          onFilterChange={ ddlProducts_onFilterChange }
        />
      </div>
      <div>
        Orders
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasProduct}
          data={state.orders}
          textField="orderName"
          onChange={orderChange}
          defaultItem={defaultItemOrder}
          value={order}
        />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("my-app"));

Is this a known issue? Please advise.

Thanks in advance

[Filip]

Hello, Mark,

I created an example using the provided logic and was able to reproduce the described behavior. After further debugging, it seems that `ddlProducts_onFilterChange` function, is resetting the products state to its initial value every time the filter changes, which could interfere with the dropdown's ability to update and navigate through the filtered options correctly.

A possible solution is to adjust  `ddlProducts_onFilterChange` function to filter the products based on the user's input. Here is an updated example:

https://stackblitz.com/edit/react-qbsmgr-eanb6i?file=app%2Fmain.tsx

I hope this helps but please let us know in case further assistance is required.

Regards,
Filip
Progress Telerik

[Mark]

Filip,

Thank you very much for your response. I updated my method to the following:

  public ddlLocation_onFilterChange(event: any): void {
  
    const filterValue =  event.filter.value;

    const filterLocations = filterBy(this.state.locationsByComponentAll, {
      field: 'Title',
      operator: 'contains',
      value: filterValue
    });

    this.setState({ ...this.state, locationsByComponent: filterValue ? filterLocations : this.state.locationsByComponentAll });
  }

After doing so, I'm still experiencing the same issue. The dropdown is filtered but I am unable to use the down cursor to enter the list and select one.

I did notice that you are using version 7.0.2 of the dropdown whereas I'm using version 5.17.0. Do you think this could be the problem?

Thank you,

Mark

[Filip]

Hi, Mark,

I tested the example with version 5.17.0 in order to reproduce the issue, however I was not able to this time. It is indeed possible that the older version is causing this behavior I can recommend upgrading to the latest as that might resolve it.

If upgrading does not resolve the undesired behavior or it is not an option can you please send us a runnable example where the issue is isolated? This way I can debug it locally and see what is causing it.

Regards,
Filip