修复Axe检测的下拉框键盘可访问性WCAG违规（Enter键触发展开）

It looks like your issue stems from the fact that while your dynamically added multi-selects are focusable via Tab, they don't respond to the Enter key to expand—this is exactly what's tripping up the scrollable-region-focusable rule, which requires keyboard users to be able to interact with scrollable content.

Your previous attempts (adding tabindex, focusable, etc.) didn't work because the element was already focusable; the problem is missing keyboard event handling to trigger the dropdown expansion when Enter is pressed. Here's how to fix this:

Step 1: Bind Enter Key Event to Your Dynamic Selects #

Since you're adding these selects dynamically, you have two solid options:

Option 1: Bind Event Immediately After Creating the Select

Modify your existing code to attach a keydown listener right after appending the select. Given your data-live-search/data-actions-box attributes, it looks like you're using Bootstrap Select—we'll use its toggle method to open the dropdown:

self.filterFields.forEach(x => {
  var titleDep = $('th[data-field="' + x + '"]');
  if (titleDep.find('select').length === 0 && self.foreignKeyData[x]) {
    // Create and append the select
    const select = $('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
    titleDep.append(select);
    
    // Initialize Bootstrap Select if you haven't already
    select.selectpicker();
    
    // Add Enter key listener
    select.on('keydown', function(e) {
      if (e.key === 'Enter' && !e.isDefaultPrevented()) {
        e.preventDefault();
        $(this).selectpicker('toggle'); // Trigger dropdown toggle
      }
    });
  }
});

// Repeat the same pattern for self.stringFilters
self.stringFilters.forEach(x => {
  var titleDep = $('th[data-field="' + x + '"]');
  if (titleDep.find('select').length === 0 && self.stringFilterValues[x]) {
    const select = $('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
    titleDep.append(select);
    
    select.selectpicker();
    
    select.on('keydown', function(e) {
      if (e.key === 'Enter' && !e.isDefaultPrevented()) {
        e.preventDefault();
        $(this).selectpicker('toggle');
      }
    });
  }
});

Option 2: Use Event Delegation (More Robust for Dynamic Content)

If you prefer a cleaner approach that works for any future dynamically added selects, use event delegation on a parent element (like the table or document):

// Add this once, outside your forEach loops
$(document).on('keydown', 'th[data-field] select[multiple][data-live-search]', function(e) {
  if (e.key === 'Enter' && !e.isDefaultPrevented()) {
    e.preventDefault();
    $(this).selectpicker('toggle');
  }
});

// Keep your original append code as is, just make sure to initialize the selectpicker
self.filterFields.forEach(x => {
  var titleDep = $('th[data-field="' + x + '"]');
  if (titleDep.find('select').length === 0 && self.foreignKeyData[x]) {
    const select = $('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
    titleDep.append(select);
    select.selectpicker();
  }
});

self.stringFilters.forEach(x => {
  var titleDep = $('th[data-field="' + x + '"]');
  if (titleDep.find('select').length === 0 && self.stringFilterValues[x]) {
    const select = $('<select aria-label="Filter ' + x + ' to show" multiple data-live-search="true" data-actions-box="true" tabindex="0" data-size="10"></select>');
    titleDep.append(select);
    select.selectpicker();
  }
});

Why This Works #

• The keydown listener catches the Enter key press when the select is focused.
• e.preventDefault() stops any default Enter behavior that might interfere.
• Calling selectpicker('toggle') triggers the dropdown to open, making the scrollable list of options accessible via keyboard (arrow keys, etc.), which satisfies the scrollable-region-focusable rule's requirement for keyboard access to scrollable content.

Note for Non-Bootstrap-Select Setups #

If you're using a different dropdown library, replace selectpicker('toggle') with the appropriate method to expand your dropdown (e.g., .trigger('click') for a custom dropdown, but be sure to test keyboard behavior thoroughly).

内容的提问来源于stack exchange，提问作者Liam