@dgrammatiko Now PHPCS is fine, but npm is failing in Drone. Could that be the same problem as with your other PR?

https://ci.joomla.org/joomla/joomla-cms/45867/1/1

npm ci --unsafe-perm
npm ERR! code ENOENT
npm ERR! syscall spawn git
npm ERR! path git
npm ERR! errno -2
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t https://github.com/joomla-projects/custom-elements.git
npm ERR! enoent 
npm ERR! enoent 
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.

Could that be the same problem as with your other PR?

Yes, it's exactly the same issue: the node alpine container doesn't have the git installed.
I guess this limits the testers to only the ones that can git pull, etc (pretty sure also the created packages are broken)

I guess this limits the testers to only the ones that can git pull, etc (pretty sure also the created packages are broken)

@dgrammatiko Correct.

This displays quickly then disappears.

Text should be left-aligned.

This displays quickly then disappears.

did you test the #34781 before? Sounds like this is comming from there

This is a clean install from the download page of this PR.

This is a clean install from the download page of this PR.

Ahh, forgot that George already merged a PR for alerts that wasn't quite ready, treat anything alerts related here as irrelevant

Permissions is selected.

Go to a component. No tab is selected by default.

@Quy should ok now

Go to Global Configuration.
Click on one of the components.
Styling issue on the first tab.

In mobile view, text should be left-aligned. The vertical ellipse is not visible against the blue background.

Go to System > Administrator Templates > Atum Details and Files

Edit an article.
Hover over a tab.
The label becomes bold causing words/tabs to the right of this tab to shift.

Will PR #31419 be obsolete because of this PR?

The label becomes bold causing words/tabs to the right of this tab to shift.

Fixed

Will PR #31419 be obsolete because of this PR?

With the provided code (modified to use more attributes):

<?= HTMLHelper::_('uitab.startTabset', 'tabs1', ['active' => 'tabA', 'view' => 'tabs', 'orientation' => 'horizontal']) ?>
<?= HTMLHelper::_('uitab.addTab', 'tabs1', 'tabs11', 'tabs11') ?>
Horizontal tab 1

<?= HTMLHelper::_('uitab.startTabset', 'tabs2', ['active' => 'tabs21', 'view' => 'tabs', 'orientation' => 'vertical']) ?>
<?= HTMLHelper::_('uitab.addTab', 'tabs2', 'tabs21', 'tabs21') ?>
Horizontal &gt; Vertical tab 1

<?= HTMLHelper::_('uitab.startTabset', 'tabs3', ['active' => 'tabs31', 'view' => 'tabs', 'orientation' => 'horizontal']) ?>
<?= HTMLHelper::_('uitab.addTab', 'tabs3', 'tabs31', 'tabs31') ?>
Horizontal &gt; Vertical &gt; Horizontal tab 1
<?= HTMLHelper::_('uitab.endTab') ?>
<?= HTMLHelper::_('uitab.addTab', 'tabs3', 'tabs32', 'tabs32') ?>
Horizontal &gt; Vertical &gt; Horizontal tab 2
<?= HTMLHelper::_('uitab.endTab') ?>
<?= HTMLHelper::_('uitab.endTabset') ?>

<?= HTMLHelper::_('uitab.endTab') ?>

<?= HTMLHelper::_('uitab.addTab', 'tabs2', 'tabs22', 'tabs22') ?>
Horizontal &gt; Vertical tab 2
<?= HTMLHelper::_('uitab.endTab') ?>

<?= HTMLHelper::_('uitab.endTabset') ?>

<?= HTMLHelper::_('uitab.endTab') ?>

<?= HTMLHelper::_('uitab.addTab', 'tabs1', 'tabs12', 'tabs12') ?>
Horizontal tab 2
<?= HTMLHelper::_('uitab.endTab') ?>

<?= HTMLHelper::_('uitab.endTabset') ?>

I get:

(which is the expected output)

testing the changing of permissions for an article. After each change there is the following javascript error twice

joomla-tab.min.js?0.0.44:1 
Uncaught TypeError: t.getAttribute is not a function
    at HTMLElement.removeNavs (joomla-tab.min.js?0.0.44:1)
    at joomla-tab.min.js?0.0.44:1
    at Array.map (<anonymous>)
    at HTMLElement.onMutation (joomla-tab.min.js?0.0.44:1)

I have tested this item ? unsuccessfully on 4f0407c

@brianteeman was it only these console errors or there are more bugs?

btw I already pushed some fixes

Yes - I stopped at that point to do other stuff. retesting now

js issue is fixed.

there is however a css issue

before this PR

with this PR

there is however a css issue

@brianteeman should be ok now

confirm that the tree is fixed now.

