Hi,

The KendoReact DropDownList fails WCAG 1.3.1 when not expanded as per axe DevTools. This can be seen on the Getting Started page for the DropDownList https://www.telerik.com/kendo-react-ui/components/dropdowns/dropdownlist/

The issue is: "Ensures elements with an ARIA role that require child roles contain them" and the proposed resolution is "Required ARIA child role not present: option".

The HTML from the basic DropDownList on the Getting Started page is as follows:

<span role="listbox" tabindex="0" class="k-dropdown-wrap" aria-haspopup="true" aria-expanded="false" aria-owns="1aaf8d2f-7bcc-4876-82cf-6b8ec7bfb31f">
	<span class="k-input"></span>
	<span class="k-select">
		<span class="k-icon k-i-arrow-s"></span>
	</span>
	<select tabindex="-1" aria-hidden="true" style="opacity: 0; width: 1px; border: 0px; z-index: -1; position: absolute; left: 50%;">
		<option></option>
	</select>
</span>

It appears as if the issue is that the <option> is not a direct descendant of the <span> with the "listbox" role. The <span> has an aria-owns element which can be used to resolve this issue, but it contains a unique identifier that doesn't appear anywhere else on the page.

I have done two tests: I have shifted the role="listbox" attribute to the <select> and I have left the role on the outer <span> and added an id="unique-identifier" to the <option>. In both cases the issue is resolved. However, the issue may also be that when hidden the outer span shouldn't have role="listbox".

I believe this is a bug.

Kind regards,

David

Hello,

I've this warning on page loading 

Warning: React does not recognize the `firstDate` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `firstdate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    in td (created by CalendarWeekCell)
    in CalendarWeekCell (created by View)

<div>
<DatePicker
    name="OperationDate" className="OperationDate"
    defaultValue={fromData.Date}
    format="dd/MM/yyyy"
    width={116}
    tabIndex={8}
    weekNumber={true}
    weekCell={CustomWeekCell}
    onChange={this.handleChange}
    {...this.props} />
</div>

I defined this const to resolve this issue :

But it's no effect

a part of my package.json below :

Do you known how resolve this issue (it's a big warning in my JS console) ?

Thank you

There are two charts: the first one at the top and the second one at the bottom of the page.

I need chart areas to be aligned, for this, it's necessary to set Y-axis to some fixed width.

How this can be achieved?

Thanks!

edit:

Attached example of what should be aligned.

Hello, im using KendoReact Window component and i need to disable keyboard movements with arrow keys, how do i do that?

here are the things i've tried:

1) set draggable={false} prop( window can't be dragged by mouse but arrow keys still work)

2) attach global on keydown event listener and use event.preventDefault(); ( window keeps keyboard movements and firing along side with the attached keydown listener functions )

Hi,

We are using IntlProvider with en-AU locale. The locale appears to be the only prop available. We have centralised the specification of dates which allows for consistent display of dates throughout the application except for grid date column filters. The en-AU locale at least results in a filter format of day/month/year e.g. 5/7/2021, however this doesn't match our preferred format of dd/MM/yyyy i.e. 05/07/2021.

Is there any way to specify the default date format through the IntlProvider? If not, is there anything we can do to force the grid date column filter to inherit the format specified on the column?

We would like to avoid having to implement a custom filter from scratch just for the date format, however if this is the only solution, do you have an example of how to reproduce the default filter (i.e. 2 x logical operator dropdown and datepicker with clear and filter buttons) as a custom filter where the DatePicker format can be specified?

Kind regards,

David

Hi,

I'm trying to satisfy WCAG 2 requirements using KendoReact Charts. The only documentation I can find is specific to jQuery: https://docs.telerik.com/kendo-ui/accessibility/five-tips-for-accessible-charts-with-dataviz

The first approach discussed (Providing Text Descriptions) would satisfy requirements but uses a visible figcaption for the long description which is not ideal. Is there any way to set KendoReact Chart svg title and description? If not, is there another approach we can use?

Kind regards,

David

Hi,

When group by column, aggregations shown at group footer, need same values at groupHeader column level.

Please review the attached image.

Thanks,

Hi

I'm using the PDF processing and I'm having trouble with Arabic language all text are not drawing correctly (Please view attached pic) I've tried almost all solutions in the net with no luck .

Please help

Thank You

Monty

I am using the helper function process, like this example

https://www.telerik.com/kendo-react-ui/components/dataquery/bulk-operations/ 

const data = [
    { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
      "category": { "categoryName": "Beverages" }
    },
    { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Cajun Seasoning", "unitPrice": 22, "unitsInStock": 53, "discontinued": false,
      "category": { "categoryName": "Condiments" }
    },
    { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
      "category": { "categoryName": "Condiments" }
    }
];

const result = process(data, {
    group: [{
        field: 'category.categoryName',
        aggregates: [
            { aggregate: "sum", field: "unitPrice" },
            { aggregate: "sum", field: "unitsInStock" }
        ]
    }],
    sort: [{ field: 'productName', dir: 'desc' }],
    filter: {
        logic: "or",
        filters: [
            { field: "discontinued", operator: "eq", value: true },
            { field: "unitPrice", operator: "lt", value: 22 }
        ]
    }
});

I am expecting the result like the example

{
  "data": [
    { "aggregates": {
        "unitPrice": { "sum": 53.35 },
        "unitsInStock": { "sum": 66 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Gumbo Mix", "unitPrice": 21.35, "unitsInStock": 0, "discontinued": true,
          "category": { "categoryName": "Condiments" }
        },
        { "productName": "Aniseed Syrup", "unitPrice": 10, "unitsInStock": 13, "discontinued": false,
          "category": { "categoryName": "Condiments" }
        }
      ],
      "value": "Condiments"
    },
    {
      "aggregates": {
        "unitPrice": { "sum": 37 },
        "unitsInStock": { "sum": 56 }
      },
      "field": "category.categoryName",
      "items": [
        { "productName": "Chang", "unitPrice": 19, "unitsInStock": 17, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        },
        { "productName": "Chai", "unitPrice": 18, "unitsInStock": 39, "discontinued": false,
          "category": { "categoryName": "Beverages" }
        }
      ],
      "value": "Beverages"
    }
  ],
  "total": 4
}

But I actually got this, which is not ordering by the product name, but order by the category name and then product name

{
  data: [
    {
      aggregates: {
        unitPrice: {
          sum: 37,
        },
        unitsInStock: {
          sum: 56,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Chang",
          unitPrice: 19,
          unitsInStock: 17,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
        {
          productName: "Chai",
          unitPrice: 18,
          unitsInStock: 39,
          discontinued: false,
          category: {
            categoryName: "Beverages",
          },
        },
      ],
      value: "Beverages",
    },
    {
      aggregates: {
        unitPrice: {
          sum: 31.35,
        },
        unitsInStock: {
          sum: 13,
        },
      },
      field: "category.categoryName",
      items: [
        {
          productName: "Gumbo Mix",
          unitPrice: 21.35,
          unitsInStock: 0,
          discontinued: true,
          category: {
            categoryName: "Condiments",
          },
        },
        {
          productName: "Aniseed Syrup",
          unitPrice: 10,
          unitsInStock: 13,
          discontinued: false,
          category: {
            categoryName: "Condiments",
          },
        },
      ],
      value: "Condiments",
    },
  ],
  total: 4,
}

How can I achieve the result in the example?