元素已展开但aria-expanded仍显示false，点击时aria未正常展开问题排查求助

Hey there, let's work through this accessibility issue you're facing—where your element stays expanded but aria-expanded still shows false, and clicking doesn't update the attribute. Here are the key fixes to resolve this:

1. You're Missing Dynamic JavaScript to Sync the State #

The aria-expanded attribute is not automatic—it won't update on its own just because your element visually expands. You need to manually tie it to your toggle logic with JavaScript.

Your current HTML has a static aria-expanded="false" value, so it'll never change unless you update it via code. Here's how to fix that:

First, grab your button and the target dialog element, then add event listeners for both mouse clicks and keyboard interactions (critical for accessibility, since you've set role="button"):

// Get references to your elements
const tooltipButton = document.querySelector('.filter-tooltip');
const targetDialog = document.getElementById('filter_dialog');

// Add click handler
tooltipButton.addEventListener('click', toggleTooltipState);

// Add keyboard support (required for button role: Enter/Space keys)
tooltipButton.addEventListener('keydown', (e) => {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault(); // Prevent page scroll on Space key
    toggleTooltipState();
  }
});

// Core toggle function
function toggleTooltipState() {
  // Check current expanded state
  const isCurrentlyExpanded = tooltipButton.getAttribute('aria-expanded') === 'true';
  
  // Flip the aria-expanded value
  tooltipButton.setAttribute('aria-expanded', !isCurrentlyExpanded);
  
  // Sync with your actual dialog visibility (adjust this to match your existing logic)
  targetDialog.hidden = isCurrentlyExpanded;
  // Or if you use CSS classes for visibility:
  // targetDialog.classList.toggle('hidden');
}

2. Ensure Your Visual State Matches aria-expanded #

If you're using CSS classes (like expanded) to control the visual open/closed state, make sure you update aria-expanded at the same time you toggle the class. For example:

function toggleTooltipState() {
  tooltipButton.classList.toggle('expanded');
  const isExpanded = tooltipButton.classList.contains('expanded');
  
  // Sync the accessibility attribute
  tooltipButton.setAttribute('aria-expanded', isExpanded);
  
  // Update dialog visibility
  targetDialog.hidden = !isExpanded;
}

3. Verify aria-controls Points to a Valid Element #

Double-check that the element with id="filter_dialog" actually exists on your page. If aria-controls references a non-existent element, screen readers might ignore the attribute entirely, which can make the state change less noticeable (or break it).

4. Test with Screen Readers #

After implementing the fixes, test with tools like NVDA, VoiceOver, or JAWS to confirm:

• The screen reader announces the button's purpose and current aria-expanded state
• Clicking or using keyboard keys (Enter/Space) correctly toggles both the visual state and the aria-expanded value

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