tabindex in React Upload Component

2 posts, 0 answers
  1. SoH
    SoH avatar
    9 posts
    Member since:
    Jun 2017

    Posted 09 Nov 2020 Link to this post

    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}
    />
  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 10 Nov 2020 Link to this post

    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/.

Back to Top