How to add scope attributes to Tablepress tables

  • Resolved handig

    (@handig)


    11 months, 2 weeks ago

    Hi,

    Trying to make a table more accessible. Is there a way to add the scope attribute to thead and to first column cells?

    I found this code snippet but doesn’t seem to work.

    Would be great to have html like this example with scope col and scope row:

    <table>
<caption>Aquarium Data</caption>
<thead>
  <tr>
    <th scope="col">Date</th>
    <th scope="col">Ammonia</th>
    <th scope="col">Nitrites</th>
    <th scope="col">Nitrates</th>
    <th scope="col">pH</th>
    <th scope="col">CO2</th>
  </tr>
</thead>
<tbody>
  <tr>
    <th scope="row">May 1</td>
    <td>0</td>
    <td>0</td>
    <td>5</td>
    <td>7.3</td>
    <td>18</td>
  </tr>
  <tr>
  	<th scope="row">May 2</th>
    <td>0.1</td>
    <td>0</td>
    <td>8</td>
    <td>7.3</td>
    <td>20</td>
  </tr>
  <tr>
  	<th scope="row">May 3</th>
    <td>0</td>
    <td>0.1</td>
    <td>12</td>
    <td>7.4</td>
    <td>16</td>
  </tr>
</tbody>
</table>
Viewing 8 replies - 1 through 8 (of 8 total)
  • Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 months, 2 weeks ago

    Hi!

    Thanks for your post and sorry for the trouble!

    I’m not sure why, but the code snippet that you found should work (I didn’t test it, but I can’t see anything wrong after taking a quick look at the code).

    Alternatively, you could use the tablepress_cell_tag_attributes plugin filter hook to add such attributes in some custom code, see https://github.com/TablePress/TablePress/blob/main/classes/class-render.php#L770-L783 for its definition.

    Using <th> tags in the first column of the table is a bit easier: For that, you can add the first_column_th=true parameter to the Shortcode or to the “Configuration parameters” field of the “TablePress table” block (if you are using the block editor).

    Best wishes,
    Tobias

    Thread Starter handig

    (@handig)

    11 months, 2 weeks ago

    Hi,

    I tried the other approach. So I added the first_column_th=true parameter to the “Configuration parameters” field of the “TablePress table” block and added this code:

    add_action('init', 'add_tablepress_cell_attributes_filter');

    function add_tablepress_cell_attributes_filter() {
        // Use a high priority to ensure our filter runs last
        add_filter('tablepress_cell_tag_attributes', 'tablepress_correct_scope_attributes', 100, 7);
    }

    /**
     * Correct scope attributes for table headers
     *
     * @param array $tag_attributes Array of HTML attributes for the cell.
     * @param string $table_id The current table ID.
     * @param string $cell_content The cell content.
     * @param int $row_idx The row number of the cell.
     * @param int $col_idx The column number of the cell.
     * @param int $colspan_row The number of combined columns for this cell.
     * @param int $rowspan_col The number of combined rows for this cell.
     * @return array Modified array of HTML attributes for the cell.
     */
    function tablepress_correct_scope_attributes($tag_attributes, $table_id, $cell_content, $row_idx, $col_idx, $colspan_row, $rowspan_col) {
        // Correct the scope attribute for the first cell in the header row
        if ($row_idx == 1) {
            $tag_attributes['scope'] = 'col'; // All cells in the header row should have scope="col"
        }
        // Set scope='row' for the first cell in each body row
        elseif ($col_idx == 1) {
            $tag_attributes['scope'] = 'row';
        }

        return $tag_attributes;
    }

    But now the first cell of the header row is set to scope ‘row’ while it should be scope ‘col’. The subsequent rows have their first cells set to scope ‘row’.
    I made a test page here you see the output is:


    <thead>
    <tr class="row-1">
    	<th class="column-1" scope="row">Feature</th><th class="column-2" scope="col">Product A</th><th class="column-3" scope="col">Product B</th>
    </tr>
    </thead>
    <tbody class="row-hover">
    <tr class="row-2">
    	<th class="column-1" scope="row">Schaalbaarheid</th><td class="column-2">Hoog in de middenklassen</td><td class="column-3">Laag voor de lagere klasses</td>
    </tr>
    <tr class="row-3">
    	<th class="column-1" scope="row">Prijs</th><td class="column-2">2 euro</td><td class="column-3">3 euro</td>
    </tr>
    </tbody>

    And I would want it to be one data table with three column header cells:


    <thead>
    <tr class="row-1">
    	<th class="column-1" scope="col">Feature</th><th class="column-2" scope="col">Product A</th><th class="column-3" scope="col">Product B</th>
    </tr>
    </thead>
    <tbody class="row-hover">
    <tr class="row-2">
    	<th class="column-1" scope="row">Schaalbaarheid</th><td class="column-2">Hoog in de middenklassen</td><td class="column-3">Laag voor de lagere klasses</td>
    </tr>
    <tr class="row-3">
    	<th class="column-1" scope="row">Prijs</th><td class="column-2">2 euro</td><td class="column-3">3 euro</td>
    </tr>
    </tbody>
    • This reply was modified 11 months, 2 weeks ago by handig.
    Thread Starter handig

    (@handig)

    11 months, 2 weeks ago

    Hi,
    Worked some more on it and I’m getting more confused.

    Could it be that Tablepress is caching/rendering something when clicking on Table options-Table Head row-The first row of the table is the header of the table?

    That would explain the strange outputs. I think my new code seems to work as it returns scope ‘col’ for the header row cells and scope ‘row’ for the first cell of the body rows.

    I did some testing on two sites one on Generatepress and one on Twenty Four theme. The original code snippet didn’t seem to work on the Twenty Four theme. It works on Generatepress. My second code snippet seems to work on Generatepress and Twenty Four theme.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 months, 2 weeks ago

    Hi,

    That looks very good already!

    First, I recommend to get rid of that extra add_tablepress_cell_attributes_filter wrapper function that is attached to the init hook. You don’t need that as all it does is attach a filter hook to tablepress_cell_tag_attributes directly. Just call that directly.

    And yes, TablePress does have output caching, but it’s not related to the Table Head setting. Also, you should not see that while you are logged in into WordPress.

    To clear that cache (e.g. for testing in a private/incognito browser tab, where you are not logged in), just save the table again.

    Now, I can’t see how your code from above can return scope="row" for the first cell of the header row though… Just from its logic, due to the elseif, that cell should always get scope="col"…

    Best wishes,
    Tobias

    Thread Starter handig

    (@handig)

    11 months, 2 weeks ago

    I’m happy. I really don’t know how the scope="row" for the first cell of the header row appeared. Happy that it is gone.

    This is my modified code now where I tried to follow your tip to get rid fof the wrapper function and I adjusted the priority of the filter to 10 instead of 100:

    add_filter('tablepress_cell_tag_attributes', 'tablepress_correct_scope_attributes', 10, 7);

    /**
     * Correct scope attributes for table headers
     *
     * @param array $tag_attributes Array of HTML attributes for the cell.
     * @param string $table_id The current table ID.
     * @param string $cell_content The cell content.
     * @param int $row_idx The row number of the cell.
     * @param int $col_idx The column number of the cell.
     * @param int $colspan_row The number of combined columns for this cell.
     * @param int $rowspan_col The number of combined rows for this cell.
     * @return array Modified array of HTML attributes for the cell.
     */
    function tablepress_correct_scope_attributes($tag_attributes, $table_id, $cell_content, $row_idx, $col_idx, $colspan_row, $rowspan_col) {
        // Correct the scope attribute for the first cell in the header row
        if ($row_idx == 1) {
            $tag_attributes['scope'] = 'col'; // All cells in the header row should have scope="col"
        }
        // Set scope='row' for the first cell in each body row
        elseif ($col_idx == 1) {
            $tag_attributes['scope'] = 'row';
        }

        return $tag_attributes;
    }
    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 months, 2 weeks ago

    Hi,

    Nice, thanks for sharing this! Yes, that looks like a good solution here 🙂

    Best wishes,
    Tobias

    Thread Starter handig

    (@handig)

    11 months, 2 weeks ago

    Thank you for your help.

    Plugin Author Tobias Bäthge

    (@tobiasbg)

    11 months, 2 weeks ago

    Hi,

    sure, no problem! 🙂

    Best wishes,
    Tobias

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘How to add scope attributes to Tablepress tables’ is closed to new replies.