如何使用JQuery循环浏览日历以修复可访问性问题

Question

我有一个已经构建的日历，现在我需要修复它的可访问性问题。我不应该在可能的情况下更改底层代码，所以我试图在项目上构建一个JQuery脚本来修复问题。

问题是：

1. 当用户在页面中进行选项卡时，他们永远无法访问日历。
2. 如果您通过chrome检查器添加tabindex =“0”，您可以选择条目，但是每天通过每个条目然后循环到第二天，选项卡将用户以水平模式将其选中第一周每天第一次进入，第一周每天第二次进入。

日历本身的创建方式非常棘手：

var Calendar = {

        init: function(day, eventid, message, isAdmin) {
            str.get_strings([
                { key: 'confirm_event', component: 'local_plugin' },
                { key: 'required' },
                { key: 'enter_all_required_fields', component: 'local_plugin' },
                { key: 'double_booking', component: 'local_plugin' },
                { key: 'events_not_found', component: 'local_plugin' },
            ]).then(function(all) {
                strings = all;
            });

            $('#local_plugin').fullCalendar({

                viewRender: function(view, element) {
                if (view.name == 'listMonth') {
                    var region = $('#filter_region').val();
                    var status = $('#filter_status').val();
                    var start = $('#local_plugin').fullCalendar("getView").start.format();
                    var end = $('#local_plugin').fullCalendar("getView").end.format();
                    $("#local_plugin .fc-view-container .fc-scroller").html('<div class="loader"><i class="fa fa-spin fa-spinner"></i></div>').load(mdlcfg.wwwroot + '/local/local_plugin/calendar/ajax.php?action=get_events&view=table&region='+region+'&status='+status+'&start='+start+'&end='+end, function(e){ });
                    return;
                }
            },

当加载html页面时，没有日历，只是调用Calendar.init（）。所有页面都是一个id ='＃local_plugin'的空div。当调用此日历对象时，它似乎生成所有相关的html，css和js来构建日历。我不打算通过它，因为它需要数千条线路。

这个Calendar.init（）生成的html看起来像这样：

<tbody class="fc-body">
   <tr>
      <td class="fc-widget-content">
         <div class="fc-scroller fc-day-grid-container" style="overflow: hidden; height: 813px;">
            <div class="fc-day-grid fc-unselectable">
               <div class="fc-row fc-week fc-widget-content fc-rigid" style="height: 140px;">
                  <div class="fc-bg">
                     <table>
                        <tbody>
                           <tr>
                              <td class="fc-day fc-widget-content fc-sun fc-other-month fc-past" data-date="2018-02-25"></td>
                              <td class="fc-day fc-widget-content fc-mon fc-other-month fc-past" data-date="2018-02-26"></td>
                              <td class="fc-day fc-widget-content fc-tue fc-other-month fc-past" data-date="2018-02-27"></td>
                              <td class="fc-day fc-widget-content fc-wed fc-other-month fc-past" data-date="2018-02-28"></td>
                              <td class="fc-day fc-widget-content fc-thu fc-past" data-date="2018-03-01"></td>
                              <td class="fc-day fc-widget-content fc-fri fc-past" data-date="2018-03-02"></td>
                              <td class="fc-day fc-widget-content fc-sat fc-past" data-date="2018-03-03"></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="fc-content-skeleton">
                     <table>
                        <thead>
                           <tr>
                              <td class="fc-day-top fc-sun fc-other-month fc-past" data-date="2018-02-25"><span class="fc-day-number">25</span></td>
                              <td class="fc-day-top fc-mon fc-other-month fc-past" data-date="2018-02-26"><span class="fc-day-number">26</span></td>
                              <td class="fc-day-top fc-tue fc-other-month fc-past" data-date="2018-02-27"><span class="fc-day-number">27</span></td>
                              <td class="fc-day-top fc-wed fc-other-month fc-past" data-date="2018-02-28"><span class="fc-day-number">28</span></td>
                              <td class="fc-day-top fc-thu fc-past" data-date="2018-03-01"><span class="fc-day-number">1</span></td>
                              <td class="fc-day-top fc-fri fc-past" data-date="2018-03-02"><span class="fc-day-number">2</span></td>
                              <td class="fc-day-top fc-sat fc-past" data-date="2018-03-03"><span class="fc-day-number">3</span></td>
                           </tr>
                        </thead>
                        <tbody>
                           <tr>
                              <td class="fc-event-container">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="872" data-event-type="off_road_lesson">
                                    <div class="fc-content"><span class="fc-time">4:01a</span> <span class="fc-title">Secondary College</span></div>
                                 </a>
                              </td>
                              <td class="fc-event-container">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="119" data-event-type="in_class_session">
                                    <div class="fc-content"><span class="fc-time">4a</span> <span class="fc-title">Test Booking</span></div>
                                 </a>
                              </td>
                              <td class="fc-event-container" rowspan="4">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="889" data-event-type="on_road_lesson">
                                    <div class="fc-content"><span class="fc-time">9:50p</span> <span class="fc-title">Lesson: 777</span></div>
                                 </a>
                              </td>
                              <td class="fc-event-container">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="201" data-event-type="in_class_session">
                                    <div class="fc-content"><span class="fc-time">11:44a</span> <span class="fc-title">Testing End Can't Be Before Start</span></div>
                                 </a>
                              </td>
                              <td rowspan="4"></td>
                              <td rowspan="4"></td>
                              <td rowspan="4"></td>
                           </tr>
                           <tr>
                              <td class="fc-event-container">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="873" data-event-type="off_road_lesson">
                                    <div class="fc-content"><span class="fc-time">4:01a</span> <span class="fc-title">Secondary College</span></div>
                                 </a>
                              </td>
                              <td class="fc-event-container" rowspan="3">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="876" data-event-type="off_road_lesson">
                                    <div class="fc-content"><span class="fc-time">4:11a</span> <span class="fc-title">College</span></div>
                                 </a>
                              </td>
                              <td class="fc-event-container" rowspan="3">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="118" data-event-type="in_class_session">
                                    <div class="fc-content"><span class="fc-time">2p</span> <span class="fc-title">Booking Test</span></div>
                                 </a>
                              </td>
                           </tr>
                           <tr>
                              <td class="fc-event-container">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="874" data-event-type="off_road_lesson">
                                    <div class="fc-content"><span class="fc-time">4:01a</span> <span class="fc-title">Secondary College</span></div>
                                 </a>
                              </td>
                           </tr>
                           <tr>
                              <td class="fc-event-container">
                                 <a class="fc-day-grid-event fc-h-event fc-event fc-start fc-end" data-event-id="875" data-event-type="off_road_lesson">
                                    <div class="fc-content"><span class="fc-time">4:01a</span> <span class="fc-title">Secondary College</span></div>
                                 </a>
                              </td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="fc-bgevent-skeleton">
                     <table>
                        <tbody>
                           <tr>
                              <td class="fc-nonbusiness fc-bgevent" colspan="1"></td>
                              <td colspan="6"></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
                  <div class="fc-bgevent-skeleton">
                     <table>
                        <tbody>
                           <tr>
                              <td colspan="6"></td>
                              <td class="fc-nonbusiness fc-bgevent" colspan="1"></td>
                           </tr>
                        </tbody>
                     </table>
                  </div>
               </div>

我需要在日历页面的底部添加一些js，以便将tabindex添加到所有日期，日期和条目中。不仅如此，选项卡索引还需要具有顺序，使得选项卡将在每天移动到第二天之前循环用户。在研究了这个问题后，我假设我需要使用.each（）函数，但是在进行简单测试时，我甚至无法获得工作警报：

<script>
    $(document).ready(function() { 
        $('.fc-body').children('.fc-row').each(function () {
            alert('test');
        });
    });
</script>

我认为这不起作用$（document）.ready不一定等待Calendar.init（）运行。无论如何，我可以延迟JS在创建日历之后运行，并且在完成此操作之后我将如何实施解决方案？我怀疑这是一项非常大胆的任务。