#Accessibility

smustgrave suggested that we add a change record.

I've reverted some of the code that removed datetime_wrapper theme hooks and preprocessing and I think we need to add the templates back as well and deprecate that properly.

I added the templates back and added a deprecation.

And I drafted a change record: https://www.drupal.org/node/3530128 →

I apologize: I reverted the changes.

Hiding patches to focus on the MR.

Hi everybody,

This missing feature seems important.
Shouldn't this patch also generate the role="img" attribute, to be compliant ?
@see also https://www.drupal.org/project/svg_image/issues/3366836 💬 Add acessibility properties to SVG Active

Thank you! The changes have been committed.

I just noticed that my test was on the branch related to https://www.drupal.org/project/admin_feedback/issues/3525479 🐛 Send button id is not guaranteed Active .

That branch already fixes part of this issue, so I'll add to that existing branch.

Thank you! The changes have been committed.

the_g_bomb → credited rkoller → .

This has been already fixed in 🐛 Legend text overflow issue on small viewports due to absolute positioning Needs work .

avpaderno → changed the visibility of the branch 2851270-links-in-the to hidden.

Comment #38 🐛 Seven inactive tabs do not meet WCAG AA 1.4.3 for contrast Needs work says that underlying the text is not necessary to understand a tab is active.

avpaderno → changed the visibility of the branch 1.0.x to hidden.

About the styling, i am not that savvy and familiar with Figma for being able to extract the exact specifics, but in case I interpret the current changes in the MR correctly then:

• the padding between a breadcrumb item and a breadcrumb separator is 0.5rem in the MR while in the styleguide it is set to 0.75rem same as for Claro without the MR
• the separator has the extend of 4px by 4px (width by height) while in the figma file it looks like 3px by 6px..

the increase in separator size got fixed. thanks! oh and the separator is still pointing upwards for RTL languages.

The reason why the pipeline is failing, the linter requires vertical-align come before border-inline-end, but vertical-align is at the end. and looking at https://git.drupalcode.org/project/drupal/-/merge_requests/12046/diffs that also notifies that the file was modified in the source and the target branch - needs someone with write access to resolve that. and i guess the MR could need a rebase in any way, due to the rename of the SandboxManagerBase class in package manager, that is requiring me to uninstall project browser when i try to checkout this MR for testing.

and i am in the process of reviewing the latest changes by @ll66382, will post another comment later.

Pipeline appears to have issues. And can summary be flushed out as the proposed solution isn’t clear

There is no merge request to review.

avpaderno → changed the visibility of the branch issue-2930508 to hidden.

avpaderno → changed the visibility of the branch 2930508-seven-inactive-tabs to hidden.

I don't think it makes sense to have a label for an input that is hidden.

I totally agree with you. And my prior suggestion to convert to a fieldset w/ legend was rooted in this thinking. But a fieldset that only contains a hidden form element with a list of links also makes no sense semantically.

Semantically, the only thing I can think of that makes sense here is a <nav> wrapper with a span or div tag around the label. Of course, at that point we would lose the default Drupal form element label styling, which makes this issue somewhat of a breaking change.

And sadly this is why I ended up with the current workaround to just add the id attribute to the hidden input.

I have tested the patch in Firefox and I believe the focus indicator gives good contrast.

In that second image, is there a reason one of the inactive tabs has a white background? (Image resize)

The mouse was hovering that item.

In that second image, is there a reason one of the inactive tabs has a white background? (Image resize)

The order of the CSS properties needs to be changed.

The blue bar should be on the left side, not the right side, similarly to what happen with the node edit form.

These are the vertical tabs without any change.

PR updated and moving this back to Needs review. Thanks for your review.

• Checked Design System → figma section on breadcrumbs
• Adjusted breadcrumb margins
• Adjusted breadcrumb size and line thickness

I don't think it makes sense to have a label for an input that is hidden.

ARIA could be used to associate this label with what it is labelling. It would still not be a label element.

Issue are migrating to GitLab, ✨ Move issues from www.drupal.org to git.drupalcode.org Postponed , so we aren’t adding features to the existing issues. GitLab does support videos, https://docs.gitlab.com/user/markdown/#videos. You can already upload a video to a merge request to see how it works.

