fix(SkipToContent): Updated markup

packages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snap

@@ -1225,12 +1225,20 @@ exports[`Page Check page to verify skip to content points to main content region
     data-testid="page-test-id"
     id="PageId"
   >
-    <a
-      class="pf-c-button pf-m-primary pf-c-skip-to-content"
-      href="#main-content-page-layout-test-nav"
+    <div
+      class="pf-c-skip-to-content"
     >
-      Skip to Content
-    </a>
+      <a
+        aria-disabled="false"
+        class="pf-c-button pf-m-primary"
+        data-ouia-component-id="OUIA-Generated-Button-primary-1"
+        data-ouia-component-type="PF4/Button"
+        data-ouia-safe="true"
+        href="#main-content-page-layout-test-nav"
+      >
+        Skip to Content
+      </a>
+    </div>
     <header
       class="pf-c-page__header"
     >

packages/react-core/src/components/SkipToContent/SkipToContent.tsx

@@ -1,45 +1,28 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/SkipToContent/skip-to-content';
-import buttonStyles from '@patternfly/react-styles/css/components/Button/button';
 import { css } from '@patternfly/react-styles';
-import { PickOptional } from '../../helpers/typeUtils';
+import { Button, ButtonVariant } from '../Button';
 
-export interface SkipToContentProps extends React.HTMLProps<HTMLAnchorElement> {
+export interface SkipToContentProps extends React.HTMLProps<HTMLDivElement> {
   /** The skip to content link. */
   href: string;
   /** Content to display within the skip to content component, typically a string. */
   children?: React.ReactNode;
   /** Additional styles to apply to the skip to content component. */
   className?: string;
-  /** Forces the skip to content to display. This is primarily for demonstration purposes and would not normally be used. */
-  show?: boolean;
 }
 
-export class SkipToContent extends React.Component<SkipToContentProps> {
-  static displayName = 'SkipToContent';
-  static defaultProps: PickOptional<SkipToContentProps> = {
-    show: false
-  };
-  componentRef = React.createRef<HTMLAnchorElement>();
+export const SkipToContent: React.FunctionComponent<SkipToContentProps> = ({
+  children = null,
+  className = '',
+  href,
+  ...props
+}: SkipToContentProps) => (
+  <div className={css(styles.skipToContent, className)} {...props}>
+    <Button variant={ButtonVariant.primary} component="a" href={href}>
+      {children}
+    </Button>
+  </div>
+);
 
-  componentDidMount() {
-    if (this.props.show && this.componentRef.current) {
-      this.componentRef.current.focus();
-    }
-  }
-
-  render() {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { children, className, href, show, type, ...rest } = this.props;
-    return (
-      <a
-        {...rest}
-        className={css(buttonStyles.button, buttonStyles.modifiers.primary, styles.skipToContent, className)}
-        ref={this.componentRef}
-        href={href}
-      >
-        {children}
-      </a>
-    );
-  }
-}
+SkipToContent.displayName = 'SkipToContent';

packages/react-core/src/components/SkipToContent/__tests__/SkipToContent.test.tsx

@@ -10,8 +10,3 @@ test('Verify Skip To Content', () => {
   expect(asFragment()).toMatchSnapshot();
 });
 
-test('Verify Skip To Content if forced to display', () => {
-  const { asFragment } = render(<SkipToContent href="#main-content" {...props} show />);
-  // Add a useful assertion here.
-  expect(asFragment()).toMatchSnapshot();
-});

packages/react-core/src/components/SkipToContent/__tests__/__snapshots__/SkipToContent.test.tsx.snap

@@ -2,18 +2,17 @@
 
 exports[`Verify Skip To Content 1`] = `
 <DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
-</DocumentFragment>
-`;
-
-exports[`Verify Skip To Content if forced to display 1`] = `
-<DocumentFragment>
-  <a
-    class="pf-c-button pf-m-primary pf-c-skip-to-content"
-    href="#main-content"
-  />
+  <div
+    class="pf-c-skip-to-content"
+  >
+    <a
+      aria-disabled="false"
+      class="pf-c-button pf-m-primary"
+      data-ouia-component-id="OUIA-Generated-Button-primary-1"
+      data-ouia-component-type="PF4/Button"
+      data-ouia-safe="true"
+      href="#main-content"
+    />
+  </div>
 </DocumentFragment>
 `;

packages/react-integration/demo-app-ts/package.json

@@ -9,7 +9,7 @@
     "serve:demo-app": "node scripts/serve"
   },
   "dependencies": {
-    "@patternfly/react-core": "^5.0.0-alpha.15",
+    "@patternfly/react-core": "^5.0.0-alpha.16",
     "react": "^18",
     "react-dom": "^18",
     "react-router": "^5.3.3",