title: Focus outside of visible area
body: <p>WCAG states that an element that has focus should always be visible to the user. This is especially hard, if not impossible in a chat window where space is limited. </p>
  
  <p>When a keyboard or screen reader user tabs to the first button option and selects it, the content scrolls and button is no longer visible, breaking the "focus always visible" WCAG rule. Also if there is more than one button in the list the focus stays on the button and if they continue to tab, the window will scroll to where the focus is set. This is disorienting, and one can argue that when selecting a button the other options are not relevant, since new options are now available.</p>
  
  <p>Example: <a href="https://recordit.co/2jDDvqg98J" rel="nofollow noreferrer">https://recordit.co/2jDDvqg98J</a></p>
  
  <p>One option is to stop scrolling when reaching the button so that the button is visible. But I feel that this is not a good experience and a compromise to comply with the WCAG rule. I have done some research and all conversational UI, with no exception, scroll to the bottom when new content is printed in the chat. If I deviate in the manner above to keep within WCAG I am breaking <a href="https://www.nngroup.com/videos/jakobs-law-internet-ux/" rel="nofollow noreferrer">Jakobs Law.</a></p>
  
  <p>Another option is to remove the focus from the selected button to the input field or the firs button in the next/new list of available buttons. But I feel that this will for blind users removes all points of reference.</p>
  
  <p>Are there any other options or designs that you can think of to solve this in an accessible way?</p>