Moved from #3502292: Ensures interactive controls are not nested, OP by @mgifford.

Problem/Motivation

A screen reader user should be able to control their site.

Steps to reproduce

Title: WCAG 4.1.2: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (.module-list__module-summary)

Tags: Accessibility, WCAG 4.1.2, nested-interactive

Issue: Ensures interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies (nested-interactive - https://dequeuniversity.com/rules/axe/4.9/nested-interactive?application=msftAI)

Target application: Extend | another test of My Drupal CMS site - https://drupal-cms.ddev/admin/modules

Element path: #edit-modules-metatag-dc-enable-description > .module-list__module-summary

Snippet:

Related paths:

#edit-modules-metatag-dc-enable-description > .module-list__module-summary > .text.module-description > a:nth-child(1)

#edit-modules-metatag-dc-enable-description > .module-list__module-summary > .text.module-description > a[href$="dublincore.org/"]

How to fix:

Fix any of the following:

Element has focusable descendants

Environment: Microsoft Edge version 132.0.0.0

Screenshot from module page

====

This accessibility issue was found using Accessibility Insights for Web 2.44.0 (axe-core 4.9.1), a tool that helps find and fix accessibility issues. Get more information & download this tool at http://aka.ms/AccessibilityInsights.

Proposed resolution

User interface changes

Data model changes

Release notes snippet

Comments

pameeela created an issue. See original summary.

pameeela’s picture

Issue summary: View changes
pameeela’s picture

Issue summary: View changes
nicxvan’s picture

This might be an admin theme issue actually.

I'm adding the related issue for more though.

mgifford’s picture

So looking at this again, maybe the problem is in the module. In this case:
https://www.drupal.org/project/metatag

If you look at Core there aren't any links in the summary section. I think we either have to change how summary/detail elements work to expand code or stop folks from putting links in summaries. But then where would you put the links?

<tr data-drupal-selector="edit-modules-dblog" class="module-list__module">
        <td class="module-list__checkbox">
          <div class="js-form-item form-item js-form-type-checkbox form-type--checkbox form-type--boolean js-form-item-modules-dblog-enable form-item--modules-dblog-enable form-item--no-label form-item--disabled">
          <input data-drupal-selector="edit-modules-dblog-enable" disabled="disabled" type="checkbox" id="edit-modules-dblog-enable" name="modules[dblog][enable]" value="1" checked="checked" class="form-checkbox form-boolean form-boolean--type-checkbox">
        </div>

        </td>
        <td class="module-list__module">
          <label id="module-dblog" for="edit-modules-dblog-enable" class="module-list__module-name table-filter-text-source">Database Logging</label>
        </td>
        <td class="expand priority-low module-list__description">
          <details class="js-form-wrapper form-wrapper module-list__module-details claro-details" id="edit-modules-dblog-enable-description" data-once="details">
            <summary aria-controls="edit-modules-dblog-enable-description" role="button" aria-expanded="false" class="claro-details__summary module-list__module-summary"><span class="text module-description">Logs system events in the database.</span><span class="claro-details__summary-summary"></span></summary>
            <div class="claro-details__wrapper module-details__wrapper">
              <div class="module-details__description">
                <div class="module-details__requirements">
                  <div class="module-details__requirement">Machine name: <span dir="ltr" class="table-filter-text-source"><span dir="ltr" class="table-filter-text-source">dblog</span></span></div>
                                      <div class="module-details__requirement">Version: 12.0-dev</div>
                                                                      </div>
                                  <div class="module-details__links">
                                          <a href="/admin/help/dblog" class="module-link module-link-help action-link action-link--small action-link--icon-questionmark" data-drupal-selector="edit-modules-dblog-links-help" id="edit-modules-dblog-links-help">Help <span class="visually-hidden">for Database Logging</span></a>
                                          
                                          <a href="/admin/config/development/logging" class="module-link module-link-configure action-link action-link--small action-link--icon-cog" data-drupal-selector="edit-modules-dblog-links-configure" id="edit-modules-dblog-links-configure">Configure <span class="visually-hidden">Database Logging</span></a>
                                      </div>
                              </div>
            </div>
          </details>
        </td>
      </tr>

That is pretty typical. Does it ever make sense to have links in a summary element? Probably not. In which case how do we stop (or reduce) that?

<summary aria-controls="edit-modules-dblog-enable-description" role="button" aria-expanded="false" class="claro-details__summary module-list__module-summary"><span class="text module-description">Logs system events in the database.</span><span class="claro-details__summary-summary"></span></summary>

The detail/summary element is used all over Drupal, so we have to do more than find a way to apply it to admin/modules

mgifford’s picture

nicxvan’s picture

Yeah I'm not sure where this belongs, but I don't think it's an extension issue, maybe theme or render?

It feels similar to #933004: Test that all form elements have a #title for accessibility maybe we need a more genetic way to check output or render arrays for certain properties.