Actual results:
Aria label attribute is not defined for button in 'Insert image' dialogue.
Narrator is announcing as 'No file chosen, choose file, button'.
Expected results:
Aria label attribute should be defined for button in 'Insert image' dialogue.
User Impact:
Adding effective form labels is absolutely necessary to make forms accessible. The purpose of form elements such as a checkboxes, radio buttons, input fields, etc. is often clear for sighted users, even if the form element is not programmatically labeled. This isn't usually the case for screen reader users. Adding a label to all form elements eliminates ambiguity and contributes to a more accessible product.
Actual results:
Expected results:
Interactive control elements have focusable descendants.
User Impact:
When interactive elements have an incorrect name and role, it is difficult for people using assistive technology (like screen readers) to understand the purpose of control and its relationship to other content. Knowing the role for a control helps users know what will happen when that object has focus and is selected, as well as what keyboard shortcuts to use when interacting with the control.
We have two issues with grid with virtual scroll.
Both are registered on github.
First one is really blocking us: https://github.com/telerik/kendo-react/issues/1010
Second one we found on Safari, it's also very critical for our customers: https://github.com/telerik/kendo-react/issues/1013
Version: 4.7.0. Please note that version specified in Additional information does not make sense as we use Kendo React not Kendo UI.
Can you help us somehow?
Hi Team,
I'm facing below issue when manually enter the value in the datepicker.
Control : DatePicker
<DatePicker defaultValue={value} format="dd/MM/yyyy" />
Step 1: Manually I'm trying to enter the data as 01/01/2021 and clicked outside the datepicker control ( now the focus is out of the datepicker ).
Step 2: Now try to change the date (day) by entering "2". (Our Expectation is system should display the date as 02/01/2021 instead it is appending the date and displaying as 12/01/2021)
Every time system is expecting the user to clear the existing value and then enter the new value.
Can you take this as feature request. Value should not get append to existing value. It should overwrite.
Reference Ticket URL : https://www.telerik.com/forums/datepicker-when-user-enter-the-date-manually-the-value-getting-appended-with-the-previous-value
If this is taken as feature request when will it get delivered.
The ListView component has an item prop that allows you to specify the render component. That component receives ListViewItemProps. The ListViewItemProps type is not exported and cannot be properly imported elsewhere.
Looking for callback for what item was dragged or resized.
coz we have as well Charts(HighCharts) inside not automatically resizing and we need to determine what item was resized to be able to trigger charts inside to redraw.
https://github.com/telerik/kendo-react/issues/865
Actual Result:
After invoking 'table' button, user is unable to select the size of the table i.e, Keyboard focus is not going to 'Insert row and column cell components.
Tab index property is not defined.
Expected
Control(s) must be accessible to keyboards and other assistive technology. Common causes of this problem include a) the element does not have a proper role assigned, b) the element needs tab-index="0" attribute to be focusable, or c) the component is not registering keypresses.
User should be able to navigate to insert row and column cell components to select the size of the table.
User Impact
When interactive components are not accessible, assistive technology users are blocked, which leads to everything from inaccessible content, features, and functionality, up to entire applications or sites.
Actual Result:
User is unable to navigate to 'upload' button in 'insert image' dialogue. On invoking 'insert image' dialogue focus is navigating in the background and after navigating whole page then focus is going to the 'insert image' dialogue. Now, when user try to upload the image, focus is going out of the dialogue (going to the top of the page).
Expected Result:
When focus order does not follow the visible reading order, the experience can create a different interaction pattern, and/or unintended content relationships for assistive technology users. On rare occasions, there is a logical reason the focus order is different from the reading order, but the meaning of the content and interactions must remain the same.
Actual Result:
On navigating to colors, Narrator is staying mute and not announcing anything.
Expected
On navigating to colors, Narrator should announce the name of the color.
When interactive elements have an incorrect name, it is difficult for people using assistive technology (like screen readers) to understand the purpose of control and its relationship to other content.
Actual results:
Elements with Aria role is not containing child role with in them.
Expected results:
Elements with Aria role should contain child role with in them.
User Impact:
For each role, WAI-ARIA explicitly defines which child and parent roles are allowable and/or required. ARIA roles missing required child roles will not be able to perform the accessibility functions intended by the developer.
Actual results:
aria-label is not defined for ‘Reply editor’ when the keyboard focus is on 'Reply’ edit box narrator is announcing as “Editing End of line”.
Expected
All components need an accessible name, ideally using semantic elements and attributes. In rare cases, aria-label or aria-labelled by may be needed to alter the name. Learn more by reading about the accessible name property.
User Impact
When interactive elements have an incorrect name, it is difficult for people using assistive technology (like screen readers) to understand the purpose of control and its relationship to other content.
Hi Team,
we are looking same property in Kendo Tree View React Version.
https://docs.telerik.com/kendo-ui/api/javascript/ui/treeview/configuration/dataspritecssclassfield
could you pls check the feasibility and add the same?
Actual Result:
While navigating in table, Narrator is not announcing as 'enter table' and it is also not announcing rows and column information. while navigating in table, With arrow keys or table navigation keys or tab key, Narrator is announcing as 'end of line/blank'.
With caps-arrow keys, Narrator is giving row and column information.
Expected
While navigating in table, Narrator should announce as enter table and it should also give row and column information. And while navigating with arrow keys or table navigation keys or tab key, Narrator should not announce as 'end of line/blank' instead it should give row or column information
Hi,
I've got a large form I'm making. When the page the form is on first renders, I maker a server call and get back a large javascript object:
serverData = {id: "1", ClientID: "1423", EstSentDate: "2021-07-08", .... }. The date strings are ODCB standards for date strings.
The form displays the current values of all these fields. For all the other field types, I give the form the prop initialValues={serverData}, and if the field names match the object keys, it populates the field with the data nicely.
The datePicker is encountering an error though. It looks like it expects a Date object and not just a string. Is there something I can do within the DatePicker component, or the field containing it, to resolve this, without having to parse the entire data set I receive for all dates and convert them to Date objects, and feed that into a new object to pass to the form?
Being able to populate the entire form with the simple line initialValues={serverData} would be the best outcome for us.
Hello,
I am using tooltip component for a long desciption field in my grid cell. And I am using it as it will encapsulate Grid component (like the example below) as it is suggested in this page.
<Tooltip openDelay={100} position="right" anchorElement="element"> <Grid>... </Grid> </Tooltip>
My grid has a date field and I am using columnMenu for filtering (GridColumnMenuFilter). An error occurs when I hover the text of date field and says :
Tooltip(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.
I also trid to replicate the problem in the example on this page and it gives the same error. I forked the project and you can check it from https://react-ed5jns.stackblitz.io/
Simply move the cursor over month/day/year in a date filter area and see the problem. This seems like a bug. Or if there is any solution to this, I would like to see a workaround.
Thanks
Hi,
I would like to be able to specify a Grid Column template for the data without having to replicate the entire cell and its properties. Please see below for justification:
Consider the following example of KendoReact Grid Cell customisation: https://www.telerik.com/kendo-react-ui/components/grid/styling/#toc-adding-custom-cells
Following this approach results in the loss of a lot of properties from the grid cell compared with 'default' cells e.g.
<td colspan="1" class="" role="gridcell" aria-colindex="1" aria-selected="false" data-grid-col-index="0">Chai</td>
<td style="background-color: rgba(55, 180, 0, 0.32);">18 <span class="k-icon k-i-sort-asc-sm"></span></td>
These properties are important for many reasons including accessibility. There is another example of KendoReact Grid Cell customisation that preserves these properties here: https://www.telerik.com/kendo-react-ui/components/grid/cells/#toc-customization
e.g.
<td colspan="1" class="" role="gridcell" aria-colindex="4" aria-selected="false" data-grid-col-index="3">39</td>
<td colspan="1" role="gridcell" aria-colindex="5" aria-selected="false" data-grid-col-index="4" style="color: red;">false</td>
However, there is a considerable amount of code required to achieve this:
const CustomCell = (props) => {
const field = props.field || "";
const value = props.dataItem[field];
const navigationAttributes = useTableKeyboardNavigation(props.id);
return (
<td
style={{
color: value ? props.myProp[0].color : props.myProp[1].color,
}}
colSpan={props.colSpan}
role={"gridcell"}
aria-colindex={props.ariaColumnIndex}
aria-selected={props.isSelected}
{...{
[GRID_COL_INDEX_ATTRIBUTE]: props.columnIndex,
}}
{...navigationAttributes}
>
{value === null ? "" : props.dataItem[field].toString()}
</td>
);
};
I would like to be able to define a template for a cell without having to specify these properties every time.
Kind regards,
David
Hi,
The Kendo React Form Handle Submit event provides complete data over all fields, even the unchanged ones. While this is good for traditional submits, we are building upon a REST service that has HTTP patch support, wherein we intend to submit only those fields (properties) that have changed.
While a deep compare with initialValues and handleSubmit data property is possible, we were wondering if the Kendo Form component itself has some property Or method that allows us to get the changed values only. This will save us the deep compare efforts, time and issues, especially with forms that have hundreds of fields.
If Kendo library has some deep compare method available, please do include that as well.
Kindly advise.
Currently the TileLayout will allow you to drag a Tile when you click and drag anywhere within the Tile. This doesn't combine very well with content within a Tile that might have click-and-drag functionality or even just click functionality. A small click within a Tile causes the Tile to visually "lift up" in preparation for dragging.
It'd be nice if there were a setting to enable dragging only on the Tile header portion or somewhere.
Currently I have to add a toggle somewhere on the page that disabled or enables dragging.