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

Hi All:

I am using the listBox component and found that the list cannot be selected through tabs or the up and down arrows on the keyboard. It can only be operated through the up and down buttons on the toolbar.

Is it not supported?
Looking forward to your reply, thanks in advance

Xeehhs (forked) - StackBlitz

Hi Kendo,

    We're trying to utilize the KendoReact ListBox and noticed that the widget is not keyboard accessible (kendo demo). Arrow keys explicitly don't seem to do anything, so without a mouse you have no way to traverse and use the widget's available options.

     We expected it to behave like a traditional HTML listbox/select (dojo demo), which does fully support keyboard navigation and selection/deselection. Is there a way to implement this effectively?

Tested Chrome Version 117.0.5938.92 (Official Build) (64-bit)

Hey everybody,

would like to use Gantt control on a tablet. but there don't seem to be any touch events, nor can I scroll. Did I miss something?

Regards

unstable selection of embedded tables. If I open row, it jumps to the table, but If I go back, I can't return to the table inside the cell.

demo: Vsj5kn (forked) - StackBlitz, You can open it in a new window and use the tab stop operation.

The order of my operations is: Tab, down arrow, down arrow, Enter, down arrow, down arrow, down arrow,  Shift+Tab, Tab

or Tab, down arrow, down arrow, Enter, down arrow, down arrow, down arrow,  Shift+Tab,  up arrow, up arrow,  down arrow, down arrow, Tab.

Only for the first time, can reach the position of the red circle through the tab stop, and go back, cannot enter it again.

Thanks a lot for an each help.

Regards,
Sunny Hu

when jumping in the title of the table, selection goes under fixed columns and becomes invisible, it scrolls the table to the right after few more jumps.

The demo below is to simulate our business scenario

3oqybd (forked) - StackBlitz (code)

react-t4bmp9.stackblitz.io (Open the page verification tab stops)

As you can see in the picture above, the first and last columns are locked, because the grid's scroll bar is for the entire table instead of the unlocked column.
So when using the tab key to select the fourth and fifth columns, since the width of the Grid has not yet been exceeded, the scroll bar does not scroll, resulting in the selection of the fourth and fifth steps being invisible under the locked column

The scroll bar only scrolls when the tab key reaches the sixth step.

How could I solve this problem? please let me know if you have any questions?

Hi All,

IS there any chance to add keyboard event support like tab stop for Chart component interaction events?

Or is there any demo to best practice of doing that?

Is there an out of the box, or an example of a customization, for adding pattern fills to Charts?

I know that custom svg treatments can be added via the ChartSeriesItem visual prop but I wasn't sure if that was the correct approach or if there was a simpler method.

I also want to understand if all charts can have pattern fills or if there are limitations.

We are doing an accessibility audit and adding patterns was suggested as an accessibility enhancement.

Thanks in advance.

Hi,

As the title, the seleted DrawerItem is not visible in windows high contrast theme.

I selected the last menu (Favourites) and there is nothing to indicate that.

Is there any plan to add some indicator?

Thanks!