Problem/Motivation

While playing with lazy loading attribute that is coming from the core and our own implementation in #3060605: Support lazy loading of images @sasanikolic noticed that responsive image tag is missing width and height attribute. This bothered me because core lazy loading implementation will not work for these cases at all. Why the core is not setting these attributes for lazy image loading which basically disable lazy loading for all responsive images?

I've read quite a bit of info related to lazy loading and images and responsive images in next resources:

• https://www.smashingmagazine.com/2020/03/setting-height-width-images-imp...
• https://github.com/whatwg/html/pull/4952
• https://bugs.chromium.org/p/chromium/issues/detail?id=979891
• https://bugzilla.mozilla.org/show_bug.cgi?id=1547231
• https://bugs.webkit.org/show_bug.cgi?id=201641

In short, at least as I understand, the problem with lazy loading and responsive images was that in one moment browsers were not properly supporting width/height attributes when images were lazy-loaded. So the browsers were not able to calculate the aspect ratio of images and show image area while image was still loading - and this resulted in recalculating page layout on image loaded. However, this should be fixed in most or all browsers now and this combination should work.

Steps to reproduce

Create an image field with the responsive display, check HTML and you will see that width and height attributes are missing.

Proposed resolution

Add width and height attributes to the responsive image tag.

Remaining tasks

Test picture tag implementation.

User interface changes

None.

API changes

None.

Data model changes

None.

Problem/Motivation

Drupal 10 will require Guzzle 7.

Goutte has a conflict with Guzzle7, but has already been deprecated as a core dependency in #3176655: Deprecate GoutteDriver use in core and use Behat\Mink\Driver\BrowserKitDriver directly instead and will be removed in #3187315: Remove mink-goutte-driver as a core dependency.

Proposed resolution

Update to Guzzle 7.

Remaining tasks

Steps to recreate this MR (which is easier than rebasing it) follow. Use the latest branch of the Goutte issue.

1. git remote add drupal-3187315 git@git.drupal.org:issue/drupal-3187315.git
2. git fetch drupal-3187315
3. git checkout -b '3187315-9.3-goutte' --track drupal-3187315/'3187315-9.3-goutte'
4. git checkout -b 3104353-9.3-guzzle
5. rm -rf vendor
6. composer install
7. Increase the constraint for Guzzle in core/composer.json to the latest stable version.
8. COMPOSER_ROOT_VERSION=9.3.x-dev composer update drupal/core guzzlehttp/guzzle
9. git commit -am "COMPOSER_ROOT_VERSION=9.3.x-dev composer update drupal/core guzzlehttp/guzzle."
10. git push --set-upstream drupal-9.3-3104353 HEAD

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

Guzzle has been updated to Guzzle 7.3.0. It requires psr/http-client 1.0.1, which has also been added as a dependency.

Problem/Motivation

#3176655: Deprecate GoutteDriver use in core and use Behat\Mink\Driver\BrowserKitDriver directly instead deprecated mink-goutte-driver as a core dependency, and that dependency also currently blocks us from using Guzzle 7: #3104353: [PP-1] Upgrade to Guzzle 7

Proposed resolution

Remove the dependency and related test coverage.

Remaining tasks

Periodically keep this up-to-date against head so that it is ready to be emerged once the branch opens.

API changes

Data model changes

N/A

Release notes snippet

Drupal coreʻs dependencies on fabpot/goutte and behat/mink-goutte-driver have been removed.

I'm not sure if this should be an issue for core Claro or contrib Paragraphs, but it only seems to manifest with Claro, so starting here.

A fresh install of Drupal 8.9.0-rc1, paragraphs 1.12 with Claro theme enabled as an admin theme.

Added a paragraph type with a text field to an article.

When creating an article, and reducing width of the browser, the title field overflows under the options tabs to the right.

See attached screenshot.

I've looked for duplicates and tried patches from related issues, but I can't see anything that describes this behaviour exactly.

I've added possibly realted issues.

PHP 7.2, Ubuntu 20.04 , Firefox / Chrome

High level summary of meeting

TBD

Meeting recording

https://youtu.be/A2e7SsqWik0

Next steps

Per Mihaela, our work has been evolving into three sorts of tracks:

• Prototype development
• User research and *validation*
• Defining needs for project pages themselves

The specific next steps are:

