In HTML, scrollable regions are introduced by adding an overflow property to an HTML element through CSS. If an HTML element contains more content than it can display within its defined width and height, the overflow property introduces scrollbars to let users move the visible viewport of the content being displayed.
Users who navigate using keyboard can also scroll through the contents of such an element. If keyboard focus is placed on the container element that has the overflow CSS property or an interactive element within the region, using the arrow keys allows users to scroll the viewport to reveal any content that overflows.
In Pega Constellation, scrollable regions may be introduced by tables embedded in a page. These tables may contain enough content that the defined width (or height) of the container element cannot display it all at once, and thus introduces a scrollbar.
Keyboard focus needs to be on either the container element itself or an actionable element within to allow keyboard users to access the scrolling functionality. Pega does not provide the scrollable region with a tabindex attribute to make the region explicitly focusable, which may be flagged by some automated testing tools as lacking a focusable element for the scrollable region. This is because browsers automatically handle making scrollable regions focusable with keyboard, ensuring that users will always be able to bring focus to the region and scroll using the arrow keys.
This feature from browsers is introduced automatically when a scrollable region contains no focusable elements within, ensuring that in either scenario a keyboard user can still access the scrolling functionality.