Spotted something different not which I think is something to do with focus-visible

Spotted something different not which I think is something to do with focus-visible

The focus should work as expected now

The focus should work as expected now

Still needs fixing here

No background color on the active tab. Padding is reduced.

BEFORE PR:

AFTER PR:

Still needs fixing here

That was another logic, should be ok now, also fixes another bug with image editing

@Quy done

When editing/closing an image.

Edit an article. See padding less with PR.

BEFORE:

AFTER:

When editing/closing an image.

Fixed.

Reviewing all the padding/margin values

A note here for testers:

The image editing is broken here but there's a new PR for that: #34885

Click User Menu > Accessibility Settings
The Accessibility Settings tab is not selected.

The Accessibility Settings tab is not selected.

Good catch, fixed with bae7dfe

Click User Menu > Accessibility Settings
Accessibility Settings tab is selected.
Click Close button.
Click User Menu > Accessibility Settings
Tab outlined. Click anywhere on the screen to refresh/fix the outline.

Firefox:

Chrome:

didnt i report that before?

didnt i report that before?

You did and I fixed it, but I added the hash activation part that I forgot and I forgot to pass the false param.
Anyways it's fixed with cbce7b1

I have tested this item ✅ successfully on 8f79a32

THANK YOU!!!!

@Quy thank you for all the tests here ?

I have tested this item ✅ successfully on 8f79a32

Went through most of the edit form and did not find any problems.

Maintainers please note that this PR should not be merged as it is. It needs to merge the corresponding upstream PR and make a new tag or release upstream and then change here to let npm use that. It will not need new tests after that if the new upstream tag or release point to the same upstream commit as used by this PR here now.

There's one more step, so, here's the whole procedure:

• on the Custom Elements Repo the joomla-projects/custom-elements#180 needs to be merged
• A new patch version (0.2.0) needs to be released
• This PR needs to update the package.json and package.lock
• The PR #34885 needs to merge immediately after (assuming that what I did there is acceptable)

But since this PR is using the commit hash no further tests will be needed if the PR joomla-projects/custom-elements#180 is merged without any changes, that was the reason I used the commit hashes here in the first place. Anyways these are @wilsonge's problems ?

Something I neglected to check: the Article edit form has 12 html validation errors.

Something I neglected to check: the Article edit form has 12 html validation errors.

Can you post the report here?

Something I neglected to check: the Article edit form has 12 html validation errors.

Can you post the report here?

It is probably best to paste the page source into the w3C validator:

https://validator.w3.org/#validate_by_input

30 Errors on the article edit page. It is not easy to copy them into a message.

@ceford you're validating as HTML5, right?

Yes - I use the Firefox Web Developer plugin. It is just two clicks to invoke the w3c validator with default settings. I get 30 Errors for the Article edit page with no patches applied. It returns a blank page if I have Joomla debug enabled.

I get 30 Errors for the Article edit page with no patches applied

Yes, I could see also the errors but none of them is about tabs

It returns a blank page if I have Joomla debug enabled.

Probably because the page is extremely heavy with debug on (too many elements)

@dgrammatiko i've released the custom elements repo. If you could use the tagged version here then one last test by someone just to do final validation would be excellent.

Tests should be ok with joomla-projects/joomla-browser#219 (run fine loacally)

OK Can we have one final test of the code here now we're pulling in the stable custom elements repo and I'll get everything merged through.

OK Can we have one final test of the code here now we're pulling in the stable custom elements repo and I'll get everything merged through.

@wilsonge And what about failing system tests?

The PR above needs to be merged according to @dgrammatiko - that would make the 4.0-dev fail if i merged that first - so i'll merge both at the same time and should be fine. I can debug further if anything else still fails.

It's late here already and I'm tired. Maybe @Quy can test again?

Border thickness is thinner.

Before PR:

After PR (thickness difference between first row and second row):

@Quy pixel restored

There is a large gap at the bottom of the tab.

Before PR:

After PR:

Fieldset left/right borders missing.

Before PR:

After PR:

@Quy should be ok now

I have tested this item ✅ successfully on c75abd1

THANK YOU AGAIN!!!

I don't see errors in the Console.

System > Install > Extensions > Install from Web

SCSS style linter complains: https://ci.joomla.org/joomla/joomla-cms/46132/1/20

System > Install > Extensions > Install from Web

Web Installer fixed

SCSS style linter complains: https://ci.joomla.org/joomla/joomla-cms/46132/1/20

CS fixed

I have tested this item ✅ successfully on c75abd1

Thanks!

Thanks!

@wilsonge you need to merge the joomla-projects/joomla-browser#219 and also the #34885

The joomla-projects/joomla-browser#219 will fix the failing tests