(Popover): update markups

Author: msmx-mnakagawa

src/scripts/Popover.tsx

@@ -70,13 +70,13 @@ export type PopoverProps = {
   bodyStyle?: CSSProperties;
   offsetX?: number;
   offsetY?: number;
-} & HTMLAttributes<HTMLDivElement>;
+} & HTMLAttributes<HTMLElement>;
 
 /**
  *
  */
 export const PopoverInner = forwardRef<
-  HTMLDivElement,
+  HTMLElement,
   PopoverProps & AutoAlignInjectedProps
 >((props, ref) => {
   const {
@@ -118,15 +118,15 @@ export const PopoverInner = forwardRef<
         : undefined,
   };
   return (
-    <div
+    <section
       ref={ref}
       className={popoverClassNames}
       role={tooltip ? 'tooltip' : 'dialog'}
       style={rootStyle}
       {...rprops}
     >
       <PopoverBody style={bodyStyle}>{children}</PopoverBody>
-    </div>
+    </section>
   );
 });
 

stories/Popover.stories.tsx

@@ -5,6 +5,7 @@ import {
   ComponentStoryObj,
   DecoratorFn,
 } from '@storybook/react';
+import classNames from 'classnames';
 
 /**
  *
@@ -20,7 +21,12 @@ const paddingDecorator: DecoratorFn = (story) => (
       padding: '100px 350px',
     }}
   >
-    <div className='slds-dropdown-trigger'>
+    <div
+      className={classNames(
+        'slds-dropdown-trigger',
+        'slds-dropdown-trigger_click'
+      )}
+    >
       <Button type='icon' icon='question' />
       {story()}
     </div>