This is a migrated thread and some comments may be shown as answers.

tabindex in React Upload Component

1 Answer 35 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
SoH
Top achievements
Rank 1
Veteran
SoH asked on 09 Nov 2020, 05:28 PM
The Upload <li class="k-file"> gets a tabindex="-1" inserted

and the Upload button also:

<button type="button" tabindex="-1" class="k-button k-button-icon k-flat k-upload-action"><span aria-label="Remove" title="Remove" class="k-icon k-delete k-i-x"></span></button>

 

I've tried overriding this by adding tabindex={0}, but this is not working.

 

I need to be able to tab to the Upload li (or it's div parent) and button?

How can I override the insertion of tabindex="-1"?

 
<Upload
    autoUpload={false}
    showActionButtons={false}
    batch={false}
    multiple={false}
    files={props.files}
    onAdd={e => props.onAdd(e)}
    onRemove={e => props.onRemove(e)}
    onProgress={e => props.onProgress(e)}
    onStatusChange={e => props.onStatusChange(e)}
    tabindex={0}
/>

1 Answer, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 10 Nov 2020, 06:10 AM

Hello,

This is because the Upload has its own built-in keyboard navigation which internally manages the focused element:

https://www.telerik.com/kendo-react-ui/components/upload/keyboard-navigation/

If we add a tabindex to the element, this could interfere with the built-in navigation and results is unexpected focused elements.

If there is a specific issue using the built-in navigation, please let me know and I will be happy to assist further.

Regards,
Stefan
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
SoH
Top achievements
Rank 1
Veteran
Answers by
Stefan
Telerik team
Share this question
or