Problem/Motivation

I couldn't see the buttons text "Load video", because it was hidden behind the thumbnail.

Steps to reproduce

For the video-formatter i selected "Third party assets load when a user clicks a play button"

Proposed resolution

I altered the css-styles a little bit:

1. The "user agent stylesheet" for a button (at least in Chrome 108) is background-color: buttonface;
I changed it to transparent:

.oembed-lazyload__button {
  background-color: transparent;
  cursor: pointer;
}

(I changed the cursor, too, to give the user another hint that the image is an clickable element.)

2. The thumbnail is over the buttons text. I changed it by setting:

.oembed-lazyload__thumbnail {
  z-index: -1;
}
CommentFileSizeAuthor
#8 oembed_lazyload-hidden_button-3326808-8.patch2.31 KBtfranz
#4 button-hidden-hover-focus.png705.24 KBluke.leber
#4 button-hidden-default.png707.39 KBluke.leber
#4 oembed_lazyload-hidden_button-3326808-4.patch1.31 KBluke.leber
#2 oembed_lazyload-hidden_button-3326808-1.patch369 bytestfranz

Comments

tfranz created an issue. See original summary.

tfranz’s picture

tfranz commented
StatusFileSize
new oembed_lazyload-hidden_button-3326808-1.patch369 bytes

Patch for my altered css-file "commons.css"

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented

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.

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
StatusFileSize
new oembed_lazyload-hidden_button-3326808-4.patch1.31 KB
new button-hidden-default.png707.39 KB
new button-hidden-hover-focus.png705.24 KB

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

Default state:

User-activated video in default state without text underline or cursor adjustment

Hover/focus state:

User-activated video in hover and focus state with text underline and pointer cursor

Does this seem agreeable?

tfranz’s picture

tfranz commented

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;
}
luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented

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.

tfranz’s picture

tfranz commented

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.

tfranz’s picture

tfranz commented
StatusFileSize
new oembed_lazyload-hidden_button-3326808-8.patch2.31 KB

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 ;)

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented
Status: Active » Fixed

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.

luke.leber’s picture

luke.leber
Primary language English
Location Pennsylvania
commented

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!

tfranz’s picture

tfranz commented

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! :-)

Status: Fixed » Closed (fixed)

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