Keyboard accessisibility

[akumar2812]

Would it be possible to make the editor keyboard accessible and provide label/name for all the formatting buttons ?

[kolkov]

Hello! Can you explain what you mean?

[kolkov]

@akumar2812 I think you mean keyboard shortcuts?

[cpratiksha]

I think , this is about usability in UI. Thats called accessibility mean we can make that editor readable for visual impaired people . Yes I need some solution on it if anyone can help

[cpratiksha]

@akumar2812 I think you mean keyboard shortcuts?

Accessibility means - Make edit accessible for visual impaired people, they can used application by keyboard . please follow this link https://www.w3.org/standards/webdesign/accessibility

[kolkov]

Thanks, I try to read this article.

[kolkov]

Excellent suggestion! Keyboard accessibility is important for WCAG compliance.

Current limitations:

• Toolbar buttons may lack proper ARIA labels
• No keyboard shortcuts for formatting
• Tab navigation may not work properly

Proposed improvements:

1. ARIA labels for all buttons:

<button aeButton 
  aria-label="Bold (Ctrl+B)"
  title="Bold">
  <ae-icon name="bold"></ae-icon>
</button>

2. Keyboard shortcuts:

@HostListener('keydown', ['$event'])
onKeydown(event: KeyboardEvent) {
  if (event.ctrlKey || event.metaKey) {
    switch (event.key) {
      case 'b': this.executeCommand('bold'); break;
      case 'i': this.executeCommand('italic'); break;
      case 'u': this.executeCommand('underline'); break;
      // ... etc
    }
  }
}

3. Tab navigation through toolbar
4. Focus management
5. Screen reader support

This is a valid accessibility enhancement. Labeling as enhancement, accessibility, and help wanted.

Would welcome a PR! This would make the editor WCAG 2.1 compliant.