• Matt and Ron will start an issue and shared document to be put here in Slack for everyone to collaborate on as the MVP/1st Prototype definition
• Ruby, Mihaela, Leslie, Bob, others - will help more formally establish the site builder committee (to validate the prototypes and do other research) - and if that group wants to - define a supplementary call. Plan to let everyone know by next meeting

More generally:

• Please keep capturing ideas and feedback in the shared docs and/or issues.

High level summary of meeting

TBD

Meeting recording

TBD

Next steps

TBD

Within Olivero, if the image can overlap a sidebar if the toolbar is in vertical mode and is open.

Problem/Motivation

When writing an entity query it is possible to write conditions against all fields within an entity, however if the field is computed it will throw an error.

Proposed resolution

- Add a check within the entity query if a field is computed, and throw a better error than the one below.
- Create a follow up issue to allow computed fields to add something within the base field definition to know what table to join, how to join it, and which database field is the one to return or base conditions against.

Remaining tasks

User interface changes

API changes

Data model changes

Drupal\\Core\\Entity\\Query\\QueryException: 'moderation_state' not found in /app/core/lib/Drupal/Core/Entity/Query/Sql/Tables.php:348\nStack trace:\n#0 /app/core/lib/Drupal/Core/Entity/Query/Sql/Tables.php(241): Drupal\\Core\\Entity\\Query\\Sql\\Tables->ensureEntityTable('', 'moderation_stat...', 'INNER', NULL, 'base_table', 'nid', Array)\n#1 /app/core/lib/Drupal/Core/Entity/Query/Sql/Condition.php(44): Drupal\\Core\\Entity\\Query\\Sql\\Tables->addField('moderation_stat...', 'INNER', NULL)\n#2 /app/core/lib/Drupal/Core/Entity/Query/Sql/Condition.php(39): Drupal\\Core\\Entity\\Query\\Sql\\Condition->compile(Object(Drupal\\Core\\Database\\Query\\Condition))\n#3 /app/core/lib/Drupal/Core/Entity/Query/Sql/Query.php(163): Drupal\\Core\\Entity\\Query\\Sql\\Condition->compile(Object(Drupal\\Core\\Database\\Driver\\mysql\\Select))\n#4 /app/core/lib/Drupal/Core/Entity/Query/Sql/Query.php(74): Drupal\\Core\\Entity\\Query\\Sql\\Query->compile()\n#5 /app/modules/jsonapi/src/Controller/EntityResource.php(326): Drupal\\Core\\Entity\\Query\\Sql\\Query->execute()\n#6 [internal function]: Drupal\\jsonapi\\Controller\\EntityResource->getCollection(Object(Symfony\\Component\\HttpFoundation\\Request))\n#7 /app/modules/jsonapi/src/Controller/RequestHandler.php(145): call_user_func_array(Array, Array)\n#8 /app/core/lib/Drupal/Core/Render/Renderer.php(582): Drupal\\jsonapi\\Controller\\RequestHandler->Drupal\\jsonapi\\Controller\\{closure}()\n#9 /app/modules/jsonapi/src/Controller/RequestHandler.php(146): Drupal\\Core\\Render\\Renderer->executeInRenderContext(Object(Drupal\\Core\\Render\\RenderContext), Object(Closure))\n#10 [internal function]: Drupal\\jsonapi\\Controller\\RequestHandler->handle(Object(Symfony\\Component\\HttpFoundation\\Request), Object(Drupal\\jsonapi_extras\\ResourceType\\ConfigurableResourceType))\n#11 /app/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(123): call_user_func_array(Array, Array)\n#12 /app/core/lib/Drupal/Core/Render/Renderer.php(582): Drupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}()\n#13 /app/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(124): Drupal\\Core\\Render\\Renderer->executeInRenderContext(Object(Drupal\\Core\\Render\\RenderContext), Object(Closure))\n#14 /app/core/lib/Drupal/Core/EventSubscriber/EarlyRenderingControllerWrapperSubscriber.php(97): Drupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->wrapControllerExecutionInRenderContext(Array, Array)\n#15 /app/vendor/symfony/http-kernel/HttpKernel.php(151): Drupal\\Core\\EventSubscriber\\EarlyRenderingControllerWrapperSubscriber->Drupal\\Core\\EventSubscriber\\{closure}()\n#16 /app/vendor/symfony/http-kernel/HttpKernel.php(68): Symfony\\Component\\HttpKernel\\HttpKernel->handleRaw(Object(Symfony\\Component\\HttpFoundation\\Request), 1)\n#17 /app/core/lib/Drupal/Core/StackMiddleware/Session.php(57): Symfony\\Component\\HttpKernel\\HttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#18 /app/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(47): Drupal\\Core\\StackMiddleware\\Session->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#19 /app/core/modules/page_cache/src/StackMiddleware/PageCache.php(99): Drupal\\Core\\StackMiddleware\\KernelPreHandle->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#20 /app/core/modules/page_cache/src/StackMiddleware/PageCache.php(78): Drupal\\page_cache\\StackMiddleware\\PageCache->pass(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#21 /app/modules/jsonapi/src/StackMiddleware/FormatSetter.php(40): Drupal\\page_cache\\StackMiddleware\\PageCache->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#22 /app/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(47): Drupal\\jsonapi\\StackMiddleware\\FormatSetter->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#23 /app/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(50): Drupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#24 /app/vendor/stack/builder/src/Stack/StackedHttpKernel.php(23): Drupal\\Core\\StackMiddleware\\NegotiationMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#25 /app/core/lib/Drupal/Core/DrupalKernel.php(664): Stack\\StackedHttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#26 /app/index.php(19): Drupal\\Core\\DrupalKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request))\n#27 {main}\n\nNext Symfony\\Component\\HttpKernel\\Exception\\HttpException: 'moderation_state' not found in /app/modules/jsonapi/src/EventSubscriber/DefaultExceptionSubscriber.php:43\nStack trace:\n#0 [internal function]: Drupal\\jsonapi\\EventSubscriber\\DefaultExceptionSubscriber->onException(Object(Symfony\\Component\\HttpKernel\\Event\\GetResponseForExceptionEvent), 'kernel.exceptio...', Object(Drupal\\Component\\EventDispatcher\\ContainerAwareEventDispatcher))\n#1 /app/core/lib/Drupal/Component/EventDispatcher/ContainerAwareEventDispatcher.php(111): call_user_func(Array, Object(Symfony\\Component\\HttpKernel\\Event\\GetResponseForExceptionEvent), 'kernel.exceptio...', Object(Drupal\\Component\\EventDispatcher\\ContainerAwareEventDispatcher))\n#2 /app/vendor/symfony/http-kernel/HttpKernel.php(228): Drupal\\Component\\EventDispatcher\\ContainerAwareEventDispatcher->dispatch('kernel.exceptio...', Object(Symfony\\Component\\HttpKernel\\Event\\GetResponseForExceptionEvent))\n#3 /app/vendor/symfony/http-kernel/HttpKernel.php(79): Symfony\\Component\\HttpKernel\\HttpKernel->handleException(Object(Drupal\\Core\\Entity\\Query\\QueryException), Object(Symfony\\Component\\HttpFoundation\\Request), 1)\n#4 /app/core/lib/Drupal/Core/StackMiddleware/Session.php(57): Symfony\\Component\\HttpKernel\\HttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#5 /app/core/lib/Drupal/Core/StackMiddleware/KernelPreHandle.php(47): Drupal\\Core\\StackMiddleware\\Session->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#6 /app/core/modules/page_cache/src/StackMiddleware/PageCache.php(99): Drupal\\Core\\StackMiddleware\\KernelPreHandle->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#7 /app/core/modules/page_cache/src/StackMiddleware/PageCache.php(78): Drupal\\page_cache\\StackMiddleware\\PageCache->pass(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#8 /app/modules/jsonapi/src/StackMiddleware/FormatSetter.php(40): Drupal\\page_cache\\StackMiddleware\\PageCache->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#9 /app/core/lib/Drupal/Core/StackMiddleware/ReverseProxyMiddleware.php(47): Drupal\\jsonapi\\StackMiddleware\\FormatSetter->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#10 /app/core/lib/Drupal/Core/StackMiddleware/NegotiationMiddleware.php(50): Drupal\\Core\\StackMiddleware\\ReverseProxyMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#11 /app/vendor/stack/builder/src/Stack/StackedHttpKernel.php(23): Drupal\\Core\\StackMiddleware\\NegotiationMiddleware->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#12 /app/core/lib/Drupal/Core/DrupalKernel.php(664): Stack\\StackedHttpKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request), 1, true)\n#13 /app/index.php(19): Drupal\\Core\\DrupalKernel->handle(Object(Symfony\\Component\\HttpFoundation\\Request))\n#14 {main}

