HTML Report: Replace show/hide buttons with elegant icon controls

[jbrinkman]

Problem Description

The current show/hide buttons for HTML report sections are likely large, prominently placed, and don't follow modern UI patterns for collapsible content. This creates a cluttered interface and reduces the professional appearance of the reports.

Current Behavior

• Show/hide controls are likely large or prominently placed buttons
• Controls may not follow consistent UI patterns
• Interface feels cluttered with prominent toggle controls
• May not be optimized for mobile devices or accessibility

Desired Behavior

• Replace large show/hide buttons with smaller, elegant expand/collapse icon buttons
• Position icons in the title bar on the right-hand side of section cards
• Use standard, universally recognized expand/collapse icons
• Ensure the interface feels clean and professional
• Maintain accessibility standards

Implementation Details

Icon Design

• Use semantic icons: ▼ for expanded sections, ▶ for collapsed sections
• Alternative: Use chevron icons (down/right) or plus/minus symbols
• Ensure icons are appropriately sized (not too small, not too large)
• Icons should be clearly visible but not dominate the section headers

Positioning

• Position controls in section title bars, right-aligned
• Maintain consistent spacing from the right edge of cards
• Ensure icons don't interfere with section titles or other header content
• Consider vertical centering within the title bar

Interaction Design

• Add subtle hover states (color change, slight scaling, etc.)
• Include smooth transitions for state changes
• Provide visual feedback when clicked
• Ensure touch-friendly target sizes for mobile devices

Accessibility

• Add proper ARIA labels ("Expand section", "Collapse section")
• Ensure keyboard navigation support (tab order, enter/space activation)
• Maintain sufficient color contrast for icons
• Provide screen reader announcements for state changes

Expected User Experience

1. User sees clean section headers with small, unobtrusive toggle icons on the right
2. Icons clearly indicate current state (expanded/collapsed)
3. Hovering over icons provides visual feedback
4. Clicking icons smoothly toggles section visibility
5. Interface feels modern and professional
6. Works seamlessly on both desktop and mobile devices

Acceptance Criteria

• Show/hide buttons replaced with smaller expand/collapse icon buttons
• Icons positioned in section title bars (right-aligned)
• Consistent icon sizing and styling across all sections
• Hover states and smooth transitions implemented
• Touch-friendly target sizes for mobile devices
• Accessibility compliance (ARIA labels, keyboard navigation)
• Visual feedback for icon interactions
• Icons use semantic symbols (▼/▶ or similar)
• Clean, professional appearance maintained

Design Specifications

Icon Sizing

• Recommend 16-20px for desktop
• Ensure minimum 44px touch target for mobile
• Maintain visual balance with section titles

Colors

• Use theme-consistent colors
• Ensure sufficient contrast (WCAG AA compliance)
• Subtle hover state changes

Animation

• Smooth icon rotation or state transitions (200-300ms)
• Consistent easing functions
• No jarring or distracting effects

Files to Modify

• HTML report template files
• CSS files for icon styling and positioning
• JavaScript files for interaction handling
• src/DotNetApiDiff/Reporting/HtmlFormatter.cs (if template generation changes)

Priority

Low-Medium - Improves visual design and user experience

Additional Context

This enhancement focuses on polishing the user interface to create a more professional and modern appearance. While functional, it significantly improves the overall user experience and makes the tool feel more polished and production-ready.

[jbrinkman]

We're going in another direction.