Remove aria-hidden attributes from focusables (#4659)

* Remove aria-hidden

* Add entry

Author: compulim

CHANGELOG.md

@@ -29,6 +29,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Fixed
 
 -  Fixes [#4557](https://github.com/microsoft/BotFramework-WebChat/issues/4557). Flipper buttons in carousels and suggested actions is now renamed to "next/previous" from "left/right", by [@compulim](https://github.com/compulim), in PR [#4646](https://github.com/microsoft/BotFramework-WebChat/pull/4646)
+-  Fixes [#4652](https://github.com/microsoft/BotFramework-WebChat/issues/4652). Keyboard help screen, activity focus traps, and chat history terminator should not be hidden behind `aria-hidden` because they are focusable, by [@compulim](https://github.com/compulim), in PR [#4659](https://github.com/microsoft/BotFramework-WebChat/pull/4659)
 
 ### Changed
 

packages/component/src/BasicTranscript.tsx

@@ -563,7 +563,6 @@ const InternalTranscript = forwardRef<HTMLDivElement, InternalTranscriptProps>(
           <Fragment>
             <FocusRedirector redirectRef={rootElementRef} />
             <div
-              aria-hidden={true}
               aria-labelledby={terminatorLabelId}
               className="webchat__basic-transcript__terminator"
               ref={terminatorRef}

packages/component/src/Transcript/KeyboardHelp.tsx

@@ -84,8 +84,6 @@ const KeyboardHelp: FC<{}> = () => {
 
   return (
     <div
-      // When the dialog is not shown, "aria-hidden" helps to prevent scan mode from able to scan the content of the dialog.
-      aria-hidden={!shown}
       aria-labelledby={headerLabelId}
       className={classNames('webchat__keyboard-help', keyboardHelpStyleSet + '', {
         // Instead of using "hidden" attribute, we are using CSS to hide the dialog.

packages/component/src/Utils/FocusRedirector.tsx

@@ -24,11 +24,14 @@ const FocusRedirector: FC<FocusRedirectorProps> = ({ className, onFocus, redirec
     onFocus && onFocus();
   }, [onFocus, redirectRef]);
 
-  // For NVDA, we should set aria-hidden="true".
-  // When using NVDA in browse mode, press up/down arrow keys will focus on this redirector.
-  // This redirector is designed to capture TAB only and should not react on browse mode.
-  // However, reacting with browse mode is currently okay. Just better to leave it alone.
-  return <div aria-hidden="true" className={className} onFocus={handleFocus} tabIndex={0} />;
+  // 2023-02-23: With NVDA 2022.1 and 2022.4, when in browse mode, up/down arrow keys no longer focus.
+  //             We no longer need to set aria-hidden="true" to hide it from browse mode.
+  // 2021-09-21: For NVDA, we should set aria-hidden="true".
+  //             When using NVDA in browse mode, press up/down arrow keys will focus on this redirector.
+  //             This redirector is designed to capture TAB only and should not react on browse mode.
+  //             However, reacting with browse mode is currently okay. Just better to leave it alone.
+
+  return <div className={className} onFocus={handleFocus} tabIndex={0} />;
 };
 
 FocusRedirector.defaultProps = {