[BUG] Aria Blocking UI

[jolevesq]

We have error in the console

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 https://w3c.github.io/aria/#aria-hidden.
Element with focus: button
Ancestor with aria-hidden:  

This error comes from the geoview-renderer, look for // TODO: Performance #2688

INFO

The aria-blocking error in the web console is likely occurring because the processStyle function is performing synchronous operations that could block the main thread. Looking at the open file, we can see this is happening in the style processing for geometry rendering.

Here's how to fix it: [1]

/** 
 * Gets and creates feature style asynchronously to prevent main thread blocking
 * @async
 */
export async function getAndCreateFeatureStyle(
  feature: FeatureLike,
  style: TypeLayerStyleConfig,
  label: string,
  filterEquation?: FilterNodeArrayType,
  legendFilterIsOff?: boolean,
  callbackWhenCreatingStyle?: (geometryType: TypeStyleGeometry, style: TypeLayerStyleConfigInfo) => void
): Promise<Style | undefined> {
  // Get the geometry type
  const geometryType = getGeometryType(feature);

  // The style to work on
  let styleWorkOn = style;

  // If style does not exist for the geometryType, create it.
  if (!style || !style[geometryType]) {
    const styleConfig = createDefaultStyle(geometryType, label);
    if (styleConfig) {
      if (style) styleWorkOn[geometryType] = styleConfig;
      else styleWorkOn = { [geometryType]: styleConfig };
      callbackWhenCreatingStyle?.(geometryType, styleConfig.info[0]);
    }
  }

  // Process style asynchronously
  if (styleWorkOn![geometryType]) {
    const styleSettings = style![geometryType]!;
    const { type } = styleSettings;
    
    // Wrap the style processing in a Promise to prevent blocking
    return new Promise((resolve) => {
      // Use requestAnimationFrame to process style during next frame
      requestAnimationFrame(() => {
        const processedStyle = processStyle[type][geometryType].call(
          '',
          styleSettings,
          feature as Feature,
          filterEquation,
          legendFilterIsOff
        );
        resolve(processedStyle);
      });
    });
  }
  
  return undefined;
}

// Update the calling code to handle the async nature:
async function updateFeatureStyle() {
  try {
    const style = await getAndCreateFeatureStyle(
      feature,
      styleConfig,
      label,
      filterEquation,
      legendFilterIsOff
    );
    // Use the style...
  } catch (error) {
    logger.logError('Error processing style', error);
  }
}

Key changes:

• Made getAndCreateFeatureStyle async
• Wrapped style processing in a Promise
• Used requestAnimationFrame to schedule style processing
• Added error handling
• Updated function signature to reflect async nature