✨ add UseAccessibleKeybindings flag for better accessiblity (#55)

Author: igotinfected

src/Spillgebees.Blazor.RichTextEditor.Assets/src/interfaces/spillgebees.ts

@@ -19,7 +19,8 @@ interface EditorFunctions {
         theme: string,
         debugLevel: string,
         fonts: string[],
-        eventDebounceIntervalInMilliseconds: number): Promise<void>;
+        eventDebounceIntervalInMilliseconds: number,
+        useAccessibleKeybindings: boolean): Promise<void>;
     setEditorEnabledState(quillContainer: HTMLElement, isEditorEnabled: boolean): void;
     getContent(quillContainer: HTMLElement): string;
     setContent(quillContainer: HTMLElement, content: string): void;

src/Spillgebees.Blazor.RichTextEditor.Assets/src/rich-text-editor.ts

@@ -41,7 +41,8 @@ const createEditor = async (
     theme?: string | undefined,
     debugLevel?: string | boolean | undefined,
     fonts: string[] = new Array<string>,
-    eventDebounceIntervalInMilliseconds: number = 500): Promise<void> => {
+    eventDebounceIntervalInMilliseconds: number = 500,
+    useAccessibleKeybindings: boolean = true): Promise<void> => {
 
     Quill.register('modules/blotFormatter2', BlotFormatter2);
 
@@ -53,8 +54,20 @@ const createEditor = async (
         Quill.register(fontAttributor, true);
     }
 
-    let quillOptions: any ={
+    let customKeybindings = {};
+    if (useAccessibleKeybindings)
+    {
+        customKeybindings = {
+            // disables indenting with a tab character in favour of tabbing out of the component for accessibility
+            tab: null
+        };
+    }
+
+    let quillOptions: any = {
         modules: {
+            keyboard: {
+                bindings: customKeybindings
+            },
             toolbar: toolbar,
             blotFormatter2: {
                 image: {

src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Examples/AccessibleKeybindingsExample.razor

@@ -0,0 +1,29 @@
+<div>
+    <h3>Setting the <code class="hljs">UseAccessibleKeybindings</code> parameter to <code class="hljs">true</code>
+        overrides some of the Quill default keybindings for better accessibility. Currently this only overrides the
+        default <code class="hljs">Tab</code> behaviour to tab out of the component instead of indenting the current
+        line.</h3>
+    <CodeSnippet Code="@Code">
+        <Component>
+            <CodeSnippet Code="@_content"
+                         CodeFormat="CodeFormat.Html"
+                         Summary="Show HTML">
+                <Component>
+                    <RichTextEditor @bind-Content="@_content"
+                                    UseAccessibleKeybindings="@true"
+                                    ToolbarOptions="@ToolbarOptions.BasicToolbarOptions" />
+                </Component>
+            </CodeSnippet>
+        </Component>
+    </CodeSnippet>
+</div>
+
+
+@code {
+    private const string Code =
+@"<RichTextEditor @bind-Content=""@_content""
+                UseAccessibleKeybindings=""@true""
+                ToolbarOptions=""@ToolbarOptions.BasicToolbarOptions"" />";
+
+    private string _content = "<b>Hello from an accessible editor! \ud83d\udc4b</b>";
+}

src/Spillgebees.Blazor.RichTextEditor.Samples/Spillgebees.Blazor.RichTextEditor.Samples.Shared/Pages/RichTextEditorExamplesPageContent.razor

@@ -29,6 +29,8 @@
                 <IsEditorEnabledRichTextEditorExample />
 
                 <NoToolbarExample />
+
+                <AccessibleKeybindingsExample />
             </div>
 
             <a href="other"

src/Spillgebees.Blazor.RichTextEditor/Components/BaseRichTextEditor.razor.cs

@@ -82,6 +82,17 @@ public string? Text
     [Parameter]
     public int DebounceIntervalInMilliseconds { get; set; } = 500;
 
+    /// <summary>
+    /// <para>
+    /// This replaces default Quill keybindings for better accessibility, notably making the <c>Tab</c> character tab out of the component.
+    /// </para>
+    /// </summary>
+    /// <remarks>
+    /// Can only be set once. Defaults to <c>false</c> for backwards compatibility purposes but may be switched to <c>true</c> in future versions.
+    /// </remarks>
+    [Parameter]
+    public bool UseAccessibleKeybindings { get; set; }
+
     /// <summary>
     /// <para>
     /// Uses <see cref="Spillgebees.Blazor.RichTextEditor.Components.Toolbar.ToolbarOptions.BasicToolbarOptions"/> by default.
@@ -341,7 +352,8 @@ await RichTextEditorJs.CreateEditorAsync(
             theme: Theme.ToString().ToLower(),
             debugLevel: DebugLevel.ToString().ToLower(),
             fonts: ToolbarOptions.Fonts,
-            DebounceIntervalInMilliseconds);
+            DebounceIntervalInMilliseconds,
+            UseAccessibleKeybindings);
 
         InternalContent = Content;
         await SetContentAsync(Content);

src/Spillgebees.Blazor.RichTextEditor/Components/RichTextEditorJs.cs

@@ -21,7 +21,8 @@ internal static ValueTask CreateEditorAsync(
         string theme,
         string debugLevel,
         List<string>? fonts,
-        int debounceIntervalInMilliseconds = 0)
+        int debounceIntervalInMilliseconds = 0,
+        bool useAccessibleKeybindings = true)
         => jsRuntime.SafeInvokeVoidAsync(
             logger,
             $"{JsNamespace}.createEditor",
@@ -35,7 +36,8 @@ internal static ValueTask CreateEditorAsync(
             theme,
             debugLevel,
             fonts,
-            debounceIntervalInMilliseconds);
+            debounceIntervalInMilliseconds,
+            useAccessibleKeybindings);
 
     internal static ValueTask<string> GetContentAsync(
         IJSRuntime jsRuntime,