TechQA.

How to add labels to dropdown menu if the select options are coming from datatables javascript?

400 views Asked by At

I am using a datatable with dropdown filter for my project where I am popoluating the dropdown menu dynamically from the datatable. Automated 508 complaince tool is throwing the following error for the 3 dropdowns- "Elements with No Accessible Name: (3)". It also provides link to the following site on how to fix the error. https://www.ssa.gov/accessibility/andi/help/alerts.html?no_name_form_element.

I am not sure how to add labels since I am not defining the select options in the HTML. It is coming from Javascipt. Please see the code below. Any guidance will be very helpful. Thanks.

https://live.datatables.net/finezici/1/edit

$(document).ready(function() {
$('#table-wrap').hide();
  var table = $('#example').DataTable({

    responsive: true,
mark: true,
stateSave: false,
    searching: true
  });

  buildSelect(table);
  $('#table-filter').on('change', function () {
    // show the tbody when the user clicks on a filter option
$('#table-wrap').show();
    table.columns.adjust();

    table.search(this.value).draw();
  });

 
  table.on('draw', function() {
    buildSelect(table);
  });
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    $('#table-wrap').hide();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select><option value="">Select</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');

    });

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
           // Use RegEx to find the selected value from the unique values of the column.
      // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox" select id="table-filter">
<p>Name: <span id="dropdown1">
  </span>
</p>

<p>Postion: <span id="dropdown2">
  </span>
</p>

<p>Office: <span id="dropdown3">
</span>
</p>
  <button type="button"  id="test">Clear Filters</button>
</div>
  <div id="table-wrap">
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          
            
          </tr></tbody></table>
</div>

javascript datatables section508
Original Q&A
1

There are 1 answers

0
prinkpan On BEST ANSWER

It is asking you to give labels for your dropdowns. To add the label for attribute you need IDs for dropdowns. You can set it in your js as with var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')

Then you need to wrap your labels in a <label> tag using the dynamically generated ID in the for attribute.

Here is what it will look like: https://live.datatables.net/finezici/4/edit

$(document).ready(function() {
$('#table-wrap').hide();
  var table = $('#example').DataTable({

    responsive: true,
mark: true,
stateSave: false,
    searching: true
  });

  buildSelect(table);
  $('#table-filter').on('change', function () {
    // show the tbody when the user clicks on a filter option
$('#table-wrap').show();
    table.columns.adjust();

    table.search(this.value).draw();
  });

 
  table.on('draw', function() {
    buildSelect(table);
  });
  $('#test').on('click', function() {
    table.search('').columns().search('').draw();
    $('#table-wrap').hide();
  });
});

function buildSelect(table) {
  var counter = 0;
  table.columns([0, 1, 2]).every(function() {
    var column = table.column(this, {
      search: 'applied'
    });
    counter++;
    var select = $('<select id="dd' + counter + '"><option value="">Select</option></select>')
      .appendTo($('#dropdown' + counter).empty())
      .on('change', function() {
        var val = $.fn.dataTable.util.escapeRegex(
          $(this).val()
        );

        column
          .search(val ? '^' + val + '$' : '', true, false)
          .draw();
      });

    column.data().unique().sort().each(function(d, j) {
select.append('<option value="' + d + '">' + d + '</option>');

    });

    // The rebuild will clear the exisiting select, so it needs to be repopulated
    var currSearch = column.search();
    if (currSearch) {
           // Use RegEx to find the selected value from the unique values of the column.
      // This will use the Regular Expression returned from column.search to find the first matching item in column.data().unique
      select.val(column.data().unique().toArray().find((e) => e.match(new RegExp(currSearch))));
    }
  });
}
<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

    <meta charset=utf-8 />
    <title>DataTables - JS Bin</title>
  </head>
<div class="searchbox" select id="table-filter">
<p><label for="dd1">Name:</label> <span id="dropdown1">
  </span>
</p>

<p><label for="dd2">Postion:</label> <span id="dropdown2">
  </span>
</p>

<p><label for="dd3">Office:</label> <span id="dropdown3">
</span>
</p>
  <button type="button"  id="test">Clear Filters</button>
</div>
  <div id="table-wrap">
  <table id="example" class="cell-border row-border stripe dataTable no-footer dtr-inline" role="grid" style=" width: 100%; padding-top: 10px;"><thead>
<tr>

<th>&#160;</th>
<th>&#160;</th>
<th>&#160;</th>
<th colspan="3" style=" text-align: center;">Information</th>
</tr>


          <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
          </tr>
        </thead>

        
        <tbody>
          <tr>
            <td>ID.AI</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011/04/25</td>
            <td>$3,120</td>
          </tr>
          <tr>
            <td>Garrett -2</td>
            <td>Director</td>
            <td>Edinburgh</td>
            <td>63</td>
            <td>2011/07/25</td>
            <td>$5,300</td>
          </tr>
          <tr>
            <td>Ashton.1 -2</td>
            <td>Technical Author</td>
            <td>San Francisco</td>
            <td>66</td>
            <td>2009/01/12</td>
            <td>$4,800</td>
          </tr>
          
            
          </tr></tbody></table>
</div>

Related Questions in JAVASCRIPT

Related Questions in DATATABLES

Related Questions in SECTION508

Popular Questions

Popular Tags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs node.js arrays c asp.net json

Trending Questions