@ckeditor/ckeditor5-code-block 41.3.1 → 41.4.0

package/lang/translations/zh-cn.po

@@ -25,6 +25,22 @@ msgctxt "A language of the code block in the editor content when no specific pro
 msgid "Plain text"
 msgstr "纯文本"
 
+msgctxt "Assistive technologies label for leaving the code block with a specified programming language. Example: 'Leaving JavaScript code snippet'"
+msgid "Leaving %0 code snippet"
+msgstr "正在退出 %0 代码片段"
+
+msgctxt "Assistive technologies label for entering the code block with a specified programming language. Example: 'Entering JavaScript code snippet'"
+msgid "Entering %0 code snippet"
+msgstr "正在输入 %0 代码片段"
+
+msgctxt "Assistive technologies label for entering the code block with unspecified programming language."
+msgid "Entering code snippet"
+msgstr "正在输入代码片段"
+
+msgctxt "Assistive technologies label for leaving the code block with unspecified programming language."
+msgid "Leaving code snippet"
+msgstr "正在退出代码片段"
+
 msgctxt "The accessible label of the menu bar button that inserts a code block into editor content."
 msgid "Code block"
 msgstr "代码块"

package/lang/translations/zh.po

@@ -25,6 +25,22 @@ msgctxt "A language of the code block in the editor content when no specific pro
 msgid "Plain text"
 msgstr "純文字"
 
+msgctxt "Assistive technologies label for leaving the code block with a specified programming language. Example: 'Leaving JavaScript code snippet'"
+msgid "Leaving %0 code snippet"
+msgstr "離開 %0 程式碼片段"
+
+msgctxt "Assistive technologies label for entering the code block with a specified programming language. Example: 'Entering JavaScript code snippet'"
+msgid "Entering %0 code snippet"
+msgstr "進入 %0 程式碼片段"
+
+msgctxt "Assistive technologies label for entering the code block with unspecified programming language."
+msgid "Entering code snippet"
+msgstr "進入程式碼片段"
+
+msgctxt "Assistive technologies label for leaving the code block with unspecified programming language."
+msgid "Leaving code snippet"
+msgstr "離開程式碼片段"
+
 msgctxt "The accessible label of the menu bar button that inserts a code block into editor content."
 msgid "Code block"
 msgstr "程式碼區塊"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ckeditor/ckeditor5-code-block",
-  "version": "41.3.1",
+  "version": "41.4.0",
   "description": "Code block feature for CKEditor 5.",
   "keywords": [
     "ckeditor",
@@ -13,7 +13,8 @@
   "type": "module",
   "main": "src/index.js",
   "dependencies": {
-    "ckeditor5": "41.3.1"
+    "ckeditor5": "41.4.0",
+    "lodash-es": "4.17.21"
   },
   "author": "CKSource (http://cksource.com/)",
   "license": "GPL-2.0-or-later",
@@ -25,6 +26,7 @@
     "directory": "packages/ckeditor5-code-block"
   },
   "files": [
+    "dist",
     "lang",
     "src/**/*.js",
     "src/**/*.d.ts",

package/src/codeblockediting.d.ts

@@ -2,9 +2,6 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/**
- * @module code-block/codeblockediting
- */
 import { Plugin, type Editor } from 'ckeditor5/src/core.js';
 import { ShiftEnter } from 'ckeditor5/src/enter.js';
 /**
@@ -33,4 +30,11 @@ export default class CodeBlockEditing extends Plugin {
      * @inheritDoc
      */
     afterInit(): void;
+    /**
+     * Observe when user enters or leaves code block and set proper aria value in global live announcer.
+     * This allows screen readers to indicate when the user has entered and left the specified code block.
+     *
+     * @internal
+     */
+    private _initAriaAnnouncements;
 }

package/src/codeblockediting.js

@@ -2,16 +2,13 @@
  * @license Copyright (c) 2003-2024, CKSource Holding sp. z o.o. All rights reserved.
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  */
-/**
- * @module code-block/codeblockediting
- */
 import { Plugin } from 'ckeditor5/src/core.js';
 import { ShiftEnter } from 'ckeditor5/src/enter.js';
 import { UpcastWriter } from 'ckeditor5/src/engine.js';
 import CodeBlockCommand from './codeblockcommand.js';
 import IndentCodeBlockCommand from './indentcodeblockcommand.js';
 import OutdentCodeBlockCommand from './outdentcodeblockcommand.js';
