Skip to content

Page main container and scrollbar accessibility #1393

@Venefilyn

Description

@Venefilyn

Within a page layout the current style for both core and react is to overflow the body content inside the page main container.

However, due to the fact that Patternfly v6 introduced a card-style layout for the main container instead of the blocky-style that was in v5, we now have the scrollbar inside the main container rather than on the side in the viewport.

To see this in action, here is a codebox that introduces a scroll
https://codesandbox.io/p/sandbox/2f3pxg

This created a concern for us as we upgraded in that we wonder how this affects accessibility and if there are any improvements that can be made or designed from Patternfly's side to ensure better navigation. In particular, as the scrollbar is not on the edge of the window anymore we lose out on a huge hitbox according to Fitt's Law, which in short meant that in PF6 the scrollbar has shrunk from infinite width to the width the browser chooses.

In PF5 one could move their cursor to the edge of the screen and keep moving (given you are fullscreen and don't have another display in that direction) and you would still be able to click and move the scrollbar. Which in turn gives you the infinite space.

With all that said, I'm wondering about the accessibility reduction of this and if the niceness of the design outweigh the impact of the accessibility reduction. If so, are there any design decisions we can create or some standard we can implement to further improve the scrollbar hitbox situation?

Computerphile video I saw about it when it came out (jeez so long ago now)

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    Status

    Needs triage

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions