JSFiddle - React, Tailwind, and code Playground

by libingwag

HTML

<html>
<head>
    <title>ARIA Simple Treegrid Sample</title>
    <style>
        BODY {}
         h3 {margin-bottom:2px}
    </style>

    <script type="text/javascript">
        var sap = {ui:{keycodes:{SPACE:32, 
                                 ENTER:13, 
                                 PAGE_UP : 33,
                                 PAGE_DOWN : 34,
                                 END : 35,
                                 HOME : 36,
                                 ARROW_LEFT : 37,
                                 ARROW_UP : 38,
                                 ARROW_RIGHT : 39,
                                 ARROW_DOWN : 40,
                                 TAB : 9
                                 }}};
        var grids = [];
        function getGrid(id) {
            if (!grids[id]) {
                var grid = {};
                grid.focusedRow = 1;
                grid.focusedCol = 0;
                grid.table = document.getElementById(id);
                grids[id] = grid;
            }
            return grids[id];
        }
        function handleFocus(id, evt) { 
            var grid = getGrid(id);
            if (grid) {
                if (!grid.focusedCell) {
                    grid.focusedCell = {row:1,col:0};
                } else {
                    blurCell(grid.focusedCell,grid);
                }
                focusCell(grid.focusedCell,grid);
                grid.table.tabIndex = "-1";
                
            }
        }
        function handleClick(id, evt) { 
            var grid = getGrid(id);
            if (grid) {
                var clickedCell = evt.target?evt.target:evt.srcElement;
                if (clickedCell.tagName=="TD") {
                    row = grid.table.rows[clickedCell.parentNode.rowIndex];
                    toggleItem(row,grid)
                }
            }
        }
        function toggleItem(row,grid) {
            var expand;            
            if (row && row.getAttribute("ca")=="to") {
  ...