...
...
)
+ // - Perhaps, we should add role="application" to container of Web Chat to disable browse mode, as we are not a web document and already offered a full-fledge navigation experience
+ if (document.getElementById(currentTarget.getAttribute('aria-labelledby')).contains(target)) {
+ return focusInside();
+ }
+ },
+
// When a child of the activity receives focus, notify the transcript to set the aria-activedescendant to this activity.
handleFocus: () => {
setFocusedActivityKey(getActivityUniqueId(activity));
@@ -627,22 +683,10 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
break;
case 'Enter':
- if (!fromEndOfTranscriptIndicator) {
- const focusedActivityEntry = renderingElements.find(({ key }) => key === focusedActivityKey);
-
- if (focusedActivityEntry) {
- const { element: focusedActivityElement } =
- activityElementsRef.current.find(({ activity }) => activity === focusedActivityEntry.activity) || {};
-
- if (focusedActivityElement) {
- const [firstTabbableElement] = tabbableElements(focusedActivityElement).filter(
- ({ className }) => className !== 'webchat__basic-transcript__activity-sentinel'
- );
-
- firstTabbableElement && firstTabbableElement.focus();
- }
- }
- }
+ // This is capturing plain ENTER.
+ // When screen reader is not running, or screen reader is running outside of scan mode, the ENTER key will be captured here.
+ fromEndOfTranscriptIndicator ||
+ renderingElements.find(({ key }) => key === focusedActivityKey)?.focusInside();
break;
@@ -666,7 +710,7 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
event.stopPropagation();
}
},
- [focusedActivityKey, activityElementsRef, focusRelativeActivity, focus, terminatorRef, renderingElements]
+ [focusedActivityKey, focusRelativeActivity, focus, renderingElements, terminatorRef]
);
const labelId = useUniqueId('webchat__basic-transcript__label');
@@ -793,6 +837,7 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
activity,
callbackRef,
focusActivity,
+ handleClick,
handleFocus,
handleKeyDown,
handleMouseDownCapture,
@@ -810,7 +855,7 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
) => {
const { ariaLabelID, element } =
activityElementsRef.current.find(entry => entry.activity === activity) || {};
- const activeDescendant = focusedActivityKey === key;
+ const isActiveDescendant = focusedActivityKey === key;
const isContentInteractive = !!(element
? tabbableElements(element.querySelector('.webchat__basic-transcript__activity-box')).length
: 0);
@@ -823,12 +868,18 @@ const InternalTranscript = ({ activityElementsRef, className }) => {
'webchat__basic-transcript__activity--from-bot': role !== 'user',
'webchat__basic-transcript__activity--from-user': role === 'user'
})}
- // Set "id" for valid for accessibility.
+ // Set "id" is required for accessibility active descendant feature.
/* eslint-disable-next-line react/forbid-dom-props */
- id={activeDescendant ? activeDescendantElementId : undefined}
+ id={isActiveDescendant ? activeDescendantElementId : undefined}
key={key}
+ // This is for capturing "do primary action" done by the screen reader.
+ // With screen reader, will narrate "Press ENTER to interact". But in scan mode, ENTER means "do primary action".
+ // If `onClick` is set, screen reader will send click event when "do primary action".
+ // Related to #4020.
+ onClick={handleClick}
onFocus={handleFocus}
onKeyDown={handleKeyDown}
+ // When NVDA is in browse mode, using up/down arrow key to "browse" will dispatch "click" and "mousedown" events for