@ckeditor/ckeditor5-comments 42.0.2 → 43.0.0-alpha.1

package/dist/comments/ui/view/commentthreadheadercontextview.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @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
+ */
+/**
+ * @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
+ */
+import { View, type FocusableView } from 'ckeditor5/src/ui.js';
+import type { Locale } from 'ckeditor5/src/utils.js';
+/**
+ * A view displaying the context of a comment thread. The context is a piece of text from editor content
+ * that comment was created on. It gives users a better understanding of what is discussed in the thread.
+ */
+export default class CommentThreadHeaderContextView extends View implements FocusableView {
+    /**
+     * The text of the content, it corresponds to some of the content in the editor.
+     */
+    contextValue: string;
+    constructor(locale: Locale);
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
+}

package/dist/comments/ui/view/commentthreadheaderview.d.ts

@@ -9,14 +9,15 @@
 /**
  * @module comments/comments/ui/view/commentthreadheaderview
  */
-import { View, ButtonView } from 'ckeditor5/src/ui.js';
-import type { Locale } from 'ckeditor5/src/utils.js';
+import { View, ButtonView, FocusCycler, type FocusableView, type ViewCollection } from 'ckeditor5/src/ui.js';
+import { FocusTracker, KeystrokeHandler, type Locale } from 'ckeditor5/src/utils.js';
 import type { CommentThread } from '../../commentsrepository.js';
+import CommentThreadHeaderContextView from './commentthreadheadercontextview.js';
 export declare const MAX_CONTENT_LENGTH = 150;
 /**
  * A view for the comment thread header.
  */
