tabindex in React Upload Component

[SoH]

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}

/>

[Stefan]

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