@redocly/theme 0.57.0-next.3 → 0.57.0-next.4

package/lib/core/hooks/use-theme-hooks.js

@@ -3,12 +3,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useThemeHooks = void 0;
 const react_1 = require("react");
 const ThemeDataContext_1 = require("../contexts/ThemeDataContext");
+const use_telemetry_fallback_1 = require("./use-telemetry-fallback");
 const fallbacks = {
     useTranslate: () => ({
         translate: (value, options) => (typeof options === 'string' ? options : options === null || options === void 0 ? void 0 : options.defaultValue) || value || '',
     }),
     useSubmitFeedback: () => ({ submitFeedback: () => { } }),
-    useTelemetry: () => ({ send: () => { } }),
+    useTelemetry: use_telemetry_fallback_1.useTelemetryFallback,
     /**
      * @deprecated use `useTelemetry` instead
      **/

package/lib/core/types/hooks.d.ts

@@ -1,3 +1,4 @@
+import type { AsyncApiRealmUI } from '@redocly/realm-asyncapi-sdk';
 import type { CatalogEntityConfig, PageData, PageProps, ResolvedNavItemWithLink, Version } from '@redocly/config';
 import type { ShikiTransformer } from '@shikijs/types';
 import type { Callback, TFunction as TFunc } from 'i18next';
@@ -7,7 +8,6 @@ import type { UseCatalogResponse, CatalogApiResults, CatalogApiParams, FilteredC
 import type { UserMenuData } from './user-menu';
 import type { ItemState } from './sidebar';
 import type { SearchItemData, SearchFacet, SearchFilterItem, SearchFacetQuery, AiSearchConversationItem } from './search';
-import type { EventType, SendEventParams } from './telemetry';
 import type { SubmitFeedbackParams } from './feedback';
 import type { TFunction } from './l10n';
 import type { BreadcrumbItem } from './breadcrumb';
@@ -117,9 +117,7 @@ export type ThemeHooks = {
         entityKey: string;
     }, initialData?: BffCatalogRelatedEntityList) => CatalogApiResults<BffCatalogRelatedEntity, BffCatalogRelatedEntityList>;
     useCatalogClassic: (config: CatalogConfig) => FilteredCatalog;
-    useTelemetry: () => {
-        send<TEventType extends EventType>(event: SendEventParams<TEventType>): void;
-    };
+    useTelemetry: () => Omit<AsyncApiRealmUI.Telemetry, 'init' | 'updateCloudEventData' | 'forceFlush' | 'startSpan' | 'constructCloudEvent' | 'sendToOtelService'>;
     useUserTeams: () => string[];
     usePageData: () => PageData | null;
     usePageProps: <T extends Record<string, unknown>>() => PageProps & T;

package/lib/core/types/index.d.ts

@@ -15,5 +15,4 @@ export * from './common';
 export * from './open-api-server';
 export * from './marker';
 export * from './code-walkthrough';
-export * from './telemetry';
 export * from './page-actions';

package/lib/core/types/index.js

@@ -31,6 +31,5 @@ __exportStar(require("./common"), exports);
 __exportStar(require("./open-api-server"), exports);
 __exportStar(require("./marker"), exports);
 __exportStar(require("./code-walkthrough"), exports);
-__exportStar(require("./telemetry"), exports);
 __exportStar(require("./page-actions"), exports);
 //# sourceMappingURL=index.js.map

package/lib/markdoc/components/CodeWalkthrough/CodeFilters.js

@@ -40,11 +40,11 @@ const FilterWrapper = styled_components_1.default.div `
   flex-wrap: wrap;
   position: sticky;
 
-  padding-top: calc(var(--spacing-xs) + var(--spacing-xl));
+  padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xl);
   padding-left: var(--spacing-xl);
   padding-bottom: var(--spacing-xs);
-  top: calc(var(--navbar-height));
+  top: var(--navbar-height);
   background-color: var(--bg-color);
   z-index: 1;
   max-width: var(--md-content-max-width);

package/lib/markdoc/components/CodeWalkthrough/CodePanel.js

@@ -52,6 +52,7 @@ const CodePanelWrapper = styled_components_1.default.div `
   min-width: 0;
   height: 100%;
   word-wrap: break-word;
+  margin-top: var(--spacing-xl);
 
   background-color: var(--code-panel-bg-color);
   border: 1px solid var(--code-panel-border-color);

package/lib/markdoc/components/CodeWalkthrough/CodeToggle.js

@@ -44,7 +44,7 @@ function CodeToggle(props) {
     return (react_1.default.createElement(exports.ToggleWrapper, { "data-component-name": "Markdoc/CodeWalkthrough/CodeToggle" },
         react_1.default.createElement(ToggleContentWrapper, null,
             react_1.default.createElement(exports.ToggleSubtitle, null,
-                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeControlState(id, newValue) }),
+                react_1.default.createElement(Switch_1.Switch, { value: checked, onChange: (newValue) => changeControlState(id, newValue), stopPropagation: true }),
                 react_1.default.createElement("div", null, label)),
             description ? (react_1.default.createElement("div", null, description.map((paragraph, idx) => (react_1.default.createElement(react_1.default.Fragment, { key: idx }, paragraph))))) : null),
         checked ? children : null));