-export default class CommentThreadHeaderView extends View {
+export default class CommentThreadHeaderView extends View implements FocusableView {
     locale: Locale;
     /**
      * Defines whether the context value exists.
@@ -34,6 +35,27 @@ export default class CommentThreadHeaderView extends View {
      * Button view for the button which reopen the comment thread.
      */
     reopenButtonView: ButtonView;
+    /**
+     * The view that displays the context of the comment thread to the user, for instance,
+     * the part of text the thread (first comment) relates to.
+     */
+    contextView: CommentThreadHeaderContextView;
+    /**
+     * The collection of focusable sub-views in the header.
+     */
+    readonly focusables: ViewCollection<FocusableView>;
+    /**
+     * Tracks information about DOM focus in the header view.
+     */
+    readonly focusTracker: FocusTracker;
+    /**
+     * Instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
+     */
+    readonly keystrokes: KeystrokeHandler;
+    /**
+     * Helps cycling over focusable {@link #commentThreadChildren} in the header view.
+     */
+    readonly focusCycler: FocusCycler;
     /**
      * @inheritDoc
      */
@@ -42,6 +64,10 @@ export default class CommentThreadHeaderView extends View {
      * @inheritDoc
      */
     render(): void;
+    /**
+     * @inheritDoc
+     */
+    focus(): void;
 }
 /**
  * Fired when a user performed an action that should lead to reopen the resolved comment thread.

package/dist/comments/ui/view/commentthreadinputview.d.ts

@@ -9,7 +9,7 @@
 /**
  * @module comments/comments/ui/view/commentthreadinputview
  */
-import { View } from 'ckeditor5/src/ui.js';
+import { type FocusableView, type FocusCycler, View } from 'ckeditor5/src/ui.js';
 import CommentInputView from './commentinputview.js';
 import type { Locale } from 'ckeditor5/src/utils.js';
 import type { EditorConfig } from 'ckeditor5/src/core.js';
@@ -17,7 +17,7 @@ import { UserView, type User } from 'ckeditor5-collaboration/src/collaboration-c
 /**
  * View that represents comment input area for a comment thread. Includes editor, user view and buttons.
  */
-export default class CommentThreadInputView extends View {
+export default class CommentThreadInputView extends View implements FocusableView {
     /**
      * Specifies whether the comment input view should be visible (`true`) or hidden (`false`).
      *
@@ -28,6 +28,13 @@ export default class CommentThreadInputView extends View {
      * Comment input view.
      */
     commentInputView: CommentInputView;
+    /**
+     * Helps move focus between focusable elements.
+     *
+     * **Note:** This property is a proxy is exposed for parent views to discover and use focus cycling capabilities of the view
+     * while in fact the actual implementation is in the {@link #commentInputView}.
+     */
+    focusCycler: FocusCycler;
     /**
      * User view for the input area. Presents the local user.
      */
@@ -42,4 +49,8 @@ export default class CommentThreadInputView extends View {
      * @inheritDoc
      */
     destroy(): Promise<void>;
+    /**
+     * @inheritDoc
+     */
+    focus(direction?: 1 | -1): void;
 }

package/dist/comments/ui/view/commentthreadview.d.ts

@@ -11,8 +11,8 @@
  * @publicApi
  */
 import { type Locale } from 'ckeditor5/src/utils.js';
-import { type User } from 'ckeditor5-collaboration/src/collaboration-core.js';
-import { ButtonView, type TemplateDefinition, type ViewCollection } from 'ckeditor5/src/ui.js';
+import { LateFocusButtonView, type User } from 'ckeditor5-collaboration/src/collaboration-core.js';
+import { type View, type ViewWithFocusCycler, type TemplateDefinition, type ViewCollection } from 'ckeditor5/src/ui.js';
 import BaseCommentThreadView from './basecommentthreadview.js';
 import type { CommentThread } from '../../commentsrepository.js';
 import type { CommentThreadConfig } from '../../../config.js';
@@ -20,7 +20,7 @@ declare const CommentThreadView_base: import("ckeditor5/src/utils.js").Mixed<typ
 /**
  * The default view for comment thread.
  */
-export default class CommentThreadView extends /* #__PURE__ -- @preserve */ CommentThreadView_base {
+export default class CommentThreadView extends /* #__PURE__ -- @preserve */ CommentThreadView_base implements ViewWithFocusCycler {
     isConfirm: boolean;
     cancelConfirm: () => void;
     showConfirm: (key: string, element: unknown) => Promise<void>;
@@ -50,7 +50,7 @@ export default class CommentThreadView extends /* #__PURE__ -- @preserve */ Comm
      *
      * @readonly
      */
-    readonly commentThreadChildren: ViewCollection;
+    readonly commentThreadChildren: ViewCollection<View>;
     /**
      * `ConfirmView` uses this element as a container for confirmation dialog.
      *
@@ -64,7 +64,7 @@ export default class CommentThreadView extends /* #__PURE__ -- @preserve */ Comm
      *
      * @readonly
      */
-    readonly resolveButton: ButtonView;
+    readonly resolveButton: LateFocusButtonView;
     /**
      * @inheritDoc
      */
@@ -84,8 +84,10 @@ export default class CommentThreadView extends /* #__PURE__ -- @preserve */ Comm
      *
      * 	attributes: {
      * 		class: [
+     * 			'ck',
      * 			'ck-thread',
      * 			'ck-reset_all-excluded',
+     * 			'ck-rounded-corners',
      * 			bind.if( 'isActive', 'ck-thread--active' ),
      * 			bind.if( 'isUnlinked', 'ck-thread--unlinked' ),
      * 			bind.if( 'isConfirm', 'ck-thread--remove-confirmation' ),
@@ -93,7 +95,10 @@ export default class CommentThreadView extends /* #__PURE__ -- @preserve */ Comm
      * 		],
      * 		'data-thread-id': this._model.id,
      * 		// Needed for managing focus after adding new comment.
-     * 		tabindex: -1
+     * 		tabindex: 0,
+     * 		role: 'listitem',
+     * 		'aria-label': bind.to( 'ariaLabel' ),
+     * 		'aria-describedby': this.ariaDescriptionView.id
      * 	},
      *
      * 	children: [

package/dist/comments/ui/view/commentview.d.ts

@@ -11,7 +11,7 @@
  * @publicApi
  */
 import { type Locale } from 'ckeditor5/src/utils.js';
-import { ButtonView, type TemplateDefinition, type ViewCollection, type DropdownView } from 'ckeditor5/src/ui.js';
+import { ButtonView, type TemplateDefinition, type DropdownView, type FocusableView, type ViewCollection } from 'ckeditor5/src/ui.js';
 import { UserView } from 'ckeditor5-collaboration/src/collaboration-core.js';
 import BaseCommentView from './basecommentview.js';
 import type { Comment } from '../../commentsrepository.js';
@@ -62,7 +62,7 @@ export default class CommentView extends /* #__PURE__ -- @preserve */ CommentVie
      * * the resolve comment thread button (only if the comment is the first comment),
      * * a dropdown with actions ({@link ~CommentView#dropdown `dropdown`}).
      */
-    actionBar: ViewCollection;
+    actionBar: ViewCollection<FocusableView>;
     /**
      * View collection which holds all the comments dropdown elements.
      *
@@ -110,7 +110,10 @@ export default class CommentView extends /* #__PURE__ -- @preserve */ CommentVie
      * 			'ck-comment__wrapper',
      * 			bind.if( 'isConfirm', 'ck-comment--remove-confirmation' )
      * 		],
-     * 		tabindex: -1
+     * 		tabindex: -1,
+     * 		'aria-label': bind.to( 'ariaLabel' ),
+     * 		'aria-describedby': this.ariaDescriptionView.id,
+     * 		role: 'listitem'
      * 	},
      *
      * 	children: [
@@ -126,7 +129,8 @@ export default class CommentView extends /* #__PURE__ -- @preserve */ CommentVie
      * 					bind.to( 'actionIndicator', value => value ? `ck-comment--${ value }` : '' )
      * 				],
      * 				'data-author-id': this._model.author.id,
-     * 				'data-comment-id': this._model.id
+     * 				'data-comment-id': this._model.id,
+     * 				role: 'group'
      * 			},
      *
      * 			children: [
@@ -199,6 +203,7 @@ export default class CommentView extends /* #__PURE__ -- @preserve */ CommentVie
      *
      * 							children: this.visibleView
      * 						},
+     * 						this.ariaDescriptionView,
      * 						{
      * 							tag: 'div',
      *
@@ -226,14 +231,6 @@ export default class CommentView extends /* #__PURE__ -- @preserve */ CommentVie
      * @inheritDoc
      */
     protected _createCommentInputView(): CommentInputView;
-    /**
-     * Gets the translated note which indicates that the comment comes from an external source.
-     */
-    getExternalCommentNote(): string;
-    /**
-     * Gets the translated notification text which indicates that author name comes from an external source.
-     */
-    getUserViewNotificationText(): string | null;
     /**
      * @inheritDoc
      */

package/dist/index-editor.css

@@ -101,6 +101,10 @@
 		border-top-left-radius:var(--ck-border-radius);
 	}
 
+.ck .ck-comment__wrapper:focus{
+		background:var(--ck-color-button-default-hover-background);
+	}
+
 .ck .ck-comment::after{
 		content:'';
 		display:block;
@@ -234,13 +238,23 @@
 }
 
 .ck .ck-thread{
+	border-radius:0;
+}
+
+.ck-rounded-corners .ck .ck-thread, .ck .ck-thread.ck-rounded-corners{
+		border-radius:var(--ck-border-radius);
+}
+
+.ck .ck-thread{
+
 	width:100%;
 	color:var(--ck-color-base-text);
 	outline:0;
 	background-color:var(--ck-color-base-background);
 	overflow:hidden;
-	transition:all 300ms ease;
-	border-radius:var(--ck-border-radius);
+	transition-property:color, background-color, width, outline;
+	transition-duration:300ms;
+	transition-timing-function:ease;
 }
 
 @media (prefers-reduced-motion: reduce){
@@ -250,6 +264,16 @@
 }
 	}
 
+.ck .ck-thread:focus{
+		outline:var(--ck-focus-ring);
+		box-shadow:0 0 0 4px var(--ck-color-focus-outer-shadow);
+	}
+.ck-balloon-panel:has( .ck-thread:focus){
+	outline:none;
+	border:var(--ck-focus-ring);
+	box-shadow:var(--ck-drop-shadow), var(--ck-focus-outer-shadow);
+}
+
 .ck .ck-thread__header{
 	display:flex;
 	justify-content:space-between;
@@ -293,8 +317,15 @@
 .ck .ck-thread__header .ck-context .ck-context__value{
 			overflow:hidden;
 			text-overflow:ellipsis;
+			border:1px solid transparent;
 		}
 
+.ck .ck-thread__header .ck-context .ck-context__value:focus{
+				outline:none;
+				border:var(--ck-focus-ring);
+				box-shadow:var(--ck-focus-outer-shadow), 0 0;
+			}
+
 .ck .ck-thread__header .ck-context.overlay{
 			display:inline-block;
 			position:absolute;

package/dist/index.css

@@ -106,6 +106,19 @@
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-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
+ */
+
+/**
+ * A helper to combine multiple shadows.
+ */
+
+/**
+ * Gives an element a drop shadow so it looks like a floating panel.
+ */
+
 :root {
 	--ck-color-comment-background: hsl(210, 52%, 97%);
 	--ck-color-comment-separator: hsl(210, 52%, 87%);
@@ -136,6 +149,10 @@
 		border-top-left-radius: var(--ck-border-radius);
 	}
 
+.ck .ck-comment__wrapper:focus {
+		background: var(--ck-color-button-default-hover-background);
+	}
+
 .ck .ck-comment::after {
 		content: '';
 		display: block;
@@ -273,6 +290,34 @@ We are styling resetting list-style because of parent <ul> element. */
  * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-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
+ */
+
+/**
+ * A visual style of focused element's border.
+ */
+/*
+ * 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
+ */
+/**
+ * A helper to combine multiple shadows.
+ */
+/**
+ * Gives an element a drop shadow so it looks like a floating panel.
+ */
+/*
+ * 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
+ */
+/**
+ * Implements rounded corner interface for .ck-rounded-corners class.
+ *
+ * @see $ck-border-radius
+ */
+
 :root {
 	--ck-color-thread-remove-background: var(--ck-color-comment-remove-background);
 	--ck-color-comment-count: hsl(210, 52%, 57%);
@@ -285,13 +330,28 @@ We are styling resetting list-style because of parent <ul> element. */
 }
 
 .ck .ck-thread {
+	border-radius: 0;
+}
+
+.ck-rounded-corners .ck .ck-thread, .ck .ck-thread.ck-rounded-corners {
+		border-radius: var(--ck-border-radius);
+}
+
+.ck .ck-thread {
+
 	width: 100%;
 	color: var(--ck-color-base-text);
 	outline: 0;
 	background-color: var(--ck-color-base-background);
 	overflow: hidden;
-	transition: all 300ms ease;
-	border-radius: var(--ck-border-radius);
+
+	/*
+	 * Beware: Using "transition: all" breaks focus management (unable to obtain focus on show)
+	 * because the view is displayed in a dialog that gets toggled via "visibility" property.
+	 */
+	transition-property: color, background-color, width, outline;
+	transition-duration: 300ms;
+	transition-timing-function: ease;
 }
 
 @media (prefers-reduced-motion: reduce) {
@@ -301,6 +361,31 @@ We are styling resetting list-style because of parent <ul> element. */
 }
 	}
 
+.ck .ck-thread:focus {
+		/*
+		 * We cannot use the ck-focus-ring mixin here because it adds a border that would need to stay transparent
+		 * in non-focused state and create an odd space inside the surrounding annotation container.
+		 */
+		outline: var(--ck-focus-ring);
+
+		/*
+		 * We cannot use the ck-box-shadow mixin because we're using outline instead of border (see the comment above).
+		 * And the shadow size has to be custom because outline is rendered on top of the shadow.
+		 */
+		box-shadow: 0 0 0 4px var(--ck-color-focus-outer-shadow);
+	}
+
+/*
+ * In case of inline annotations, their focus styles get hoisted to the balloon panel to work around overflow that would
+ * otherwise get them cropped..
+ */
+.ck-balloon-panel:has( .ck-thread:focus ) {
+	/* Disable native outline. */
+	outline: none;
+	border: var(--ck-focus-ring);
+	box-shadow: var(--ck-drop-shadow), var(--ck-focus-outer-shadow);
+}
+
 .ck .ck-thread__header {
 	display: flex;
 	justify-content: space-between;
@@ -344,8 +429,16 @@ We are styling resetting list-style because of parent <ul> element. */
 .ck .ck-thread__header .ck-context .ck-context__value {
 			overflow: hidden;
 			text-overflow: ellipsis;
+			border: 1px solid transparent;
 		}
 
+.ck .ck-thread__header .ck-context .ck-context__value:focus {
+				/* Disable native outline. */
+				outline: none;
+				border: var(--ck-focus-ring);
+				box-shadow: var(--ck-focus-outer-shadow), 0 0;
+			}
+
 .ck .ck-thread__header .ck-context.overlay {
 			display: inline-block;
 			position: absolute;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ export { default as BaseCommentView } from './comments/ui/view/basecommentview.j
 export { default as BaseCommentThreadView } from './comments/ui/view/basecommentthreadview.js';
 export { default as CommentsListView } from './comments/ui/view/commentslistview.js';
 export { default as CommentView } from './comments/ui/view/commentview.js';
+export { default as CommentThreadView } from './comments/ui/view/commentthreadview.js';
 export { default as CommentThreadInputView } from './comments/ui/view/commentthreadinputview.js';
 export type { CommentsConfig, SidebarConfig, CommentsClipboardCopyConfig } from './config.js';
 export type { default as CommentsEditing } from './comments/commentsediting.js';