feat(docker/services): show port ranges [EE-4012] (#10657)

app/react/components/Widget/Widget.tsx

@@ -1,24 +1,39 @@
-import { createContext, PropsWithChildren, useContext } from 'react';
+import clsx from 'clsx';
+import { createContext, PropsWithChildren, Ref, useContext } from 'react';
 
 const Context = createContext<null | boolean>(null);
 Context.displayName = 'WidgetContext';
+
 export function useWidgetContext() {
   const context = useContext(Context);
+
   if (context == null) {
     throw new Error('Should be inside a Widget component');
   }
 }
+
 export function Widget({
   children,
+  className,
+  mRef,
   id,
+  'aria-label': ariaLabel,
 }: PropsWithChildren<{
+  className?: string;
+  mRef?: Ref<HTMLDivElement>;
   id?: string;
+  'aria-label'?: string;
 }>) {
   return (
     <Context.Provider value>
-      <div id={id} className="widget">
+      <section
+        id={id}
+        className={clsx('widget', className)}
+        ref={mRef}
+        aria-label={ariaLabel}
+      >
         {children}
-      </div>
+      </section>
     </Context.Provider>
   );
 }