Create Merge Request

immaculatexavier → changed the visibility of the branch 2930508-inactive-tabs-do-1.0.x to hidden.

Thank you for that update. Here are my findings, tested in Firefox with factory settings:

1. The focus indicators for the most part are much better.
2. For some strange reason, only part of the focus indicator is showing up on some items. The worst of this is for Content, which only has a focus indicator on one side, making it ambiguous as to whether it applies to Content or to Structure. For the others, it shows up on three sides, which, while aesthetically unpleasant, is at least unambiguous.

Please see the screen recording that I took for the current state of patch 149 → . (Note: Sorry about needing to download the video. drupal.org doesn't let me embed it, and it is longer than 5 seconds so I can't convert to an animated GIF without violating WCAG 2.1 for Pause, Stop, Hide.)

Patch for Composer usage for 10.5.x.

Hi,

Agreed with comment 16.

I have not dug why there is an eventListener on a CSS event but a side effect of JS listening to transitionend event is as soon as any CSS transition happens, like on Olivero put mouse hover shortcut icon or the main menu folding/unfolding when going on top of the page, it scrolls again.

I have tried to put the scroll logic into:

window.addEventListener('dialog:afterclose', (e) => {
    const $element = $(e.target);
    if (Drupal.offCanvas.isOffCanvas($element)) {

But at this moment const $target = $('.is-layout-builder-highlighted'); finds no results while there is still the highlighted block.

I will create a branch which removes the scroll.

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

The code in the user.permissions.js file has been changed, and it now removes the form-checkbox CSS class.

// Create fake checkboxes. We use fake checkboxes instead of reusing
// the existing checkboxes here because new checkboxes don't alter the
// submitted form. If we'd automatically check existing checkboxes, the
// permission table would be polluted with redundant entries. This is
// deliberate, but desirable when we automatically check them.
const $fakeCheckbox = $(Drupal.theme('checkbox'))
  .removeClass('form-checkbox')
  .addClass('fake-checkbox js-fake-checkbox')
  .attr({
    disabled: 'disabled',
    checked: 'checked',
    title: Drupal.t(
      'This permission is inherited from the authenticated user role.',
    ),
  });
const $wrapper = $('<div></div>').append($fakeCheckbox);
const fakeCheckboxHtml = $wrapper.html();

We should implement code similar to the one used by the Claro theme.

the_g_bomb → credited katannshaw → .

the_g_bomb → credited rkoller → .

the_g_bomb → credited rkoller → .

Here is a patch that fixes the constructor error in TwilioAdminForm when extending ConfigFormBase.
Tested on Drupal 10/11. Verified that the form loads without PHP errors.

Please raise merge request or make a patch for this issue.

The initial commit already included a file with the following content.

/**
 * @file
 * Seven specific styling for CKEditor admin.
 */

/*
 * This rule is needed to provide Seven's blue focus outline.
 */
.ckeditor-toolbar-disabled .ckeditor-buttons li a:focus {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 0 8px #40b6ff;
}

.ckeditor-toolbar-active .ckeditor-buttons li a:focus {
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.05),
    0 0 8px #40b6ff;
}

What should be changed in that file is the comment before the CSS rules, and the property used for those roles.

(See comment #16 for some hints on what that comment can say.)

Drupal 7 is no longer officially supported.

Has the datetime-local element been considered as replacement for some of these scenarios? If there's a time element, this option is a much better UX to eliminate wrappers. Theres a few related patches that fix a few datetime-local issues.

There are a few browser compatibility issues for datetime-local with safari & firefox not showing the time picker but time can still be entered. Is that a deal breaker?
Internet Explorer doesn't support it all. Do we still care about IE?

For just dates, a custom element that extends Datetime would work that just removes the theme wrappers and replaces the date title with the element title. The only one that should get a fieldset wrapper IMO is the date list widget if we could adopt datetime-local.

Thank you for this detailed review rkoller - it's appreciated! I hope to have things ready by Monday.