fix: Remove console error and improve copy-code utility cross-browser…

[Ruthwik000]

Pull Request: Fix Copy-Code Console Error

📝 Description

This PR fixes the console error in the copy-code utility that was generating unnecessary noise when no code content was found to copy. The changes improve cross-browser compatibility and provide user-friendly visual feedback instead of developer-focused console errors.

Key Improvements:

• Replace console.error with user-friendly visual feedback
• Add secure context check for modern clipboard API
• Enhance fallback method for older browsers and HTTP contexts
• Add mobile device support with setSelectionRange
• Implement visual success/error states on copy buttons
• Improve error handling with graceful degradation

Fixes console noise when copy operation fails and ensures copy functionality works across all browsers including Firefox, Safari, and older browser versions.

🔗 Related Issue

Fixes #493 - Copy-Code Error Handling

🔄 Type of Change

• 🐛 Bug Fix
• ⚡ Performance Improvement
• ♿ Accessibility Enhancement

📷 Visual Changes

Before: Console error appears when copy fails
After: Visual button feedback (green "Copied!" or red "Failed") with no console errors

🧪 Testing Performed

📱 Browser Compatibility

• Chrome (Version: Latest)
• Firefox (Version: Latest)
• Safari (Version: Latest)
• Edge (Version: Latest)
• Mobile Chrome (Device: Android/iOS)
• Mobile Safari (Device: iOS)

🖥️ Responsive Design

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

✅ Test Cases

1. Copy code blocks in modern browsers (Chrome, Edge, Firefox)
2. Copy code blocks in older browsers with clipboard API disabled
3. Copy code blocks on mobile devices
4. Test copy functionality over HTTP vs HTTPS
5. Test with malformed code blocks (missing data-code attribute)
6. Verify no console errors appear during failed copy operations

♿ Accessibility

• Proper heading hierarchy maintained
• ARIA labels added where needed (aria-label on copy buttons)
• Color contrast requirements met
• Keyboard navigation works correctly
• Screen reader testing performed

📋 PR Checklist

• My code follows the project's coding style guidelines
• I have tested these changes locally
• I have updated the documentation accordingly
• My changes generate no new warnings or console errors
• I have added tests that prove my fix/feature works
• All existing tests pass successfully
• I have checked for and resolved any merge conflicts
• I have optimized images/assets (if applicable)
• I have validated all links are working correctly

💭 Additional Notes

This fix addresses the user experience issue where developers would see console errors during normal website usage. The new implementation:

1. Gracefully handles all browser scenarios without generating console noise
2. Provides immediate visual feedback to users about copy success/failure
3. Maintains backward compatibility with older browsers
4. Improves mobile experience with enhanced text selection

The changes are minimal and focused, ensuring no breaking changes to existing functionality while significantly improving the user experience across all browsers and devices.

🔧 Technical Details

Before (Issues):

if (!codeContent) {
  console.error('No code content found to copy'); // ❌ Console noise
  return;
}

After (Fixed):

if (!codeContent) {
  showErrorFeedback(button, 'No content to copy'); // ✅ User feedback
  return;
}

Cross-Browser Compatibility:

• Modern browsers (HTTPS): Uses navigator.clipboard.writeText()
• Older browsers / HTTP: Falls back to document.execCommand('copy')
• Mobile devices: Enhanced with setSelectionRange() for better text selection
• Failed operations: Visual feedback instead of console errors

---

📚 Reviewer Resources

• Contributing Guide
• Style Guide
• Community Chat

Thank you for contributing to the Sugar Labs website! 🎉

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• TypeScript linting failed

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

❌ Checks Failed

Status: 🚫 Not ready to merge

Please fix the following issues before merging:

📝 Code Linting Failed

Issue: Code formatting or style violations detected.

Specific problems:

• Markdown linting failed

How to fix:

Platform	Command	Description
🐧 Unix/macOS/Linux	npm run format	Auto-fix all formatting issues
🪟 Windows	npm run format:file <filename>	Fix specific files
🔍 Check Only	npm run format:check	Check formatting without fixing

Need help with linting? Check out the Linting Guide for Windows Users for detailed instructions.

---

🛠️ Next Steps

1. Fix the issues mentioned above
2. Test locally to ensure everything works
3. Push your fixes to this branch
4. Wait for re-check - This bot will automatically run again

🤖 This comment will be updated automatically when you push new commits

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Ruthwik000]

@sa-fw-an hi can you kindly review the pr and merge it

[github-actions]

🎉 All Checks Passed!

Status: ✅ Ready to merge

✅ Completed Workflows

Workflow	Status	Details
🔨 Continuous Integration	✅ Passed	Build completed successfully
📝 Code Linting	✅ Passed	All formatting and style checks passed

---

🚀 This PR is ready for review and can be safely merged to main branch!

Great work! Your code meets all quality standards. 👏

[Ruthwik000]

hi maintainers @sa-fw-an @FirePheonix !! kindly review the pr and merge it