🇨🇦Canada @bisonbleu

The latest patch, although it applied without issues, only partially worked.

It correctly updated the Format » Settings form where the field mapping is done; but the code that fetched and setsd the Alt Text (TimelineJS.php) was simply copied from other fields, e.g. Credit, Caption, which are regular node fields.

But a Media Image field is an entity reference field, and the Alt text lives 3 levels deeper. So I refactored that part with an alt_text_retriever service.

Note -- When setting up the view, the Format » Settings » Media Alt Text field mapping expects a proper media ID.

But there's already an issue for this. See Support alt text for images →

So closing as a duplicate

Initially posted as a Timeline Block issue by mistake. This is a Views TimelineJS issue.

bisonbleu → created an issue.

bisonbleu → created an issue.

For the short term, simply adding an ID to the checkbox label does the job; the use case is Simplenews subscriptions on user register page.

/**
 * Implements template_preprocess_form_element_label().
 */
function my_custom_theme_preprocess_form_element_label(&$variables) {
  $id = $variables['element']['#id'] ?? '';
  if ($id && str_contains($id, 'edit-subscriptions-')) {
    $variables['attributes']['id'] = 'edit-subscriptions--description';
  }
}

Just running into this issue in a custom theme. Here is the code sample that generates the «Broken ARIA reference» error:

<!-- BEGIN OUTPUT from 'core/modules/system/templates/input.html.twig' -->
<input data-drupal-selector="edit-subscriptions-sip-n-savour" aria-describedby="edit-subscriptions--description" type="checkbox" id="edit-subscriptions-sip-n-savour" name="subscriptions[sip_n_savour]" value="sip_n_savour" class="form-checkbox">
<!-- END OUTPUT from 'core/modules/system/templates/input.html.twig' -->

<!-- BEGIN OUTPUT from 'core/modules/system/templates/form-element-label.html.twig' -->
<label for="edit-subscriptions-sip-n-savour" class="option">SIP n’ SAVOUR</label>

This fix does not appear to be available in the latest Dev version?
I'm still getting the above reported error :/

mcdruid → credited bisonbleu → .

Adding the following JS to a custom theme should provide basic navigation: Tab to top menu item, Enter to open sub-menu, Tab to navigate in the sub-menu items, Enter to activate link.

You may have to adjust the selectors depending on your markup. For more info, see Add JavaScript to Your Theme or Module →

(function () {

  'use strict';

  /**
   * Provides basic keyboard navigation in the Main menu (desktop viewport).
   *
   * @type {Drupal~behavior}
   *
   * @prop {Drupal~behaviorAttach} attach
   *   Attaches the behavior for the keyboard navigation implementation.
   */
  Drupal.behaviors.responsive_menu_horizontal = {
    attach: function (context) {
      let horizontalMenu = document.querySelector('#horizontal-menu');
      if (horizontalMenu) {
        // Process main menu items with children.
        let menuItems = horizontalMenu.querySelectorAll('.menu-item--expanded');
        menuItems.forEach(function(item) {
          item.addEventListener('keydown', function(e) {
            if (e.key === 'Enter') {
              e.preventDefault();
              e.stopImmediatePropagation();

              // Toggle visibility of sub-menu.
              let submenu = item.querySelector('.sub-nav');
              if (submenu && !submenu.classList.contains('submenu-open')) {
                submenu.classList.toggle('submenu-open');
              } else {
                // If no submenu or submenu is open, extract URL from the link and navigate to it.
                let link = item.querySelector('a');
                if (link) {
                  window.location.href = link.getAttribute('href');
                }
              }
            }
          });

          // Add event listener to sub-menu items.
          let subMenuItems = item.querySelectorAll('.sub-nav .menu-item');
          subMenuItems.forEach(function(subItem, index) {
            subItem.addEventListener('keydown', function(e) {
              if (e.key === 'Enter') {
                e.preventDefault();
                e.stopImmediatePropagation();
                
                // Extract URL from the link and navigate to it.
                let link = subItem.querySelector('a');
                if (link) {
                  window.location.href = link.getAttribute('href');
                }
              } else if (e.key === 'Tab' && index === subMenuItems.length - 1) {
                // If 'Tab' is pressed while in the last sub-menu item, close the sub-menu.
                let submenu = item.querySelector('.sub-nav');
                if (submenu && submenu.classList.contains('submenu-open')) {
                  submenu.classList.toggle('submenu-open');
                }
              }
            });
          });

        });
      }

    }

  }

})();

Nothing wrong with views_accordion, works as designed.

Found useful info which explains how to interact with a website: How to browse websites using a keyboard only

I was able to replicate this issue (the inability to tab-navigate into all accordion panels) on SimplyTest.me.

In the accordion-header DIV of the View's first row, the tabindex attribute is set to "0", all good there. But in all subsequent rows, the tabindex attribute is set to "-1" which means «skip me». I'm not sure if this is actually breaking any WCAG Success Criteria. But if your building e.g. an FAQ it means that screen readers can only access the content of the first row, and that can't be good.

Here is the markup of the first 2 rows from my SimplyTest.me test.

