feat(Chat): Set default chatBehavior which uses Enter/Esc keys (#443)

* Set default chatBehavior which using Enter/Esc keys

* Update the description of behavior

* Update changelog

Author: sophieH29

CHANGELOG.md

@@ -28,6 +28,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### Features
 - Make `Grid` keyboard navigable by implementing `gridBehavior` @sophieH29 ([#398](https://github.com/stardust-ui/react/pull/398))
 - Set the ref of the `FocusZone` in `Embed` mode @sophieH29 ([#435](https://github.com/stardust-ui/react/pull/435))
+- Set default `chatBehavior` which uses Enter/Esc keys @sophieH29 ([#443](https://github.com/stardust-ui/react/pull/443))
 
 ### Documentation
 - Add all missing component descriptions and improve those existing @levithomason ([#400](https://github.com/stardust-ui/react/pull/400))

src/index.ts

@@ -109,15 +109,9 @@ export {
   default as radioGroupItemBehavior,
 } from './lib/accessibility/Behaviors/Radio/radioGroupItemBehavior'
 export { default as chatBehavior } from './lib/accessibility/Behaviors/Chat/chatBehavior'
-export {
-  default as chatEnterEscBehavior,
-} from './lib/accessibility/Behaviors/Chat/chatEnterEscBehavior'
 export {
   default as chatMessageBehavior,
 } from './lib/accessibility/Behaviors/Chat/chatMessageBehavior'
-export {
-  default as chatMessageEnterEscBehavior,
-} from './lib/accessibility/Behaviors/Chat/chatMessageEnterEscBehavior'
 export { default as gridBehavior } from './lib/accessibility/Behaviors/Grid/gridBehavior'
 
 //

src/lib/accessibility/Behaviors/Chat/chatBehavior.ts

@@ -7,8 +7,8 @@ const CHAT_FOCUSZONE_ATTRIBUTE = 'chat-focuszone'
 /**
  * @description
  * Adds role 'presentation' until we come up with final roles for chat.
- * Adds a vertical focus zone navigation with a last message as a default tabbable element, pressing right arrow key focuses inside a message.
- * Adds a left arrow key action which focuses the chat, i.e., moves key handling from inside a message back to the chat list.
+ * Adds a vertical focus zone navigation with a last message as a default tabbable element, pressing enter key focuses inside a message.
+ * Adds a escape key action which focuses the chat, i.e., moves key handling from inside a message back to the chat list.
  */
 const ChatBehavior: Accessibility = (props: any) => ({
   attributes: {
@@ -19,7 +19,7 @@ const ChatBehavior: Accessibility = (props: any) => ({
   focusZone: {
     mode: FocusZoneMode.Wrap,
     props: {
-      shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.ArrowRight,
+      shouldEnterInnerZone: event => keyboardKey.getCode(event) === keyboardKey.Enter,
       direction: FocusZoneDirection.vertical,
       defaultTabbableElement: `[${CHAT_FOCUSZONE_ATTRIBUTE}] > * > *:last-child`, // select last chat message by default
       [CHAT_FOCUSZONE_ATTRIBUTE]: '', // allows querying the default active element
@@ -28,7 +28,7 @@ const ChatBehavior: Accessibility = (props: any) => ({
   keyActions: {
     root: {
       focus: {
-        keyCombinations: [{ keyCode: keyboardKey.ArrowLeft }],
+        keyCombinations: [{ keyCode: keyboardKey.Escape }],
       },
     },
   },

src/lib/accessibility/Behaviors/Chat/chatEnterEscBehavior.ts

@@ -21,9 +21,5 @@ export { default as radioGroupBehavior } from './Behaviors/Radio/radioGroupBehav
 export { default as radioGroupItemBehavior } from './Behaviors/Radio/radioGroupItemBehavior'
 export { default as popupBehavior } from './Behaviors/Popup/popupBehavior'
 export { default as chatBehavior } from './Behaviors/Chat/chatBehavior'
-export { default as chatEnterEscBehavior } from './Behaviors/Chat/chatEnterEscBehavior'
 export { default as chatMessageBehavior } from './Behaviors/Chat/chatMessageBehavior'
-export {
-  default as chatMessageEnterEscBehavior,
-} from './Behaviors/Chat/chatMessageEnterEscBehavior'
 export { default as gridBehavior } from './Behaviors/Grid/gridBehavior'