Focus on more than headers alone

Created on 19 September 2024, about 2 months ago

Problem/Motivation

This modules fixes the header problem in CK5 but it would be nice if it focuses on all accessibility issues. I have a custom module with a filter that fixes:
- scope in th
- changing the first th (top left cell) in thead into a tr when it is empty ( ). Sure its better to not leave it empty but when it happens this is better.
- wrap the table in a div to make it scrollable over the x-axes
- add tabindex=0 to the table to make it focussable. in some browsers necesary to make table accessible for keyboard users

One other thing that would be nice to be able to do is to make the top left cell not scope col but scope row while being inside the thead. For example see attached image. The top left cells explains what A B C D are. But A B C and D should be a th aswell for the columns.

Ps. asking for this because I feel you can do this better than I can, I'm not a developing wizard so adding my code so you can see what I did.

class A11yCkeFix extends FilterBase {
  public function process($text, $langcode) {
    // Change the first <th> in <thead> when its content is &nbsp; without creating a new <th>
    $pattern = '/(<thead><tr>)<th>&nbsp;<\/th>/';
    $replacement = '$1<td>&nbsp;</td>';
    $text = preg_replace($pattern, $replacement, $text);

    // Find all theads's
    preg_match_all('/(<thead>.*?<\/thead>)/s', $text, $matches);
    $thead_sections = $matches[0];

    foreach ($thead_sections as $thead) {
      // Add col scope to th in thead
      $modified_thead = preg_replace('/(<th\b(?![^>]*\bscope="col\b)[^>]*)(>)/', '$1 scope="col"$2', $thead);
      $text = str_replace($thead, $modified_thead, $text);
    }

    // Find all tbody's
    preg_match_all('/(<tbody>.*?<\/tbody>)/s', $text, $matches);
    $tbody_sections = $matches[0];

    foreach ($tbody_sections as $tbody) {
      // Add row scope to th in tbody
      $modified_tbody = preg_replace('/(<th\b(?![^>]*\bscope="row\b)[^>]*)(>)/', '$1 scope="row"$2', $tbody);
      $text = str_replace($tbody, $modified_tbody, $text);
    }

    // Wrap div around table and make table focusable
    $text = preg_replace('/<table>/', '<div class="table-responsive"><table tabindex="0">', $text);
    $text = preg_replace('/<\/table>/', '</table></div>', $text);

    $result = new FilterProcessResult($text);
    return $result;
  }
}
Feature request
Status

Active

Version

1.0

Component

Code

Created by

🇳🇱Netherlands zebda

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

Production build 0.71.5 2024