Problem/Motivation

In #3211780: Deprecate Connection::queryTemporary() we deprecated Connection::queryTemporary but forgot to deprecate Connection::$temporaryNameIndex too.

Proposed resolution

Add a deprecation notice so we can remove in D10.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Problem/Motivation

Follow up from #1924996: Fix error and improve on module descriptor text for the Extend page

Several modules reference 'administrators' in their description:

Ban
Allows administrators to ban visits from specific IP addresses.

Configuration Manager
Allows administrators to import and export configuration changes.

Menu UI
Allows administrators to customize the site navigation menu.

System
Handles general site configuration for administrators.

But it's up to site owners which users can do what, so we shouldn't reference specific roles in the module descriptions. Menu UI is a clear example of functionality that non-admins would often be able to use.

Proposed resolution

Update the descriptions to remove references to administrators. Possibly review other module descriptions to see if they could be improved?

Remaining tasks

1. Agree on updated descriptions
2. Create patch
3. Review

User interface changes

N/A

API changes

N/A

Data model changes

N/A

Release notes snippet

N/A

Problem/Motivation

PHP 8.1 has fixed a bug in the PDO MySQL driver where if you use \PDO::ATTR_EMULATE_PREPARES then all fetches are string-ified. In PHP 8.1 integer db fields would return an integer value. However, all other core supported DBs are using the \PDO::ATTR_STRINGIFY_FETCHES option (to align with the behaviour of MySQL prior to PHP 8.1). See https://externals.io/message/113294 for further disucussion.

