@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/tests/unit/src/components/ContentGroup/ContentGroup.test.js

@@ -1,16 +1,89 @@
 /**
  * @jest-environment jsdom
  */
+import React from 'react';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import ContentGroup from '../../../../../src/components/ContentGroup/ContentGroup';
 
+jest.mock('../../../../../src/components/ContentGroup/ContentGroupTabs', () => ({
+  __esModule: true,
+  default: ({ contentType }) => <div data-testid="content-group-tabs">Inner: {contentType}</div>
+}));
+
+const TestChild = ({ children }) => <div>{children}</div>;
+const buildChildren = (sectionsCount = 2) => (
+  <div>
+    <div>Header</div>
+    {Array.from({ length: sectionsCount }).map((_, i) => (
+      <TestChild key={`s${i + 1}`}>Section {i + 1}</TestChild>
+    ))}
+  </div>
+);
+
 describe('ContentGroup component', () => {
-  it('should match snapshot and render based on contentType prop', () => {
-    const { asFragment: tabContentGroup } = render(ContentGroup, { contentType: 'tab' });
+  it('matches snapshots for tab and sidepanel', () => {
+    const { asFragment: tabContentGroup } = render(ContentGroup, {
+      contentType: 'tab'
+    });
     const { asFragment: sidepanelContentGroup } = render(ContentGroup, {
       contentType: 'sidepanel'
     });
+
     expect(tabContentGroup()).toMatchSnapshot();
     expect(sidepanelContentGroup()).toMatchSnapshot();
   });
+
+  it('wraps output in FAQPage schema when isFaqContent is true', () => {
+    const { container } = render(ContentGroup, {
+      contentType: 'tab',
+      isFaqContent: true,
+      children: buildChildren()
+    });
+
+    const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+    expect(faqWrapper).toBeTruthy();
+  });
+
+  it('spreads customHtmlProps onto the wrapper element', () => {
+    const customHtmlProps = [
+      { name: 'data-testid', value: 'content-group-wrapper' },
+      { name: 'aria-label', value: 'My group' }
+    ];
+    const { container } = render(ContentGroup, {
+      contentType: 'tab',
+      isFaqContent: true,
+      customHtmlProps,
+      children: buildChildren()
+    });
+
+    const wrapper = container.querySelector('div[data-testid="content-group-wrapper"]');
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.getAttribute('aria-label')).toBe('My group');
+  });
+
+  it('excludes customHtmlProps entries with value "null" from the wrapper', () => {
+    const customHtmlProps = [{ name: 'data-skip', value: 'null' }];
+    const { container } = render(ContentGroup, {
+      contentType: 'tab',
+      isFaqContent: true,
+      customHtmlProps,
+      children: buildChildren()
+    });
+
+    const wrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+    expect(wrapper).toBeTruthy();
+    expect(wrapper.getAttribute('data-skip')).toBeNull();
+  });
+
+  it('renders correctly with an empty customHtmlProps array', () => {
+    const { container } = render(ContentGroup, {
+      contentType: 'tab',
+      isFaqContent: true,
+      customHtmlProps: [],
+      children: buildChildren()
+    });
+
+    const faqWrapper = container.querySelector('div[itemtype="https://schema.org/FAQPage"]');
+    expect(faqWrapper).toBeTruthy();
+  });
 });

package/tests/unit/src/components/ContentGroup/ContentGroupAccordion.test.js

@@ -0,0 +1,283 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { useRouter } from 'next/router';
+import ContentGroupAccordion from '../../../../../src/components/ContentGroup/ContentGroupAccordion';
+import { OPEN_STATES } from '../../../../../src/components/ContentGroup/constants';
+
+const RESOLVER = '/Resolver';
+
+// Test constants
+const TEST_CONSTANTS = {
+  ACCORDION_URL: 'accordion-url',
+  SECTION_ONE_ID: 'section-one',
+  SECTION_TWO_ID: 'section-two',
+  SECTION_ONE_CAMEL: 'sectionOne',
+  SECTION_TWO_CAMEL: 'sectionTwo',
+  SECTION_ONE_TEXT: 'section one',
+  SECTION_TWO_TEXT: 'section two',
+  TEST_ACCORDION_NAME: 'testAccordion',
+  VARIANT_TESTID: 'variant',
+  BUTTON_ROLE: 'button',
+  ARIA_EXPANDED: 'aria-expanded',
+  ARIA_CONTROLS: 'aria-controls',
+  TRUE: 'true',
+  FALSE: 'false'
+};
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn()
+}));
+
+const buildRouter = (overrides = {}) => ({
+  asPath: TEST_CONSTANTS.ACCORDION_URL,
+  push: jest.fn(),
+  replace: jest.fn(),
+  ...overrides
+});
+
+const VariantComponent = ({ children }) => (
+  <div data-testid={TEST_CONSTANTS.VARIANT_TESTID}>{children}</div>
+);
+
+const mockedProps = {
+  name: TEST_CONSTANTS.TEST_ACCORDION_NAME,
+  groupSections: [
+    <div key="s1">{TEST_CONSTANTS.SECTION_ONE_TEXT}</div>,
+    <div key="s2">{TEST_CONSTANTS.SECTION_TWO_TEXT}</div>
+  ],
+  sectionsData: [
+    [TEST_CONSTANTS.SECTION_ONE_ID, TEST_CONSTANTS.SECTION_ONE_CAMEL],
+    [TEST_CONSTANTS.SECTION_TWO_ID, TEST_CONSTANTS.SECTION_TWO_CAMEL]
+  ]
+};
+
+beforeEach(() => {
+  jest.clearAllMocks();
+  useRouter.mockReturnValue(buildRouter());
+});
+
+describe('ContentGroupAccordion component', () => {
+  it('matches snapshot and renders basic accordion', () => {
+    const { asFragment } = render(<ContentGroupAccordion {...mockedProps} />);
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('matches snapshot and renders variant accordion', () => {
+    const { asFragment } = render(
+      <ContentGroupAccordion {...mockedProps} VariantComponent={VariantComponent} />
+    );
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('opens the section indicated by the URL hash on first render', () => {
+    useRouter.mockReturnValue(
+      buildRouter({ asPath: `${TEST_CONSTANTS.ACCORDION_URL}#${TEST_CONSTANTS.SECTION_TWO_ID}` })
+    );
+
+    render(<ContentGroupAccordion {...mockedProps} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+    expect(headers.length).toBeGreaterThanOrEqual(2);
+
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+  });
+
+  it('toggles a section when its header is clicked', () => {
+    const router = buildRouter();
+    useRouter.mockReturnValue(router);
+
+    render(<ContentGroupAccordion {...mockedProps} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+
+    fireEvent.click(headers[0]);
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+    expect(router.replace).toHaveBeenLastCalledWith(
+      RESOLVER,
+      `${TEST_CONSTANTS.ACCORDION_URL}#${TEST_CONSTANTS.SECTION_ONE_ID}`,
+      expect.objectContaining({ shallow: true, scroll: false })
+    );
+
+    fireEvent.click(headers[0]);
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+    expect(router.replace).toHaveBeenLastCalledWith(
+      RESOLVER,
+      TEST_CONSTANTS.ACCORDION_URL,
+      expect.objectContaining({ shallow: true, scroll: false })
+    );
+  });
+
+  it('opens another section when its header is clicked', () => {
+    render(<ContentGroupAccordion {...mockedProps} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+
+    fireEvent.click(headers[0]);
+    fireEvent.click(headers[1]);
+
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+  });
+
+  it('renders accordion with child content inside (content present in DOM)', () => {
+    render(<ContentGroupAccordion {...mockedProps} />);
+    expect(screen.getByText(TEST_CONSTANTS.SECTION_ONE_TEXT)).toBeInTheDocument();
+    expect(screen.getByText(TEST_CONSTANTS.SECTION_TWO_TEXT)).toBeInTheDocument();
+  });
+
+  it('has basic accessibility attributes expected by Lighthouse (ARIA)', () => {
+    render(<ContentGroupAccordion {...mockedProps} />);
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+
+    headers.forEach(hdr => {
+      expect(hdr).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED);
+      const controls = hdr.getAttribute(TEST_CONSTANTS.ARIA_CONTROLS);
+      expect(controls).toBeTruthy();
+    });
+  });
+
+  it('opens the item matching the hash after a "reload" (initial asPath contains hash)', () => {
+    useRouter.mockReturnValue(
+      buildRouter({ asPath: `${TEST_CONSTANTS.ACCORDION_URL}#${TEST_CONSTANTS.SECTION_ONE_ID}` })
+    );
+
+    render(<ContentGroupAccordion {...mockedProps} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+  });
+
+  it('supports opening more than one accordion item at a time', () => {
+    render(<ContentGroupAccordion {...mockedProps} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+
+    fireEvent.click(headers[0]);
+    fireEvent.click(headers[1]);
+
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+  });
+
+  it('renders all item panels in HTML and uses CSS to show/hide (no unmount on close)', () => {
+    render(<ContentGroupAccordion {...mockedProps} />);
+
+    const contentOne = screen.getByText(TEST_CONSTANTS.SECTION_ONE_TEXT);
+    const contentTwo = screen.getByText(TEST_CONSTANTS.SECTION_TWO_TEXT);
+
+    expect(contentOne).toBeInTheDocument();
+    expect(contentTwo).toBeInTheDocument();
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+    fireEvent.click(headers[0]);
+    fireEvent.click(headers[0]);
+
+    expect(contentOne).toBeInTheDocument();
+    expect(contentTwo).toBeInTheDocument();
+  });
+
+  it('openState="first open" opens only the first item by default no hash', () => {
+    render(<ContentGroupAccordion {...mockedProps} openState={OPEN_STATES.FIRST_OPEN} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+  });
+
+  it('openState="all open" opens all items by default no hash', () => {
+    render(<ContentGroupAccordion {...mockedProps} openState={OPEN_STATES.ALL_OPEN} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+  });
+
+  it('openState="all closed" starts with all items closed by default no hash', () => {
+    render(<ContentGroupAccordion {...mockedProps} openState={OPEN_STATES.ALL_CLOSED} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+  });
+
+  it('URL hash overrides openState on first render', () => {
+    useRouter.mockReturnValue(
+      buildRouter({ asPath: `${TEST_CONSTANTS.ACCORDION_URL}#${TEST_CONSTANTS.SECTION_TWO_ID}` })
+    );
+    render(<ContentGroupAccordion {...mockedProps} openState={OPEN_STATES.ALL_CLOSED} />);
+
+    const headers = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+
+    expect(headers[0]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.FALSE);
+    expect(headers[1]).toHaveAttribute(TEST_CONSTANTS.ARIA_EXPANDED, TEST_CONSTANTS.TRUE);
+  });
+
+  it('toggling updates the URL hash appropriately with scroll disabled', () => {
+    const router = buildRouter();
+    useRouter.mockReturnValue(router);
+
+    render(<ContentGroupAccordion {...mockedProps} openState={OPEN_STATES.ALL_CLOSED} />);
+
+    const [first, second] = screen.getAllByRole(TEST_CONSTANTS.BUTTON_ROLE);
+
+    fireEvent.click(first);
+    expect(router.replace).toHaveBeenLastCalledWith(
+      RESOLVER,
+      `${TEST_CONSTANTS.ACCORDION_URL}#${TEST_CONSTANTS.SECTION_ONE_ID}`,
+      expect.objectContaining({ shallow: true, scroll: false })
+    );
+
+    fireEvent.click(second);
+    expect(router.replace).toHaveBeenLastCalledWith(
+      RESOLVER,
+      `${TEST_CONSTANTS.ACCORDION_URL}#${TEST_CONSTANTS.SECTION_TWO_ID}`,
+      expect.objectContaining({ shallow: true, scroll: false })
+    );
+
+    fireEvent.click(second);
+    expect(router.replace).toHaveBeenLastCalledWith(
+      RESOLVER,
+      TEST_CONSTANTS.ACCORDION_URL,
+      expect.objectContaining({ shallow: true, scroll: false })
+    );
+  });
+
+  describe('structured data props', () => {
+    it('applies groupSectionProps to accordion sections', () => {
+      const customProperties = {
+        groupSectionProps: {
+          'data-testid': 'custom-section'
+        },
+        groupSectionTitleProps: {
+          'data-testid': 'custom-title'
+        },
+        groupContentWrapperProps: {
+          'data-testid': 'custom-content-wrapper'
+        },
+        groupContentProps: {
+          'data-testid': 'custom-content'
+        }
+      };
+
+      render(<ContentGroupAccordion {...mockedProps} {...customProperties} />);
+
+      const sections = screen.getAllByTestId('custom-section');
+      expect(sections.length).toBe(2);
+
+      const titles = screen.getAllByTestId('custom-title');
+      expect(titles.length).toBe(2);
+
+      const contentWrappers = screen.getAllByTestId('custom-content-wrapper');
+      expect(contentWrappers.length).toBe(2);
+
+      const contents = screen.getAllByTestId('custom-content');
+      expect(contents.length).toBe(2);
+    });
+  });
+});

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroup.test.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ContentGroup component should match snapshot and render based on contentType prop 1`] = `<DocumentFragment />`;
+exports[`ContentGroup component matches snapshots for tab and sidepanel 1`] = `<DocumentFragment />`;
 
-exports[`ContentGroup component should match snapshot and render based on contentType prop 2`] = `<DocumentFragment />`;
+exports[`ContentGroup component matches snapshots for tab and sidepanel 2`] = `<DocumentFragment />`;

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupAccordion.test.js.snap

@@ -0,0 +1,243 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentGroupAccordion component matches snapshot and renders basic accordion 1`] = `
+<DocumentFragment>
+  <div
+    class="content-group-accordion"
+  >
+    <div
+      aria-label="testAccordion"
+      class="content-group-accordion__items"
+    >
+      <div
+        class="content-group-accordion__item"
+      >
+        <h3
+          class="content-group-accordion__heading"
+        >
+          <button
+            aria-controls="section-one-panel"
+            aria-expanded="false"
+            class="content-group-accordion__header-btn"
+            id="section-one"
+            type="button"
+          >
+            <span
+              class="content-group-accordion__title"
+            >
+              sectionOne
+            </span>
+            <span
+              aria-hidden="true"
+              class="content-group-accordion__chevron"
+            >
+              <svg
+                class="content-group-accordion__chevron-icon"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 16 16"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </h3>
+        <div
+          aria-labelledby="section-one"
+          class="content-group-accordion__panel"
+          data-section="section-one"
+          hidden=""
+          id="section-one-panel"
+          role="region"
+        >
+          <div>
+            <div>
+              section one
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="content-group-accordion__item"
+      >
+        <h3
+          class="content-group-accordion__heading"
+        >
+          <button
+            aria-controls="section-two-panel"
+            aria-expanded="false"
+            class="content-group-accordion__header-btn"
+            id="section-two"
+            type="button"
+          >
+            <span
+              class="content-group-accordion__title"
+            >
+              sectionTwo
+            </span>
+            <span
+              aria-hidden="true"
+              class="content-group-accordion__chevron"
+            >
+              <svg
+                class="content-group-accordion__chevron-icon"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 16 16"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </h3>
+        <div
+          aria-labelledby="section-two"
+          class="content-group-accordion__panel"
+          data-section="section-two"
+          hidden=""
+          id="section-two-panel"
+          role="region"
+        >
+          <div>
+            <div>
+              section two
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ContentGroupAccordion component matches snapshot and renders variant accordion 1`] = `
+<DocumentFragment>
+  <div
+    class="content-group-accordion"
+  >
+    <div
+      aria-label="testAccordion"
+      class="content-group-accordion__items"
+    >
+      <div
+        class="content-group-accordion__item"
+      >
+        <h3
+          class="content-group-accordion__heading"
+        >
+          <button
+            aria-controls="section-one-panel"
+            aria-expanded="false"
+            class="content-group-accordion__header-btn"
+            id="section-one"
+            type="button"
+          >
+            <span
+              class="content-group-accordion__title"
+            >
+              sectionOne
+            </span>
+            <span
+              aria-hidden="true"
+              class="content-group-accordion__chevron"
+            >
+              <svg
+                class="content-group-accordion__chevron-icon"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 16 16"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </h3>
+        <div
+          data-testid="variant"
+        >
+          <div>
+            <div>
+              section one
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="content-group-accordion__item"
+      >
+        <h3
+          class="content-group-accordion__heading"
+        >
+          <button
+            aria-controls="section-two-panel"
+            aria-expanded="false"
+            class="content-group-accordion__header-btn"
+            id="section-two"
+            type="button"
+          >
+            <span
+              class="content-group-accordion__title"
+            >
+              sectionTwo
+            </span>
+            <span
+              aria-hidden="true"
+              class="content-group-accordion__chevron"
+            >
+              <svg
+                class="content-group-accordion__chevron-icon"
+                fill="currentColor"
+                height="1em"
+                stroke="currentColor"
+                stroke-width="0"
+                viewBox="0 0 16 16"
+                width="1em"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  clip-rule="evenodd"
+                  d="M7.976 10.072l4.357-4.357.62.618L8.284 11h-.618L3 6.333l.619-.618 4.357 4.357z"
+                  fill-rule="evenodd"
+                />
+              </svg>
+            </span>
+          </button>
+        </h3>
+        <div
+          data-testid="variant"
+        >
+          <div>
+            <div>
+              section two
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -32,16 +32,31 @@ exports[`ContentGroupTabs component should match snapshot and render sidepanel c
       </button>
     </ul>
     <div
+      aria-hidden="false"
       aria-labelledby="tab-section-one"
       class="content-group-sidepanel__content-section"
       id="section-one"
       role="tabpanel"
       tabid="tab-section-one"
+      tabindex="0"
     >
       <div>
         section one
       </div>
     </div>
+    <div
+      aria-hidden="true"
+      aria-labelledby="tab-section-two"
+      class="content-group-sidepanel__content-section"
+      id="section-two"
+      role="tabpanel"
+      tabid="tab-section-two"
+      tabindex="-1"
+    >
+      <div>
+        section two
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;
@@ -78,16 +93,31 @@ exports[`ContentGroupTabs component should match snapshot and render tabs conten
       </button>
     </ul>
     <div
+      aria-hidden="false"
       aria-labelledby="tab-section-one"
       class="content-group-tabs__content-section"
       id="section-one"
       role="tabpanel"
       tabid="tab-section-one"
+      tabindex="0"
     >
       <div>
         section one
       </div>
     </div>
+    <div
+      aria-hidden="true"
+      aria-labelledby="tab-section-two"
+      class="content-group-tabs__content-section"
+      id="section-two"
+      role="tabpanel"
+      tabid="tab-section-two"
+      tabindex="-1"
+    >
+      <div>
+        section two
+      </div>
+    </div>
   </div>
 </DocumentFragment>
 `;