navigatable={true} not working in kendo react grid

7 posts, 0 answers
  1. A
    A avatar
    9 posts
    Member since:
    Feb 2015

    Posted 24 Apr 2020 Link to this post

    Hi Team,

    Navigatable={true} not working in kendo react grid

    also i am unable to find navigation  of react kendo documentation

    https://www.telerik.com/kendo-react-ui/components/grid/api/GridProps/

     

    Is there a way i can implenment navigatable = {true} in react kendo grid

  2. A
    A avatar
    9 posts
    Member since:
    Feb 2015

    Posted 24 Apr 2020 Link to this post

     

    Actual Result:
     
    Keyboard focus indicator is not visible on table column headers element “Customer Segment” when navigating the column header using the tab key.
     
     
     
    Expected Result:
     
    Keyboard focus indicator(s) should be clearly visible on element “Customer Segment” when navigating the column header using the tab key.
  3. A
    A avatar
    9 posts
    Member since:
    Feb 2015

    Posted 27 Apr 2020 Link to this post

    We are using kendo-react-grid

  4. A
    A avatar
    9 posts
    Member since:
    Feb 2015

    Posted 28 Apr 2020 Link to this post

    Also, when i click to sort the luminosity is too low. is there a way we can increase that

     

  5. A
    A avatar
    9 posts
    Member since:
    Feb 2015

    Posted 29 Apr 2020 Link to this post

    Also Table header are not associated with the table data.

    Actual Result:
    When focus moves to the table Screen reader does not announce the Table header with the table data.Here screen reader announce as 'Column 3 Commercial Bangalore'. 

    Observation :
    1. Here when focus lands on the table NVDA does not announce the information of the rows and column.
    2. NVDA does not announce information for empty cell of table as blank when  while navigating using table short cut keys(Ctrl+Alt+Arrows).

    Expected Result:
     
    When focus moves to the table Screen reader should announce the Table header with the table data.
    Ex:Here screen reader should  announces as 'Column 3 Commercial Bangalore Line of  business button' 
     
     
     
  6. Stefan
    Admin
    Stefan avatar
    3039 posts

    Posted 29 Apr 2020 Link to this post

    Hello,

    The KendoReact Grid does not have a built-in keyboard navigation logic, as our experience showed us that this can cause different issues. For example, we may make a feature to save on a specific command, but this is not acceptable for each project as this combination can be used for something else. Also, some user base may want to navigate the Grid with a tab and another with arrow keys.

    This is why we have made an article that we continuously improve with the most common keyboard navigation cases on how to achieve them:

    https://www.telerik.com/kendo-react-ui/components/grid/accessibility/#toc-common-keyboard-navigation-scenarios

    As for sort the luminosity, we add the class `k-sorted` and that class can be used to change the luminosity with CSS:

    .k-grid .k-sorted {
      background-color: red; // add any needed style to achieve the desired effect
    }

     

    ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

    As for the accessibility issues, I answered them in the other ticket. Still, I will post the same answer here for visibility:

    1)  When focus moves to the table Screen reader do not announce the Table header with the table data. Here screen reader announces as 'Column 3 Commercial Bangalore'.  - I can confirm that this is an issue and we have logged it in our GitHub repository for fixing. The progress can be monitored here:

    https://github.com/telerik/kendo-react/issues/564

    2) Resizing page up to 400% is creating a loss of content or functionality - This is because the columns do not have fixed width and resize based on the available space, which in this case after 400% becomes smaller. Please check the following example on 400%:

    https://stackblitz.com/edit/react-s3gdau?file=app/main.jsx

    Also, please have in mind that the official support zoom is 200%:

    https://www.boia.org/wcag2/cp/1.4.4

    Regards,
    Stefan
    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top