We could discuss changing this behaviour is future versions of Drupal. However this is likely to be a major version only change as it results in changing underlying data types and it extremely disruptive.

Steps to reproduce

See test runs in #3220021: [meta] Ensure compatibility of Drupal 9 with PHP 8.1 (as it evolves) - fixed in commit https://git.drupalcode.org/project/drupal/-/merge_requests/937/diffs?com...

Proposed resolution

Add \PDO::ATTR_STRINGIFY_FETCHES to \Drupal\Core\Database\Driver\mysql\Connection::open()

Remaining tasks

User interface changes

None

API changes

None

Data model changes

None

Release notes snippet

Problem/Motivation

To reproduce this issue, view the html in #9 in IE11.

In IE11, any element set to display: flex; can receive focus by being clicked. This has been narrowed down to an IE bug, but one that has very little evidence of it existing online because it is only noticeable if stylesheets include rules that provide focus outlines to non-interactive elements. This is the case with Claro's :focus styles, as they are are applied as *:focus, impacting all elements. This can result in the green focus ring appearing in unexpected places.

The bug does not result in making these elements tabbable via tab navigation, but clicking on one of these non-interactive-but-focusable elements will take focus away from another element .

Proposed resolution

Any number of CSS rules could address the problem.

Remaining tasks

User interface changes

API changes

Data model changes

Release notes snippet

Originally submitted on Github

Problem/Motivation

The admin UI theme is being redesigned and Contextual links need to be integrated with the new design system.

Proposed resolution

• Implement new contextual links styles.
• Provide the necessary overrides so Contextual links - when viewed in a non-Claro default theme - are styled by Claro when Claro is the configured admin theme. This will be done in the same manner as the Toolbar implementation that was added here: #3070493: Introduce a mechanism to provide an alternate Claro design for the toolbar in the future

Specs to follow for the contextual link icon: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...
The contextual links should not be styled as they are currently shown in the figma link. Instead, for consistency, the styling should match the existing dropbutton tray styling.

Remaining tasks

Testing instructions

Enable Claro and set as the admin theme
• If the profile used is Umami, access any existing content like /recipes/watercress-soup.
• If the profile is Standard, go to the homepage and hover the "No front page content has been created yet." message.
• Contextual links should be styled by Claro in the default theme, even if that default theme isn't Claro

Problem

The shortcuts star icon doesn't satisfy WCAG Success Criteria 1.4.1 "Use of Color", or 1.4.11 "Non-text contrast".

