Missing keyboard accessibility for the mobile menu button. The button should be accessible via keyboard navigation and should toggle the menu on Enter/Space key press. While the click handler will work for keyboard users due to button semantics, screen readers would benefit from aria attributes.

Add accessibility attributes:

<button 
  @click="mobileMenuOpen = !mobileMenuOpen" 
  class="md:hidden text-gray-300 hover:text-primary"
  :aria-expanded="mobileMenuOpen"
  aria-label="Toggle mobile menu">

[nitpick] Using @click.stop on the modal content prevents event propagation, but the modal backdrop click handler relies on clicks reaching the outer div. While this works as intended, it's better to explicitly check the event target to avoid potential issues and make the intent clearer:

<div v-if="isOpen" @click="handleBackdropClick" class="...">
  <div class="...">

const handleBackdropClick = (e) => {
  if (e.target === e.currentTarget) {
    closeModal()
  }
}

The modal lacks ARIA attributes for proper screen reader support. Screen readers won't announce this as a dialog or communicate its purpose.

Add appropriate ARIA attributes:

<div 
  v-if="isOpen" 
  @click="closeModal" 
  class="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm"
  role="dialog"
  aria-modal="true"
  aria-labelledby="discord-modal-title">
  <div @click.stop class="...">
    <h3 id="discord-modal-title" class="text-2xl font-bold text-white flex items-center gap-2">

Missing focus trap in modal. When the modal is open, keyboard users can still tab to elements behind the modal, which violates accessibility best practices. The modal should trap focus within itself and return focus to the triggering element when closed.

Consider using Vue's focus management or a library like focus-trap to ensure keyboard navigation is contained within the modal when open.

The modal backdrop should close on Escape key press for better user experience. Currently, users can only close the modal by clicking the X button or clicking outside.

Add keyboard event handler:

<script setup>
// ... existing code

onMounted(() => {
  const handleEscape = (e) => {
    if (e.key === 'Escape' && props.isOpen) {
      closeModal()
    }
  }
  window.addEventListener('keydown', handleEscape)
  
  onUnmounted(() => {
    window.removeEventListener('keydown', handleEscape)
  })
})
</script>

Missing error handling for clipboard API. The navigator.clipboard.writeText call can fail (e.g., on insecure contexts, permissions denied), but the error is only logged to console. Users should receive visual feedback when the copy operation fails.

Update error handling:

const copyUsername = async () => {
  try {
    await navigator.clipboard.writeText(props.username)
    copied.value = true
    setTimeout(() => {
      copied.value = false
    }, 2000)
  } catch (err) {
    console.error('Failed to copy:', err)
    // Show error feedback to user
    copied.value = 'Error'
    setTimeout(() => {
      copied.value = false
    }, 2000)
  }
}

And update the button text: {{ copied === 'Error' ? 'Failed' : copied ? 'Copied!' : 'Copy' }}