<div class="views-field views-field-title views-accordion-header js-views-accordion-header-b48545e8892d71b4866101dbab4e3da07639644ea873168c86806264a7efe552 ui-accordion-header ui-corner-top ui-state-default ui-accordion-icons ui-accordion-header-active ui-state-active" role="tab" id="ui-id-1" aria-controls="ui-id-2" aria-selected="true" aria-expanded="true" tabindex="0">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
    <span class="field-content">Article #3</span>
</div>
<div style="height: 85.8px;" class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content ui-accordion-content-active" id="ui-id-2" aria-labelledby="ui-id-1" role="tabpanel" aria-hidden="false">
    <div class="views-field views-field-body">
        <div class="field-content">
            <p>Body for Article #3</p>
        </div>
    </div>
</div>

<div class="views-field views-field-title views-accordion-header js-views-accordion-header-b48545e8892d71b4866101dbab4e3da07639644ea873168c86806264a7efe552 ui-accordion-header ui-corner-top ui-accordion-header-collapsed ui-corner-all ui-state-default ui-accordion-icons" role="tab" id="ui-id-3" aria-controls="ui-id-4" aria-selected="false" aria-expanded="false" tabindex="-1">
    <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"></span>
    <span class="field-content">Article #2</span>
</div>
<div style="display: none; height: 85.8px;" class="ui-accordion-content ui-corner-bottom ui-helper-reset ui-widget-content" id="ui-id-4" aria-labelledby="ui-id-3" role="tabpanel" aria-hidden="true">
    <div class="views-field views-field-body">
        <div class="field-content">
            <p>Body for Article #2</p>
        </div>
    </div>
</div>

Hi @danheisel, would you mind sharing your code ?

Just ran into this issue on a big Commerce website with 5000+ products. Setting to «Critical» as this -- silently assigning all roles *including admin* -- has huge security implications.

There are solutions from contrib modules which make it possible to filter a view's results using e.g. arg1> AND arg2 in the URL like so: /product-profile/123,456.

For Node entities:
- https://www.drupal.org/project/views_taxonomy_term_name_into_id →
- https://www.drupal.org/project/views_taxonomy_term_name_depth →

For Commerce Product entities:
- https://www.drupal.org/project/commerce_product_taxonomy_filter →

Ha ha, 8 years in the coming ;-)
Thanks @dww and cheers!

geek-merlin → credited bisonbleu → .

bisonbleu → created an issue.

This using the latest version in Drupal 9.5.11

bisonbleu → created an issue.

@Ahmed.Raza Your solution is also what I'm looking for, do you mind sharing your code ?

Thanks for sharing @johnhanley, works like a charm in 9.5.8. Only needed to update core: 8.x in the .info file to core_version_requirement: ^9 || ^10.

I agree. The patch is just one small step - hopefully in the right direction…

There's a patch that does just that here: [3059072], courtesy of @jrockowitz himself :^)

Rerolled patch in #14 for 6.2.x

I think there's a genuine use case where disabling the loggers or having a quiet/not-so-verbose mode would be nice and it's during migrations.

When importing/rolling-back webform submission in terminal, you get a notice for each submission. That means if you've got 50k submissions you will get 50k notices which slows the whole process down and sometimes sets your cpu on fire ;-)

[notice] Deleted Webform Application: Submission #17256.
[notice] Deleted Webform Self Service: Submission #17261.
[notice] Deleted Webform Application: Submission #17266.
[notice] Deleted Webform Application: Submission #17271.
[notice] Deleted Webform Application: Submission #17276.
[notice] Deleted Webform Application: Submission #17281.
[notice] Deleted Webform Application: Submission #17286.
[notice] Rolled back 3444 items - done with 'd7_webform_submission'
…

Thanks for your quick reply @gisle!

My use case is simple enough so I ended up using tac_lite → as a replacement for content_access + rules.

Cheers!

bisonbleu → created an issue.

Can someone please explain what the setup is to make this work? Thanks!

bisonbleu → created an issue.

One ugly way out (a hack) is to set the theme to e.g. Black and then copy the CSS from the mmenu.js library and change it to this:

.mm-menu_theme-black{
  --mm-color-border:rgba(0,0,0,0.25 );
  --mm-color-button:rgba(0,0,0,0.4 );
  --mm-color-text:rgba(0,0,0,0.75 );
  --mm-color-text-dimmed:rgba(0,0,0,0.4 );
  --mm-color-background:#ff0000;
  --mm-color-background-highlight:rgba(0,0,0,0.2 );
  --mm-color-background-emphasis:rgba(0,0,0,0.15 );
  --mm-shadow:none
}

I second this request, accessibility is an important issue when dealing with government orgs.

Setting to major because of WCAG 2.x requirements.

Minor edit on issue title.

bisonbleu → created an issue.

For others who may land here... I also ran into this issue of «not seeing» the Bootstrap layouts for a couple of reasons:

• I was looking in the wrong place (The pencil icon » Configure), the BLB settings are under the Configure Section (on the left);
• The BLB settings will NOT appear on existing sections, you have to add new ones.

And this one removes references to versions 4.x of migrate_tools and migrate_plus.

Here is an alternate patch that considers the suggested «yellow» versions:

• migrate_tools 8.x-5.2
• migrate_plus 8.x-5.3

Similar issue. Drove me crazy for while. Applied patch in #195 → to Drupal 7.32 and I'm happy to report that it works!

Thanks @AndreyMaximov and thank you all!

p.s. the issue that lead me here → .