• The grey outline of the star is too faint. It has a contrast ratio of just 2.78:1 against the grey page background.
• The yellow fill isn't sufficiently distinguishable from the transparent fill. The contrast between the yellow and the grey page background is 1.29:1.
• The yellow-fill is the only indication of state. On it's own, it isn't a reliable signifier. Even if these did have good contrast in the full-colour situation, the state can still be difficult for some users to notice: users with a colour vision impairment, or other visual impairments, or who have adjusted the colour space in some way, or where the screen is overpowered by ambient light.
• When a Windows high-contrast theme is used, the star remains the same colour. We cannot rely on either the grey outline or the yellow fill to be distinguishable from the page background, because we cannot know what the background colour will be.
• The Star is missing entirely in IE 11 when a Windows High Contrast theme is used. It's a CSS background image, and it gets stripped out by the browser. Users cannot perceive, operate, or understand it; they likely won't know it's there at all.

(Originally submitted by saschaeggi on Github)

Problem/Motivation

Recent interviews and research exposed pain points around Drupal's admin experience of looking and feeling dated.

Proposed resolution

Implement new Toolbar design to create a favorable first impression of Drupal for evaluators and a better user experience for site authors. No functional differences.

Specification

Quick overview

This image is just a quick overview for Navigation list specs. Please use the Figma link to full specification as the main resource for specs.

Full specification

FIGMA: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Design-system?node-id=3324%3A0

This link is anchored to the board with the full specification. As an anonymous user you can see the design, but to actually be able to pick colors and sizes please login on Figma.

Remaining tasks

Update patch styling to include time inputs

Create a Merge Request or reroll the patch based on [#73].

Integrate feedback from [#74] and #75: Where is book log message? (can be done together with previous step) and move to the issue status to Needs review.

To start the reviews, take screenshots of the results.

User interface changes

No functional differences.

Test Pages

/admin/

Problem/Motivation

Several places in Claro use the regular size for input fields and take a lot of vertical space.

Proposed resolution

As we have for buttons, we need smaller and more compact input and selects for smaller forms like the content page filter or the people page filter.

Input full specs: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...
Select full specs: https://www.figma.com/file/OqWgzAluHtsOd5uwm1lubFeH/Drupal-Design-system...

Remaining tasks

• Create designs
• Create specs
• Create styles for smaller inputs/selects.
• It should be possible to target a single element by adding a class to that element
• It should also be possible to target all elements within a form by adding a single wrapper class to the form. Although button variants already exist, button CSS will need updating to allow variant-styling based on a parent class such as .form--small
• Implement it on views filters, views bulk actions, and block layout. Block layout won't have any visible differences, but refactor so the form itself is styled as extrasmall instead of each element being targeted with the styling.

User interface changes

Some forms will occupy lest space.

Testing instructions

Small size:
- Filters for the following lists:
/admin/content
/admin/people
Extra Small size:
Block layout
admin/structure/block

Problem/Motivation

In form-text.css, .form-element width is set to 100% at widths up to 600px. This pushes prefixes and suffixes to a new line in a way that doesn't look good. (Found using Umami profile on Chrome at admin/config/media/image-toolkit)

Proposed resolution

Implement a new design to solve this:

This image is just a reference. Please use this Figma link to check spacing and other definitions.

Remaining tasks

• Create a new design
• Accessibility review
• Create a new patch

User interface changes

A new design for prefix will be available.

Release notes snippet

Improve horizontal alignment so that elements are aligned on a vertical line.

Currently the alignment is a bit mixed but should be nicely aligned.

Current

Possible alignement fix

See also a related issue #3086710: Primary tabs visually not aligned on left with other element

This meeting takes place every Friday at 10:00am ET (7:00am PT, currently 14:00 UTC). See Time.is to see what that is in your timezone.

The meetings are held using Zoom, and a link is posted in the #ux Slack channel 10 minutes before the meeting. Agenda is first come, first serve and set by attendees. Use the Needs usability review issue tag for issues that need review and/or suggest issues in comments here.

Recording of this week's meeting: TODO

We discussed the following issues: TODO

NR and RTBC issues marked Needs usability review.

This meeting takes place every Friday at 10:00am ET (7:00am PT, currently 14:00 UTC). See Time.is to see what that is in your timezone.

The meetings are held using Zoom, and a link is posted in the #ux Slack channel 10 minutes before the meeting. Agenda is first come, first serve and set by attendees. Use the Needs usability review issue tag for issues that need review and/or suggest issues in comments here.

Recording of this week's meeting: https://youtu.be/qMwkD8nyeaQ

We discussed the following issues:

• #3216341: Provide a module-specific permissions form
• #3150294: New translations for moderated nodes are not created in the initial workflow state

NR and RTBC issues marked Needs usability review.