package/lib/markdoc/components/CodeWalkthrough/CodeWalkthrough.js

@@ -87,9 +87,14 @@ const DocsPanel = styled_components_1.default.div `
   min-height: 0;
   min-height: calc(100vh - var(--navbar-height));
 
+  padding-top: var(--spacing-xl);
   padding-right: var(--spacing-xs);
   padding-bottom: calc(var(--spacing-xs) + var(--spacing-xl));
   gap: var(--spacing-xl);
+
+  &:has([data-component-name='Markdoc/CodeWalkthrough/CodeFilters']) {
+    padding-top: 0;
+  }
 `;
 const ContentWrapper = styled_components_1.default.div `
   flex-grow: 1;
@@ -115,14 +120,8 @@ const ContentWrapper = styled_components_1.default.div `
   -ms-overflow-style: none; /* IE and Edge */
   scrollbar-width: none; /* Firefox */
 
-  &:first-child {
-    padding-top: var(--spacing-sm);
-  }
-
-  &:not(:first-child) {
-    & > *:first-child {
-      margin-top: 0;
-    }
+  && > *:first-child {
+    margin-top: 0;
   }
 `;
 //# sourceMappingURL=CodeWalkthrough.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redocly/theme",
-  "version": "0.57.0-next.3",
+  "version": "0.57.0-next.4",
   "description": "Shared UI components lib",
   "keywords": [
     "theme",
@@ -86,8 +86,8 @@
     "nprogress": "0.2.0",
     "react-calendar": "5.1.0",
     "react-date-picker": "11.0.0",
-    "@redocly/realm-asyncapi-sdk": "0.3.0-next.0",
-    "@redocly/config": "0.28.0"
+    "@redocly/config": "0.28.0",
+    "@redocly/realm-asyncapi-sdk": "0.3.0-next.1"
   },
   "scripts": {
     "watch": "tsc -p tsconfig.build.json && (concurrently \"tsc -w -p tsconfig.build.json\" \"tsc-alias -w -p tsconfig.build.json\")",

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -31,13 +31,10 @@ export function Breadcrumbs(props: {
               label={breadcrumb.label}
               isActive={isLast}
               onClick={() => {
-                telemetry.send({
-                  type: 'breadcrumb.clicked',
-                  payload: {
-                    link: breadcrumb.link,
-                    position: idx + 1,
-                    totalBreadcrumbs: breadcrumbs.length,
-                  },
+                telemetry.sendBreadcrumbClickedMessage({
+                  link: breadcrumb.link,
+                  position: idx + 1,
+                  totalBreadcrumbs: breadcrumbs.length,
                 });
               }}
             />

package/src/components/Buttons/EditPageButton.tsx

@@ -21,7 +21,7 @@ export function EditPageButton({ to }: EditPageButtonProps): JSX.Element {
       data-component-name="Buttons/EditPageButton"
       target="_blank"
       to={to}
-      onClick={() => telemetry.send({ type: 'edit_page_link.clicked' })}
+      onClick={() => telemetry.sendEditPageLinkClickedMessage(undefined)}
     >
       <ButtonIcon />
       <ButtonText data-translation-key="markdown.editPage.text">

package/src/components/Catalog/CatalogCardView/CatalogCard.tsx

@@ -30,7 +30,7 @@ export function CatalogCard({ entity, catalogConfig }: CatalogCardProps): JSX.El
         window.location.assign(
           `${pathPrefix}/catalogs/${catalogConfig.slug}/entities/${entity.key}`,
         );
-        telemetry.send({ type: 'catalog_item.clicked' });
+        telemetry.sendCatalogItemClickedMessage(undefined);
       }}
     >
       <CardContent>

package/src/components/Catalog/CatalogEntity/CatalogEntity.tsx

@@ -1,23 +1,18 @@
 import React from 'react';
 import styled from 'styled-components';
 import { CatalogEntityConfig, EntitiesCatalogConfig } from '@redocly/config';
-import { Route, Routes, useLocation, matchPath } from 'react-router-dom';
+import { Route, Routes } from 'react-router-dom';
 
 import type { BffCatalogEntity, BffCatalogRelatedEntityList } from '@redocly/theme/core/types';
 
 import { breakpoints } from '@redocly/theme/core/utils';
-import { ArrowLeftIcon } from '@redocly/theme/icons/ArrowLeftIcon/ArrowLeftIcon';
 import { CatalogPageDescription } from '@redocly/theme/components/Catalog/CatalogPageDescription';
 import { CatalogEntityProperties } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityProperties/CatalogEntityProperties';
 import { CatalogEntityMetadata } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMetadata';
 import { CatalogEntityLinks } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityLinks';
 import { Breadcrumbs } from '@redocly/theme/components/Breadcrumbs/Breadcrumbs';
-import { Sidebar } from '@redocly/theme/components/Sidebar/Sidebar';
-import { Menu } from '@redocly/theme/components/Menu/Menu';
-import { Button } from '@redocly/theme/components/Button/Button';
 import { CatalogEntityRelations } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityRelations/CatalogEntityRelations';
 import { useThemeHooks } from '@redocly/theme/core/hooks';
-import { SidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
 import { CatalogEntitySchema } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntitySchema';
 import { CatalogEntityMethodAndPath } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityMethodAndPath';
 import { CatalogEntityRelationsGraph } from '@redocly/theme/components/Catalog/CatalogEntity/CatalogEntityGraph/CatalogEntityRelationsGraph.lazy';
@@ -48,64 +43,14 @@ export function CatalogEntity({
 }: CatalogEntityProps) {
   const { useTranslate, useCatalog } = useThemeHooks();
   const { translate } = useTranslate();
+
   const linkToMainCatalog = `catalogs/${catalogConfig.slug}`;
   const linkToMainCatalogLabel = translate(catalogConfig.titleTranslationKey);
-  const {
-    layout,
-    collapsedSidebar,
-    onChangeViewClick,
-    onChangeCollapseSidebarClick,
-    searchQuery,
-    setSearchQuery,
-  } = useCatalog();
-
-  const { pathname } = useLocation();
-  const linkBase = `${linkToMainCatalog}/entities/${entity.key}`;
-  const menuItemDefs = [
-    { label: 'Overview', path: linkBase, end: true },
-    { label: 'Relations Graph', path: `${linkBase}/relations-graph`, end: true },
-  ];
-  const sidebarMenuItems = menuItemDefs.map(({ label, path, end }) => ({
-    label,
-    link: path,
-    active: Boolean(matchPath({ path: `/${path}`, end }, pathname)),
-    items: [],
-    hasActiveSubItem: false,
-  }));
+
+  const { searchQuery, setSearchQuery } = useCatalog();
 
   return (
     <CatalogPageWrapper data-component-name="Catalog/CatalogEntity/CatalogEntity">
-      <CatalogSidebar
-        collapsed={collapsedSidebar}
-        header={
-          <BackLink
-            icon={<ArrowLeftIcon />}
-            iconPosition="left"
-            variant="ghost"
-            size="medium"
-            data-component-name="Sidebar/BackButton"
-            to={linkToMainCatalog}
-          >
-            {collapsedSidebar ? (
-              ''
-            ) : (
-              <div data-translation-key="sidebar.menu.backLabel">
-                {translate('sidebar.menu.backLabel')}
-              </div>
-            )}
-          </BackLink>
-        }
-        menu={<Menu items={sidebarMenuItems} />}
-        footer={
-          <SidebarActions
-            layout={layout}
-            collapsedSidebar={collapsedSidebar}
-            isApiDocs={false}
-            onChangeViewClick={onChangeViewClick}
-            onChangeCollapseSidebarClick={onChangeCollapseSidebarClick}
-          />
-        }
-      />
       <CatalogPageContent>
         <Breadcrumbs
           additionalBreadcrumbs={[
@@ -196,15 +141,6 @@ const CatalogPageContent = styled.main`
   }
 `;
 
-const CatalogSidebar = styled(Sidebar)`
-  display: none;
-
-  @media screen and (min-width: ${breakpoints.medium}) {
-    display: flex;
-  }
-  --menu-container-padding-top: 0;
-`;
-
 const CatalogEntityPageWrapper = styled.div`
   display: flex;
   flex-direction: column;
