Accessibility Test Concole Scripts

accessibility-console-scripts.js

// Find all elements with click handlers that aren't properly marked as interactive
const allElements = document.querySelectorAll('*');
const problematicElements = Array.from(allElements).filter(el => {
  // Get click event listeners if any
  const eventListeners = getEventListeners(el);
  const hasClickListener = eventListeners && eventListeners.click && eventListeners.click.length > 0;
  
  if (!hasClickListener) return false;
  
  // Check if element is already an interactive element
  const tagName = el.tagName.toLowerCase();
  const interactiveTags = ['button', 'a', 'input', 'select', 'textarea', 'summary'];
  const isInteractiveTag = interactiveTags.includes(tagName);
  
  // Check if it has proper ARIA role
  const role = el.getAttribute('role');
  const interactiveRoles = ['button', 'link', 'checkbox', 'menuitem', 'tab', 'radio', 'switch','menu'];
  const hasInteractiveRole = role && interactiveRoles.includes(role.toLowerCase());
  
  // Return true for elements that have click listeners but aren't properly accessible
  return hasClickListener && !isInteractiveTag && !hasInteractiveRole;
});

// Display the results with source information where possible
console.log('Found ' + problematicElements.length + ' potentially inaccessible clickable elements:');

problematicElements.forEach((el, index) => {
  // Basic element identifier
  const elementId = el.id ? `#${el.id}` : '';
  const elementClass = el.className ? `.${el.className.replace(/\s+/g, '.')}` : '';
  const elementSelector = `${el.tagName.toLowerCase()}${elementId}${elementClass}`;
  
  console.group(`${index + 1}. ${elementSelector}`);
  console.log(el);

  // Get click handler information
  const clickListeners = getEventListeners(el).click || [];
  clickListeners.forEach((listener, i) => {
    //console.log(`Click handler #${i + 1}:`);
    
    // Try to get source information
    try {
      //console.log(listener.listener.toString());
      
      // Force an error to get the stack trace
      const stack = new Error().stack;
      //console.log('Defined near:', stack);
      
      // Alternative: Log information about the handler which may contain file references
      if (listener.listener.caller) {
        //console.log('Caller:', listener.listener.caller.toString());
      }
    } catch (e) {
      //console.log('Could not get full source information');
    }
  });
  
  // Check for inline event handlers
  if (el.hasAttribute('onclick')) {
    //console.log('Inline onclick:', el.getAttribute('onclick'));
  }
  
  console.groupEnd();
});