fix element types with as prop part 1

Author: balzss

packages/ui-a11y-content/src/ScreenReaderContent/index.tsx

@@ -72,16 +72,18 @@ class ScreenReaderContent extends Component<ScreenReaderContentProps> {
   }
 
   render() {
-    const { children, styles, ...props } = this.props
-    const ElementType = getElementType(ScreenReaderContent, props)
+    const { children, styles, as, ...props } = this.props
+    // TODO is this ok?
+    // const ElementType = getElementType(ScreenReaderContent, props)
+    const Component = as || 'span'
     return (
-      <ElementType
+      <Component
         {...passthroughProps(props)}
         css={styles?.screenReaderContent}
         ref={this.handleRef}
       >
         {children}
-      </ElementType>
+      </Component>
     )
   }
 }

packages/ui-react-utils/src/getElementType.ts

@@ -60,7 +60,7 @@ function getElementType<T extends PropsObject>(
   props: T,
   getDefault?: () => AsElementType<T>
 ) {
-  if (props.as && props.as !== Component.defaultProps?.as) {
+  if (props.as) {
     return props.as
   }
   if (typeof getDefault === 'function') {
@@ -80,7 +80,7 @@ function getElementType<T extends PropsObject>(
   if (typeof props.onClick === 'function') {
     return 'button'
   }
-  return Component.defaultProps?.as || 'span'
+  return 'span'
 }
 
 export default getElementType