@@ -223,11 +159,3 @@ const CatalogTwoColumnsSection = styled.section`
   gap: 24px;
   align-items: start;
 `;
-
-const BackLink = styled(Button)`
-  padding: var(--spacing-unit) 0;
-  height: calc(var(--line-height-base) + var(--spacing-unit) * 2);
-  justify-content: flex-start;
-  width: 100%;
-  margin-bottom: 0px;
-`;

package/src/components/CatalogClassic/CatalogClassicActions.tsx

@@ -42,7 +42,7 @@ export function CatalogClassicActions(props: CatalogClassicActionsProps): JSX.El
         iconPosition="left"
         onClick={() => {
           onOpenFilter();
-          telemetry.send({ type: 'catalog_actions_button.clicked' });
+          telemetry.sendCatalogActionsButtonClickedMessage(undefined);
         }}
         data-translation-key="catalog.filters.title"
       >

package/src/components/CatalogClassic/CatalogClassicCard.tsx

@@ -38,7 +38,7 @@ export function CatalogClassicCard({ item }: CatalogClassicCardProps): JSX.Eleme
     <Link key={item.docsLink || item.link} to={item.docsLink || item.link}>
       <StyledCard
         data-component-name="CatalogClassic/CatalogClassicCard"
-        onClick={() => telemetry.send({ type: 'catalog_item.clicked' })}
+        onClick={() => telemetry.sendCatalogItemClickedMessage(undefined)}
       >
         <CardContent>
           <CardTitleWrapper>

