Popover and dialog elements with lots of content can be inaccessible

[teddybradford]

What is the issue with the HTML Standard?

Since the default CSS for dialog and [popover] selectors use a fixed or absolute position and their heights are set to fit-content, if the popover's content length exceeds the viewport size, there seems to be no way to interact with parts of the content without using custom CSS to declare a scroll overflow. This can be problematic if someone has author CSS turned off in their browser for one reason or another—and even more so if the content is something like legal terms and conditions.

Perhaps the UA styles should include something like max-height: 100svb; by default so that the contents are accessible even if they overflow past the viewport?

Desktop screenshot

Mobile screenshot

Can't scroll this. 🙁

Sample code

<button type="button" popovertarget="lorem">
  Open
</button>

<dialog id="lorem" popover>
  <p>
    Et sint quo debitis minus doloremque sit. Quis praesentium id eveniet. Sed velit eos omnis quis quasi. Eaque
    cumque rem quis officia possimus aut autem.
  </p>

  <p>
    Quod aut dolores ex sit alias dolorem. Iure molestiae quasi aut soluta deserunt dignissimos veniam quidem.
    Quidem aut iste odio est et. Voluptatibus non et distinctio accusantium tempore fugit. Recusandae eaque qui
    distinctio iste quis. Quod deserunt temporibus minus praesentium nobis.
  </p>

  <p>
    A saepe qui adipisci perspiciatis dignissimos dolorem. Et dolorum autem similique ut est sed sed consequatur.
    Doloremque dolorum accusamus ad praesentium rem. Et ut sunt quidem.
  </p>

  <p>
    Culpa quis assumenda temporibus rem quis. Cupiditate molestiae suscipit amet excepturi pariatur et
    consequuntur iusto. Blanditiis accusamus quos voluptas tempora inventore est. Quidem ipsa laudantium ut
    consequatur quasi quia et.
  </p>

  <p>Placeat recusandae deleniti et non. Odit est molestiae soluta nisi sed corporis. Tempora amet rem sed.</p>

  <p>
    Et sint quo debitis minus doloremque sit. Quis praesentium id eveniet. Sed velit eos omnis quis quasi. Eaque
    cumque rem quis officia possimus aut autem.
  </p>

  <p>
    Quod aut dolores ex sit alias dolorem. Iure molestiae quasi aut soluta deserunt dignissimos veniam quidem.
    Quidem aut iste odio est et. Voluptatibus non et distinctio accusantium tempore fugit. Recusandae eaque qui
    distinctio iste quis. Quod deserunt temporibus minus praesentium nobis.
  </p>

  <p>
    A saepe qui adipisci perspiciatis dignissimos dolorem. Et dolorum autem similique ut est sed sed consequatur.
    Doloremque dolorum accusamus ad praesentium rem. Et ut sunt quidem.
  </p>

  <p>
    Culpa quis assumenda temporibus rem quis. Cupiditate molestiae suscipit amet excepturi pariatur et
    consequuntur iusto. Blanditiis accusamus quos voluptas tempora inventore est. Quidem ipsa laudantium ut
    consequatur quasi quia et.
  </p>

  <p>Placeat recusandae deleniti et non. Odit est molestiae soluta nisi sed corporis. Tempora amet rem sed.</p>
</dialog>

[annevk]

cc @nt1m @josepharhar @mfreed7 @whatwg/a11y

[mfreed7]

Hmm, interesting issue. I agree it might make sense to add a UA rule to make long popover/dialog text scrollable. Is max-height: 100svb; the right such rule?

There's a (perhaps small?) risk of compat for this change, particularly for dialogs. Having said that, perhaps for those sites that change as a result of the new rule, it'll be an improvement?

[josepharhar]

I noticed that removing the [popover] { height: fit-content } rule from the UA styles seems to fix this, and without it I think that popovers would fill the whole viewport.

max-height:100svb seems like an easy fix, but would be worth asking CSSWG people if this is how height:fit-content is supposed to work and whether there are any other options.

[zcorpan]

cc @whatwg/css for @josepharhar's question in the previous comment.