Contrib.social

Make Node Vertical Tabs Accessible Using Edit+

Open on Drupal.org →
Created on 11 April 2025, 18 days ago

Problem/Motivation

There are a number of problems with Edit+ currently when trying to edit node fields normally contained in vertical tabs on the node/{nid}/edit screen. These fields can be accessed through Edit+ by clicking a node's title while in Edit Mode*. Any standard fields on the node are accessible, but the vertical tabs themselves only show the tabs without the tab content. The content renders, but it is off screen and inaccessible without use of js/css editing.

*related(?) issue: When a node first loads after being saved the edit mode does allow for accessing these fields when clicking on the node title, I have to refresh the page before it will work.

Steps to reproduce

  1. Install the Plus Suite recipe https://www.drupal.org/project/plus_suite → (Note that the Plus Suite needs some work to be able to be applied to existing sites. There is an issue with a fix marked "needs review" here https://www.drupal.org/project/plus_suite/issues/3517909 🐛 The configuration 'field.storage.node.layout_builder__layout' exists already and does not match the recipe's configuration Active )
  2. Create a page (Landing Page, or Basic Page are what I have tried so far with the recipe installed on top of Drupal CMS) and refresh the page after saving.
  3. Flip to edit mode and click on the node title. The additional node fields and Vertical tabs will appear in the popout on the right.
  4. Vertical tabs are accessible, but their contained fields are not. (see attached image)

Proposed resolution

I can think of two potential solutions:

First: Provide a hook_form_alter() call that either explicitly moves the default vertical tab information out of vertical tab format or that generically does so. I have kicked the tires on this theory and not made much progress, either I'm misunderstanding how the vertical tabs are handled or it isn't possible to be handled with just a form_alter call.

Second: Write CSS/JS to reformat the vertical tabs so their content is visible when the vertical tab is selected.

Remaining tasks

  • Decide methody to make vertical tab fields accessible
  • Implement decision in code.
📌 Task
Status

Active

Version

2.0

Component

User interface

Created by

🇺🇸United States drakythe

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024