[6.0] Field simple color as web component

[dgrammatiko]

Summary of Changes

Refactor the code so:

• php: layout spits buttons as slotted elements
• use of :part to style the component internals baseline
• use of shadowRoot.adoptedStyleSheets for CSP strict css baseline 2023
• component becomes light/dark
• JS: component now uses the elementInternals so it is an actual form field baseline 2023
• The client side supports all the colors that a browser could support (hex, rgb, lch, oklab, color(colorspace val1 val2 val3 / alpha)). This requires setting the format to "". All color values are validated client side

B/C considerations:

• The field layout has changes (the old one WILL NOT WORK)
• The old field dispatched 2 change events, one on the custom element and another on the select element. There's only one event on the custom element now

Testing Instructions

Paste this:

<field
  name="blabla"
  type="color"
  control="simple"
  format=""
  colors="#000000,rgb(59% 4.79% 75.2% / 0.8),oklch(87% 0.293 207),oklab(79% -0.261 0.088),color(display-p3 0.83 0.19 0.73 / 0.96),#FF0000,lch(56 90.2 154 / 0.88),none"
  default=""
  label="color"
/>

in the templateDetails.xml of the Atum template (after line 51: <fieldset name="colors" label="TPL_ATUM_COLORS_SETTINGS_LABEL">)

Check that the field:

• saves and respects the value from the PHP side
• works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)

Actual result BEFORE applying this Pull Request

Expected result AFTER applying this Pull Request

Screen.Recording.2024-03-19.at.6.11.53.PM.mov

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

Unused strings

JFIELD_COLOR_SELECT="Select a colour"
JFIELD_COLOR_TRANSPARENT="No colour, transparent"
JFIELD_COLOR_VALUE="Colour with hexadecimal value of"

[exlemor]

When I try to test this PR from the Joomla_6.0.0-alpha1-dev+pr.45004-Development-Full_Package.zip file, I get this error when trying to go to Administrator Templates in the backend:

An error has occurred.
0 Call to undefined method stdClass::get()
Call Stack

Function Location

1 () JROOT/administrator/components/com_templates/tmpl/templates/default.php:101
2 include() JROOT/libraries/src/MVC/View/HtmlView.php:416
3 Joomla\CMS\MVC\View\HtmlView->loadTemplate() JROOT/libraries/src/MVC/View/HtmlView.php:204
4 Joomla\CMS\MVC\View\HtmlView->display() JROOT/administrator/components/com_templates/src/View/Templates/HtmlView.php:128
5 Joomla\Component\Templates\Administrator\View\Templates\HtmlView->display() JROOT/libraries/src/MVC/Controller/BaseController.php:697
6 Joomla\CMS\MVC\Controller\BaseController->display() JROOT/administrator/components/com_templates/src/Controller/DisplayController.php:68
7 Joomla\Component\Templates\Administrator\Controller\DisplayController->display() JROOT/libraries/src/MVC/Controller/BaseController.php:730
8 Joomla\CMS\MVC\Controller\BaseController->execute() JROOT/libraries/src/Dispatcher/ComponentDispatcher.php:143
9 Joomla\CMS\Dispatcher\ComponentDispatcher->dispatch() JROOT/libraries/src/Component/ComponentHelper.php:361
10 Joomla\CMS\Component\ComponentHelper::renderComponent()

Checked with Philip who verified I was doing it correctly.

[ceford]

I have tested this item ✅ successfully on ff4b424

I can confirm the two field checks work as described. The rest is a mystery to me!

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.}

[dgrammatiko]

@softforge any interest here?

[softforge]

@softforge any interest here?

I will check over the weekend and get back to you.

[brianteeman]

@dgrammatiko I realise that @softforge never replied but there are merge conflicts now that need resolving

[dgrammatiko]

resolved the conflicts

[exlemor]

I have tested this item 🔴 unsuccessfully on ab20d37I have sadly unsuccessfully tested this. The 1st part works: saves and respects the value from the PHP side but the 2nd part: works with the keyboard (enter to go to the select mode, tab to navigate, enter to select)
does not! Enter opens and closes the color picker but tab doesn't, arrows doesn't, shift doesn't nothing makes it move from color to color.
MacBook Pro M4, Safari 18.6

@exlemor How have you applied the patch? Patchtester is not sufficient. It needs a development environment to compile css and js, or you have to use the pre-built package from Drone.

yes, I used the Download package: Joomla_6.0.0-alpha4-dev+pr.45004-Development-Update_Package.zip and was doing during the PR Testing Group session and Martina and others were there to watch me ;)

[dgrammatiko]

I just tried it myself and it's fine. Can you post the contents of the file media/system/js/fields/joomla-field-simple-color.js here?

[TLWebdesign]

I have tested this item ✅ successfully on ab20d37

Tested this successfully. Also the navigation works fine on my mac on safari 18.6

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.}

[LadySolveig]

I have tested this item ✅ successfully on ab20d37

Tested with

• Version 138.0.7204.183 (Official Build, ungoogled-chromium) (64-Bit)

• Mozilla Firefox for Linux Mint 141.0.3 (64-Bit)

Navigation works as described in the testing instructions.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.}

[exlemor]

I have tested this item 🔴 unsuccessfully on ab20d37

Still unsuccessful. I re-installed from the Download Package and same results.

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.}

@dgrammatiko here is the file you requested.

joomla-field-simple-color.js.txt
(had to rename file .js to .txt to be able to upload it to Github).

[dgrammatiko]

@exlemor do you have any errors in the browser console?

[exlemor]

@exlemor do you have any errors in the browser console?

No, NOTHING in the Console (no warning, no errors, etc).

[dgrammatiko]

Could you post a gif/video of what’s happening there. I tested it also in sf18.6 and works fine

[dgrammatiko]

@exlemor could you test it with debug on?

[exlemor]

Here is the video, its tough to show as you can't see the keys I am pressing on my keyboard but I promise I know where the Tab key is ;)

ScreenFloat.Recording.of.Safari.at.Aug.15.2025.at.11_40_27.PM.mov

[exlemor]

@exlemor could you test it with debug on?

Sure, I can try that.

[exlemor]

I can also open a Google Meet or equivalent and share my screen if you want.

[exlemor]

I found the issue/solution...

There is an OS level option on Mac Sequoia 15.6 (and since 2022 and possibly before that version)
System Settings > Keyboard > Enable "Keyboard navigation"

Keyboard Navigation inline help says: Use keyboard navigation to move focus between controls. Press the Tab key to move focus forward Shift Tab to move the focus backwards.

IF you turn that feature ON, then your code works, here is the rub though... the ISSUE is that it is NOT on by Default on Macs (I checked (and has never been defaulted to ON).

[dgrammatiko]

So, @exlemor it was a safari setting the problem not my code! FWIW macOS has voiceOver for the accessibility and with that enabled (if I am not wrong) the keyboard functions as expected. Anyways, this PR is fine and does what it advertises

[TLWebdesign]

This keyboard navigation setting is turned off on my mac and it still worked fine.

[richard67]

RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/45004.}

[richard67]

@exlemor If your issue can be reproduced we have to fix it with another PR. For now we want to come forward with this one.

[softforge]

Thank you for your work on this and all the dedicated testers