请求开发aria-required属性布尔值校验逻辑并排查问题

Hey there! Let's break down why your current code isn't working and get that validation logic sorted out.

First, the Issue with Your Existing Filter Function #

Your current filter code has a core misunderstanding of how hasAttribute() works:

filter: function(item){ 
  if(item.hasAttribute(true) || item.hasAttribute(false)){ 
    return true; 
  } else { 
    return false 
  } 
}

hasAttribute() only accepts a string argument for the attribute name—passing true or false here converts those booleans to strings "true" and "false", so you're actually checking if the element has attributes named "true" or "false" (not evaluating the value of aria-required at all). That's why your logic isn't catching invalid aria-required values.

Correct Approach to Validate aria-required #

Per WAI-ARIA specs, aria-required should only be set to the boolean values true or false (stored as strings in the DOM). To flag elements where this attribute has an invalid value (like "yes", "1", "required", etc.), we need to:

1. Grab the actual value of the aria-required attribute from the element
2. Check if that value is not exactly "true" or "false"

Here's the fixed filter function, plus context for your configuration:

{
  lang: 'fr',
  name: 'test aria',
  query: '[aria-required]',
  filter: function(item) {
    // Fetch the raw attribute value from the DOM
    const ariaRequiredVal = item.getAttribute('aria-required');
    // Return true (flag the element) if the value isn't a valid boolean string
    return ariaRequiredVal !== 'true' && ariaRequiredVal !== 'false';
  },
  explanations: 3,
  tags: ['accessibility', 'form', 'aria', 'tags']
}

Adding the Alert Trigger #

Once your filter identifies invalid elements, you'll want to trigger your prompt. If you're using this in a custom script or testing tool, you can iterate over the matched items to show alerts:

// Example: After running your query/filter
document.querySelectorAll('[aria-required]').forEach(item => {
  const ariaVal = item.getAttribute('aria-required');
  if (ariaVal !== 'true' && ariaVal !== 'false') {
    alert(`Invalid aria-required value "${ariaVal}" found on element: ${item.tagName}`);
  }
});

Quick Tips #

• In HTML, all attribute values are stored as strings—so even if you write aria-required="true", it’s a string "true" in the DOM, not a JavaScript boolean.
• For strict accessibility compliance, stick to lowercase "true"/"false" values. If you need to account for accidental capitalization, you can add a case-insensitive check (e.g., ariaRequiredVal.toLowerCase() !== 'true').

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