package/src/components/CatalogClassic/CatalogClassicInfoBlock.tsx

@@ -51,9 +51,7 @@ function ScorecardBadge(props: {
   return (
     <Link to={slug}>
       <Tag
-        onClick={() =>
-          telemetry.send({ type: 'scorecard_link.clicked', payload: { action: 'click' } })
-        }
+        onClick={() => telemetry.sendScorecardLinkClickedMessage({ action: 'click' })}
         withStatusDot
         statusDotColor={`var(${colorVariable})`}
       >

package/src/components/CodeBlock/CodeBlockControls.tsx

@@ -180,10 +180,7 @@ export function CodeBlockControls({
                 if (copy?.onClick) {
                   copy?.onClick?.();
                 } else {
-                  telemetry.send({
-                    type: 'openapi_docs.copy_code_snippet.clicked',
-                    payload: { snippetType: 'copy' },
-                  });
+                  telemetry.sendCopyCodeSnippetClickedMessage({ snippetType: 'copy' });
                 }
               }}
             />

package/src/components/Feedback/Feedback.tsx

@@ -58,7 +58,7 @@ export function Feedback(props: FeedbackProps & { path?: string }) {
           settings={settings}
           onSubmit={(values) => {
             submitFeedback({ type, values, path });
-            telemetry.send({ type: 'feedback.sent', payload: { feedbackType: type } });
+            telemetry.sendFeedbackMessage({ feedbackType: type });
           }}
         />
       </FeedbackWrapper>

package/src/components/Feedback/ReportDialog.tsx

@@ -47,7 +47,7 @@ export function ReportDialog({
               path: pathname,
               lang,
             });
-            telemetry.send({ type: 'code_snippet.reported' });
+            telemetry.sendCodeSnippetReportedMessage(undefined);
             onSubmit();
           }}
           isDialog={true}

package/src/components/Filter/FilterCheckboxes.tsx

@@ -36,7 +36,7 @@ export function FilterCheckboxes({
               role="link"
               onClick={() => {
                 filter.toggleOption(value);
-                telemetry.send({ type: 'filter_checkbox.toggled', payload: { id } });
+                telemetry.sendFilterCheckboxToggledMessage({ id });
               }}
             >
               <CheckboxIcon

package/src/components/Footer/FooterItem.tsx

@@ -44,7 +44,7 @@ export function FooterItem({ item, iconsOnly, className }: FooterItemProps): JSX
           external={item.external}
           target={item.target}
           data-testid={item.label}
-          onClick={() => telemetry.send({ type: 'footer_item.clicked' })}
+          onClick={() => telemetry.sendFooterItemClickedMessage(undefined)}
           data-translation-key={item.labelTranslationKey}
         >
           {hasIcon ? (

package/src/components/LanguagePicker/LanguagePicker.tsx

@@ -40,10 +40,7 @@ export function LanguagePicker(props: LanguagePickerProps): JSX.Element | null {
     onAction: () => {
       setLocale(locale.code);
       props.onChangeLanguage(locale.code);
-      telemetry.send({
-        type: 'language_picker_locale.changed',
-        payload: { locale: locale.code },
-      });
+      telemetry.sendLanguagePickerLocaleChangedMessage({ locale: locale.code });
     },
     active: locale.code === currentLocale.code,
     suffix: locale.code === currentLocale.code && <CheckmarkIcon />,

package/src/components/Logo/Logo.tsx

@@ -27,7 +27,7 @@ export function Logo({ config, className, ...otherProps }: LogoProps): JSX.Eleme
   return (
     <LogoWrapper data-component-name="Logo/Logo" className={className} {...otherProps}>
       {config.link ? (
-        <Link to={config.link} onClick={() => telemetry.send({ type: 'logo.clicked' })}>
+        <Link to={config.link} onClick={() => telemetry.sendLogoClickedMessage(undefined)}>
           {image}
         </Link>
       ) : (

package/src/components/Menu/MenuItem.tsx

@@ -37,12 +37,9 @@ export function MenuItem(props: React.PropsWithChildren<MenuItemProps>): JSX.Ele
   const hasHttpTag = !!item.httpVerb || type === MenuItemType.Operation;
 
   const handleOnClick = () => {
-    telemetry.send({
-      type: 'sidebar.item_clicked',
-      payload: {
-        label: item.label,
-        type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
-      },
+    telemetry.sendSidebarItemClickedMessage({
+      label: item.label,
+      type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
     });
     onClick?.();
     if (isNested) {

package/src/components/Navbar/Navbar.tsx

@@ -58,11 +58,11 @@ export function Navbar({ className }: NavbarProps): JSX.Element | null {
             isOpen
               ? () => {
                   closeMobileMenu();
-                  telemetry.send({ type: 'mobile_menu_button_close.clicked' });
+                  telemetry.sendMobileMenuButtonCloseClickedMessage(undefined);
                 }
               : () => {
                   openMobileMenu();
-                  telemetry.send({ type: 'mobile_menu_button_open.clicked' });
+                  telemetry.sendMobileMenuButtonOpenClickedMessage(undefined);
                 }
           }
           icon={isOpen ? <CloseIcon /> : <MenuIcon />}

package/src/components/Navbar/NavbarItem.tsx

@@ -46,9 +46,7 @@ export function NavbarItem({ navItem, className }: NavbarItemProps): JSX.Element
       as={item.link ? Link : undefined}
       active={isActive}
       className={className}
-      onClick={() =>
-        telemetry.send({ type: 'navbar.menu_item_clicked', payload: { type: item.type } })
-      }
+      onClick={() => telemetry.sendNavbarMenuItemClickedMessage({ type: item.type })}
       external={item.external}
       target={item.target}
       to={item.link}

package/src/components/Search/SearchDialog.tsx

@@ -139,15 +139,12 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
           innerRef={innerRef}
           onClick={() => {
             addSearchHistoryItem(query);
-            telemetry.send({
-              type: 'search.result.clicked',
-              payload: {
-                query,
-                url: item.document.url,
-                totalResults: results.length.toString(),
-                index: index.toString(),
-                searchEngine: mode,
-              },
+            telemetry.sendSearchResultClickedMessage({
+              query,
+              url: item.document.url,
+              totalResults: results.length.toString(),
+              index: index.toString(),
+              searchEngine: mode,
             });
             onClose();
           }}
@@ -381,12 +378,9 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   <>
                     <SearchRecent
                       onSelect={(query, index) => {
-                        telemetry.send({
-                          type: 'search.recent.clicked',
-                          payload: {
-                            query,
-                            index: index.toString(),
-                          },
+                        telemetry.sendSearchRecentClickedMessage({
+                          query,
+                          index: index.toString(),
                         });
                         setQuery(query);
                         focusSearchInput();

package/src/components/Search/SearchInput.tsx

@@ -51,7 +51,7 @@ export function SearchInput({
   const handleOnReset = () => {
     onChange('');
     addSearchHistoryItem(value);
-    telemetry.send({ type: 'search_input_reset_button.clicked' });
+    telemetry.sendSearchInputResetButtonClickedMessage(undefined);
   };
 
   return (

package/src/components/Search/SearchRecent.tsx

@@ -25,7 +25,7 @@ export function SearchRecent({ onSelect, className }: SearchRecentProps): JSX.El
   const handleOnRemove = (e: React.MouseEvent<SVGSVGElement, MouseEvent>, item: string) => {
     e.stopPropagation();
     removeSearchHistoryItem(item);
-    telemetry.send({ type: 'search_recent_remove_button.clicked' });
+    telemetry.sendSearchRecentRemoveButtonClickedMessage(undefined);
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>, item: string, index: number) => {

package/src/components/SidebarActions/SidebarActions.tsx

@@ -48,9 +48,9 @@ export const SidebarActions = ({
           onClick={() => {
             onChangeCollapseSidebarClick();
             if (collapsedSidebar) {
-              telemetry.send({ type: 'sidebar.item_expanded' });
+              telemetry.sendSidebarItemExpandedMessage(undefined);
             } else {
-              telemetry.send({ type: 'sidebar.item_collapsed' });
+              telemetry.sendSidebarItemCollapsedMessage(undefined);
             }
           }}
           title={
@@ -70,7 +70,7 @@ export const SidebarActions = ({
             layout={layout}
             onClick={() => {
               onChangeViewClick();
-              telemetry.send({ type: 'change_layout_button.clicked' });
+              telemetry.sendChangeLayoutButtonClickedMessage(undefined);
             }}
           />
         </ControlsWrapChangeLayoutButtons>

package/src/components/Switch/Switch.tsx

@@ -6,17 +6,48 @@ import type { JSX } from 'react';
 export type SwitchProps = {
   value: boolean;
   onChange: (value: boolean) => void;
+  onFocus?: () => void;
   disabled?: boolean;
+  stopPropagation?: boolean;
+  className?: string;
 };
 
-export function Switch({ value = false, disabled = false, onChange }: SwitchProps): JSX.Element {
-  const handleClick = () => {
+export function Switch({
+  value = false,
+  disabled = false,
+  onChange,
+  onFocus,
+  stopPropagation = false,
+  className,
+}: SwitchProps): JSX.Element {
+  const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
     if (disabled) return;
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
     onChange(!value);
   };
 
+  const handleFocus = (event: React.FocusEvent<HTMLDivElement>): void => {
+    if (stopPropagation) {
+      event.stopPropagation();
+    }
+
+    onFocus?.();
+  };
+
   return (
-    <SwitchWrapper onClick={handleClick} role="switch" selected={value} disabled={disabled}>
+    <SwitchWrapper
+      tabIndex={disabled ? -1 : 0}
+      onFocus={handleFocus}
+      onClick={handleClick}
+      role="switch"
+      aria-checked={value}
+      aria-disabled={disabled}
+      selected={value}
+      disabled={disabled}
+      className={className}
+    >
       <Knob selected={value} disabled={disabled} />
     </SwitchWrapper>
   );

package/src/components/TableOfContent/TableOfContent.tsx

@@ -62,7 +62,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
               data-testid={`toc-${heading.value}`}
               onClick={(e) => {
                 e.preventDefault();
-                telemetry.send({ type: 'toc_item.clicked' });
+                telemetry.sendTocItemClickedMessage(undefined);
                 handleHeadingClick(heading.id);
               }}
             />

package/src/components/UserMenu/LoginButton.tsx

@@ -20,7 +20,7 @@ export function LoginButton({ href, className }: LoginButtonProps): JSX.Element
       <Button
         data-translation-key="userMenu.login"
         to={href}
-        onClick={() => telemetry.send({ type: 'login_button.clicked' })}
+        onClick={() => telemetry.sendLoginButtonClickedMessage(undefined)}
         data-testid="login-btn"
         extraClass={className}
         variant="primary"

package/src/components/UserMenu/LogoutMenuItem.tsx

@@ -18,7 +18,7 @@ export function LogoutMenuItem({ iconOnly, className }: LogoutMenuItemProps): JS
   const { translate } = useTranslate();
 
   const handleClick = () => {
-    telemetry.send({ type: 'logout_menu_item.clicked' });
+    telemetry.sendLogoutMenuItemClickedMessage(undefined);
     handleLogout();
   };
 

package/src/core/hooks/__mocks__/use-theme-hooks.ts

@@ -12,6 +12,7 @@ export const useThemeHooks = vi.fn(() => ({
   })),
   useTelemetry: vi.fn(() => ({
     send: vi.fn(),
+    sendCodeSnippetReportedMessage: vi.fn(),
   })),
   useBreadcrumbs: vi.fn().mockReturnValue([]),
   usePageSharedData: vi.fn().mockReturnValue({}),