JSFiddle - React, Tailwind, and code Playground

by maritavindedal

HTML

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script>
  <script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

<script src="https://kendo.cdn.telerik.com/2021.2.511/js/jszip.min.js"></script>
  <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js" integrity="sha256-eTyxS0rkjpLEo16uXTS0uVCS4815lc40K2iVpWDvdSY=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.common.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.default.min.css">


 <button id="btn">click me</button>
 
 <div id="dialog" style="display: none;">
  <div><input type="text" /></div> <!-- shift tab focus , Focus skip issue, compact view focus stuck issue -->
  <a href="javascript:void(0)">0</a>
  <a href="javascript:void(0)">1</a>
  <div id="container"></div>
  <a href="javascript:void(0)">2</a>
  <a href="javascript:void(0)">3</a>
  <a href="javascript:void(0)">4</a>
</div>

CSS

*:focus{
      outline: 3px dashed red;
    }
    
    .highcharts-container:focus {
      outline: 3px dashed red !important;
      outline-offset: -3px;
    }

JavaScript

//focus event custome code
$('#btn').on('click', function(){
    $('#dialog').data('kendoWindow').center().open();
    
});
$("#dialog").kendoWindow({
  height: "auto",
  width:'80%',
  modal: false, // deactivate modal navigation
  draggable: false,
}).data('kendoWindow').open();
  // Create the chart
(async () => {

    const names = ['MSFT', 'AAPL', 'GOOG'];

    /**
     * Create the chart when all data is loaded
     * @return {undefined}
     */
    function createChart(series) {

        Highcharts.stockChart('container', {

            rangeSelector: {
                selected: 1
            },

            tooltip: {
                valueDecimals: 2,
                split: true
            },

            series
        });
    

    }

    const promises = names.map(name => new Promise(resolve => {
        (async () => {
            const data = await fetch(
                'https://cdn.jsdelivr.net/gh/highcharts/[email protected]/' +
                'samples/data/' + name.toLowerCase() + '-c.json'
            )
                .then(response => response.json());
            resolve({ name, data });
        })();
    }));

    const series = await Promise.all(promises);
    createChart(series);

})();