-import { getNormalizedAndLocalizedLanguageDefinitions, getLeadingWhiteSpaces, rawSnippetTextToViewDocumentFragment } from './utils.js';
+import { getNormalizedAndLocalizedLanguageDefinitions, getLeadingWhiteSpaces, rawSnippetTextToViewDocumentFragment, getCodeBlockAriaAnnouncement } from './utils.js';
 import { modelToViewCodeBlockInsertion, modelToDataViewSoftBreakInsertion, dataViewToModelCodeBlockInsertion, dataViewToModelTextNewlinesInsertion, dataViewToModelOrphanNodeConsumer } from './converters.js';
 const DEFAULT_ELEMENT = 'paragraph';
 /**
@@ -195,6 +192,31 @@ export default class CodeBlockEditing extends Plugin {
             data.preventDefault();
             evt.stop();
         }, { context: 'pre' });
+        this._initAriaAnnouncements();
+    }
+    /**
+     * Observe when user enters or leaves code block and set proper aria value in global live announcer.
+     * This allows screen readers to indicate when the user has entered and left the specified code block.
+     *
+     * @internal
+     */
+    _initAriaAnnouncements() {
+        const { model, ui, t } = this.editor;
+        const languageDefs = getNormalizedAndLocalizedLanguageDefinitions(this.editor);
+        let lastFocusedCodeBlock = null;
+        model.document.selection.on('change:range', () => {
+            const focusParent = model.document.selection.focus.parent;
+            if (!ui || lastFocusedCodeBlock === focusParent || !focusParent.is('element')) {
+                return;
+            }
+            if (lastFocusedCodeBlock && lastFocusedCodeBlock.is('element', 'codeBlock')) {
+                ui.ariaLiveAnnouncer.announce(getCodeBlockAriaAnnouncement(t, languageDefs, lastFocusedCodeBlock, 'leave'));
+            }
+            if (focusParent.is('element', 'codeBlock')) {
+                ui.ariaLiveAnnouncer.announce(getCodeBlockAriaAnnouncement(t, languageDefs, focusParent, 'enter'));
+            }
+            lastFocusedCodeBlock = focusParent;
+        });
     }
 }
 /**

package/src/utils.d.ts

@@ -8,6 +8,7 @@
 import type { Editor } from 'ckeditor5/src/core.js';
 import type { CodeBlockLanguageDefinition } from './codeblockconfig.js';
 import type { DocumentSelection, Element, Model, Position, Schema, Text, UpcastWriter, ViewDocumentFragment } from 'ckeditor5/src/engine.js';
+import { type LocaleTranslate } from 'ckeditor5/src/utils.js';
 /**
  * Returns code block languages as defined in `config.codeBlock.languages` but processed:
  *
@@ -136,3 +137,7 @@ export declare function isModelSelectionInCodeBlock(selection: DocumentSelection
  * @returns Check result.
  */
 export declare function canBeCodeBlock(schema: Schema, element: Element): boolean;
+/**
+ * Get the translated message read by the screen reader when you enter or exit an element with your cursor.
+ */
+export declare function getCodeBlockAriaAnnouncement(t: LocaleTranslate, languageDefs: Array<CodeBlockLanguageDefinition>, element: Element, direction: 'enter' | 'leave'): string;

package/src/utils.js

@@ -207,3 +207,21 @@ export function canBeCodeBlock(schema, element) {
     }
     return schema.checkChild(element.parent, 'codeBlock');
 }
+/**
+ * Get the translated message read by the screen reader when you enter or exit an element with your cursor.
+ */
+export function getCodeBlockAriaAnnouncement(t, languageDefs, element, direction) {
+    const languagesToLabels = getPropertyAssociation(languageDefs, 'language', 'label');
+    const codeBlockLanguage = element.getAttribute('language');
+    if (codeBlockLanguage in languagesToLabels) {
+        const language = languagesToLabels[codeBlockLanguage];
+        if (direction === 'enter') {
+            return t('Entering %0 code snippet', language);
+        }
+        return t('Leaving %0 code snippet', language);
+    }
+    if (direction === 'enter') {
+        return t('Entering code snippet');
+    }
+    return t('Leaving code snippet');
+}