Problem/Motivation

When enabling bootstrap_barrio and visiting a standard tableselect element such as on /admin/content you will not see the custom checkboxes or switch checkbox elements.

Steps to reproduce

  1. Set boostrap_barrio theme as admin theme.
  2. Create a content (article or page)
  3. Visit /admin/content

Proposed resolution

Print the label as well (without title text) for custom and switch checkboxes. Not sure if this is the correct solution in regards to screenreaders. But it does make it functional.

Comments

alexverb created an issue. See original summary.

alexverb’s picture

Patch provided. See screenshots for results.

Like I said. I'm not sure this is the correct solution since I'm not totally aware how the CSS is built for the custom and switch checkboxes. But this patch does make it functional for tableselect elements.

alexverb’s picture

Status: Active » Needs review

Request review

hatuhay’s picture

Status: Needs review » Fixed

The solution taken is slighly different from proposed, because I used the Classy template approach.
But for sure the issue is the same as reported.

  • hatuhay committed 8cc3404 on 5.x authored by alexverb
    Issue #3178731 by alexverb: Provide label for tableselect checkboxes
    

  • hatuhay committed e51090d on 8.x-4.x authored by alexverb
    Issue #3178731 by alexverb: Provide label for tableselect checkboxes
    
alexverb’s picture

Thanks hatuhay!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ollie222’s picture

StatusFileSize
new63.33 KB
new59.46 KB

With a standard install of Drupal 8.9.11 with Bootstrap Barrio v5.4.1 or the dev version as the default and admin theme the label is always displayed.

On tableselect tables such as on the content or user page when using a standard checkbox the checkbox is displayed over the top of the label but the checkbox can be ticked.

When using custom or switch for checkboxes on forms I see the label rendered to the right of the tickbox and if I click on it then the line is selected but the checkbox or switch remains unchecked.

Custom and switches work fine elsewhere.

Am I missing something?

mikcat’s picture

I think that this has to add the css class visually-hidden to the printed label tag when label_display is set to invisible, like checkboxes on tableselect tables.

I'm doing this workaround on my subtheme:

function bootstrap_sass_preprocess_form_element(&$variables) {
  if ($variables['type'] === 'checkbox' && $variables['label_display'] === 'invisible') {
    if (!isset($variables['label_attributes'])) {
      $variables['label_attributes'] = new \Drupal\Core\Template\Attribute(['class' => 'visually-hidden']);
    }
    else {
      /** @var \Drupal\Core\Template\Attribute $attr */
      $attr = $variables['label_attributes'];
      $attr->addClass('visually-hidden');
    }
  }
}