aria-hidden error

[Hirn]

I have the code for calling the ColorPicker dialog

      let cp = window.isc.ColorPicker.getSharedColorPicker({
        defaultPickMode: "complex",
        autoCenter: false,
        autoPosition: false,
        autoCenterOnShow: false,
        defaultColor: pickerColor.color,
        defaultOpacity: pickerColor.alpha,
        colorItem: item,
        drawn: function () {
          let height = this.getVisibleHeight();
          let width = this.getVisibleWidth();
          HTMLUtils.setPosition(this, tile.getPageLeft() + tile.getWidth() - width - 10, Math.floor(tile.getPageTop() + tile.getHeight() / 2), width, height);
        }
      });
      cp.show();

at the same time, an error appears in the debugger

"Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistive technology users. Avoid using aria-hidden on a focused element or its ancestor. Consider using the inert attribute instead, which will also prevent focus. For more details, see the aria-hidden section of the WAI-ARIA specification at"
<div id="isc_EO" eventproxy="isc_ColorPicker_0" role="dialog" class="windowBackground" style="position: absolute; left: 0px; top: 87px; width: 425px; height: 304px; z-index: 800324; background-color: rgb(60, 60, 62); padding: 0px; overflow: visible; cursor: default; visibility: hidden;" onscroll="return isc_ColorPicker_0.$lh()" aria-hidden="true">…</div>

and the drawn function in ColorPicker is no longer called. What could be the matter?

PS
I could set the autoPosition:true property, but then the boundaries of the dialog may extend beyond the page in the browser

[Isomorphic]

Do you have browser addons installed? This sounds like the result of a security addon, perhaps Malwarebytes Browser Guard or a similar security tool.

If that's not it, please confirm your OS, browser and SmartClient version - we always need that information in order to help.

[Hirn]

The error appears in all our browsers. Chrome, Firefox, Opera, Edge.

Chrome Version 130.0.6723.92.
Windows Version - Windows 10 Pro 19045.3086
Smartclient SNAPSHOT_v13. 1d_2024-10-18/Pro

I noticed that the error appears when I set a breakpoint in the click event handler in the debugger. Without the debugger, the error manifests as follows... On the first call to ColorPicker.show() with the drawn function set, draw executes correctly, and the picker’s position is set properly. However, on the second and subsequent calls to ColorPicker.show(), the draw function doesn't execute at all (I checked this with a log inside the drawn function).

[Hirn]

I think I've figured out what the problem is. After the picker is closed, the h is not deleted and when you call show() again, it is simply made visible and the draw function is therefore not called. I solved the problem as follows...

      let cp = window.isc.ColorPicker.getSharedColorPicker({
        defaultPickMode: "complex",
        autoCenter: false,
        autoPosition: false,
        autoCenterOnShow: false,
        defaultColor: pickerColor.color,
        defaultOpacity: pickerColor.alpha,
        colorItem: item,
        drawn: function () {
          console.log("drawn");
          HTMLUtils.setPosition(this);
        }
      });

      cp.show();
      HTMLUtils.setPosition(cp);

You may be interested in the setPosition function for positioning the dialog within the browser screen

    static setPosition(object) {
        let windowWidth = window.innerWidth;
        let windowHeight = window.innerHeight;
        let event = window.isc.EventHandler;
        let width = object.getVisibleWidth();
        let height = object.getVisibleHeight();
        let left = Math.floor(event.getX() - width / 2);
        let top = Math.floor(event.getY() - height / 2);
        if (left < 0) {
            left = 0;
        } else if (left + width > windowWidth) {
            left = windowWidth - width;
        }
        if (top < 0) {
            top = 0;
        } else if (top + height > windowHeight) {
            top = windowHeight - height;
        }
        object.setLeft(left);
        object.setTop(top);
    }