Button is hidden behind thumbnail

Hi @tfranz, can you clarify your setup a bit?

1. Which module(s) were you using? (oembed_lazyload_youtube or a customized one?)

2. Can you paste in a configuration export of the module(s) settings?

Admittedly, I haven't performed any accessibility testing except when the oembed_lazyload_youtube submodule is in use.

Thanks for your report.

I've adjusted the patch to be a bit more opinionated, including rudimentary hover/focus state styles.

Default state:

Hover/focus state:

Does this seem agreeable?

1. Which module(s) were you using? (oembed_lazyload_youtube or a customized one?)

I'm just using oembed_lazyload – not oembed_lazyload_youtube.

2. Can you paste in a configuration export of the module(s) settings?

I use it on the cores media-video-field:

langcode: de
status: true
dependencies:
config:
- field.field.media.external_video.field_media_oembed_video
- media.type.external_video
module:
- oembed_lazyload
id: media.external_video.default
targetEntityType: media
bundle: external_video
mode: default
content:
field_media_oembed_video:
type: lazyload_oembed
label: hidden
settings:
max_width: 1920
max_height: 1080
strategy: onclick
intersection_observer_margin: ''
third_party_settings: { }
weight: 1
region: content
hidden:
created: true
langcode: true
name: true
thumbnail: true
uid: true

Two more things:

Your patch works fine with Olivero 9.4.8., but with Bartik 9.4.8 i had to add some more styling to get it to work:

.oembed-lazyload__button {
    z-index: 0;
}

And: I like the new button styles!
But I usually prefer it when modules don't include "decorative" styles like font-weight and rounded corners, otherwise I have to override them again in my designs.
Although I find your implementation nicer, I would therefore do without it in my opinion.

This is enough to be usable from my point of view:

.oembed-lazyload__visible-label {
  padding: 1rem;
  background-color: buttonface;
}

Fair enough on the styles. My only requirement there is that the "off the shelf" setup on core themes should be accessible.

Modules not providing a completely working "off the shelf" base functionality is my current #1 pet peeve with Drupal :-). Not all users have the budget to spend on doing custom development work to get a contributed solution to a presentable state for stakeholders.

I think that we should provide an optional, opinionated library as a submodule in a follow-up that provides a "modern and shiny" off the shelf design.

Yes, that's a good point and i can understand it.

Instead of a submodule i would be happy enough, if all the nice stylings would be in a separate css-file.
So i can simply "switch it off" or override that file - if i want.

Just as a suggestion, a new patch with the following additional changes:

1. Rename the stylesheets to "oembed-lazyload" to make them easier to find in listings
2. Separation of the stylesheets into necessary and design, so that the design can be removed or overwritten more easily
3. And a few minor design enhancements - while we're at it ;)

Thanks, this all looks good. I've manually tested this against 10.1.x with Olivero.

I'll draft up some release notes as part of this, as there's a slight chance that users may have to update some custom theme CSS if they've overridden anything. All in all, for such a large accessibility improvement that's a small price to ask.

If you wouldn't mind, can you take a look at these release notes? I'll cut 2.0.1 as soon as the verbiage has a second set of eyes.

Release notes:

A major accessibility issue has been resolved that obscured button text for visual users. Resolving this issue required some DOM changes and opinionated styles to be added. The changes are as follows:

• The button text is now wrapped by a <span> element with class oembed-lazyload__visible-label.
• The existing styles present in common.css have been moved to a different file name, oembed-lazyload.css.
• An additional set of opinionated styles have been added in oembed-lazyload-style.css that provide a usable "out of the box" experience that shouldn't turn new users off to Drupal.

If any users have customized the CSS associated with the use of oembed lazyload, the above opinionated libraries can be disabled via the theme API. To completely disable the opinionated styles provided by this module, in your custom theme's *.info.yml file, add:

libraries-override:
  oembed_lazyload/common:
    css:
      theme:
        css/oembed-lazyload-style.css: false

If this opinionated stylesheet is removed, the theme maintainer(s) are 100% responsible for meeting accessibility requirements!

I was wondering about the last sentence and if it was a bit harsh. But on the other hand it is true, because without further design it works technically, but is hardly usable. I think your notes are all right!

I'm fine with the improvements and Release notes – thank you! :-)

Automatically closed - issue fixed for 2 weeks with no activity.