Skip to content

Feature : Add “Quick Exit” (Panic Button) for User Safety #143

@vivek0369

Description

@vivek0369

📌 Description

Implement a “Quick Exit” / “Panic Button” feature across the SafeVoice platform to help users instantly leave the website in unsafe situations.

This feature is commonly used in domestic violence, harassment support, and mental health platforms where users may need to quickly hide their activity from someone nearby.

When activated, the feature should:

  • Immediately redirect the user to a safe/neutral website (e.g., Google, Weather page, YouTube, etc.)
  • Prevent the SafeVoice page from appearing in browser history using window.location.replace()
  • Be accessible from every page through a floating action button
  • Support a hidden keyboard shortcut (example: pressing Esc key 3 times rapidly)

This enhancement significantly improves user safety, trust, accessibility, and UX quality.


✨ Proposed Features

1️⃣ Floating “Quick Exit” Button

  • Fixed floating button visible on all pages
  • Minimal and discreet UI
  • Tooltip: "Quick Exit" or "Leave Site Quickly"

Suggested Behavior

window.location.replace("https://www.google.com");

UI Ideas

  • Floating bottom-right button
  • Red or neutral emergency-style icon
  • Optional keyboard accessibility support

2️⃣ Keyboard Shortcut Trigger

Add a hidden accessibility shortcut such as:

  • Press Esc 3 times quickly
  • Or Ctrl + Shift + X

Benefits

  • Helps users exit instantly without moving the mouse
  • Useful during panic situations

3️⃣ Browser History Protection

Use:

window.location.replace()

instead of:

window.location.href

This ensures:

  • The SafeVoice page does not remain in browser history
  • Clicking the browser “Back” button won’t reopen the platform immediately

4️⃣ Mobile-Friendly Support

  • Large tap area for touch devices
  • Responsive placement
  • Should not obstruct important UI elements

🛠️ Technical Implementation Suggestions

Frontend

  • Create reusable component:
components/QuickExitButton.jsx
  • Add global listener for keyboard shortcut:
useEffect(() => {
  let escCount = 0;

  const handler = (e) => {
    if (e.key === "Escape") {
      escCount++;

      setTimeout(() => {
        escCount = 0;
      }, 1000);

      if (escCount >= 3) {
        window.location.replace("https://www.google.com");
      }
    }
  };

  window.addEventListener("keydown", handler);

  return () => window.removeEventListener("keydown", handler);
}, []);

✅ Acceptance Criteria

  • Floating “Quick Exit” button visible on all pages
  • Button redirects instantly to a safe website
  • Uses window.location.replace()
  • Keyboard shortcut implemented
  • Mobile responsive
  • Accessibility-friendly
  • Proper tooltip/ARIA labels added
  • No performance impact

🎯 Expected Outcome

This feature improves:

  • User safety
  • Real-world usability
  • Accessibility
  • Trustworthiness of the platform
  • Product quality and empathy-driven UX

It also demonstrates strong understanding of:

  • UX/Product thinking
  • Browser History API
  • Accessibility practices
  • Real-world safety design patterns

🏷️ Labels

GSSoC'26 enhancement frontend UX accessibility good first issue

Metadata

Metadata

Labels

good first issueGood for newcomersgssoc'26Contribution for Girlscript Summer of Code'26level:intermediateGSSoC: Intermediate difficulty - 35 ptstype:accessibilityGSSoC: Accessibility improvementstype:designGSSoC: UI or UX design changestype:featureGSSoC: New featuretype:performanceGSSoC: Performance improvements

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions