From f4e023827404de749779f36d4568142cff15baa4 Mon Sep 17 00:00:00 2001
From: jenny-s51 <jshandel12@gmail.com>
Date: Tue, 18 Jun 2019 10:50:41 -0400
Subject: [PATCH] fix(Accordion): final changes

---
 .../components/Accordion/Accordion.test.tsx   | 15 ++++
 .../src/components/Accordion/Accordion.tsx    |  6 ++
 .../components/Accordion/AccordionToggle.tsx  | 27 +++---
 .../__snapshots__/Accordion.test.tsx.snap     | 90 +++++++++++++++++++
 4 files changed, 127 insertions(+), 11 deletions(-)

diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
index 854b313db7f..196beffeb8f 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.test.tsx
@@ -2,6 +2,8 @@ import React from 'react';
 import { shallow, mount } from 'enzyme';
 import { Accordion } from './Accordion';
 import { AccordionToggle } from './AccordionToggle';
+import { AccordionContent } from './AccordionContent';
+import { AccordionItem } from './AccordionItem';
 
 describe('Accordion', () => {
   test('Accordion default', () => {
@@ -9,6 +11,19 @@ describe('Accordion', () => {
     expect(view.render()).toMatchSnapshot();
   });
 
+  test('Accordion with non-default headingLevel', () => {
+    const view = shallow(
+      <Accordion headingLevel="h2">
+        <AccordionItem>
+          <AccordionToggle id="item-1">Item One</AccordionToggle>
+          <AccordionContent>Item One Content</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    );
+    expect(view.render()).toMatchSnapshot();
+  });
+
+
   test('It should pass optional aria props', () => {
     const view = mount(
       <AccordionToggle aria-label="Toggle details for" aria-labelledby="ex-toggle2 ex-item2" id="ex-toggle2" />
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
index 750917c06c6..322b59ba035 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
+++ b/packages/patternfly-4/react-core/src/components/Accordion/Accordion.tsx
@@ -2,6 +2,8 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
+export const AccordionContext = React.createContext('h3');
+
 export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   /** Content rendered inside the Accordion  */
   children?: React.ReactNode;
@@ -9,15 +11,19 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   className?: string;
   /** Adds accessible text to the Accordion */
   'aria-label'?: string;
+  /** the heading level to use */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 export const Accordion: React.FunctionComponent<AccordionProps> = ({
   children = null,
   className = '',
   'aria-label': ariaLabel = '',
+  headingLevel = 'h3',
   ...props
 }: AccordionProps) => (
   <dl className={css(styles.accordion, className)} aria-label={ariaLabel} {...props}>
+    <AccordionContext.Provider value={headingLevel}>{children}</AccordionContext.Provider>
     {children}
   </dl>
 );
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx
index 6ba130e5fda..e5f169251b4 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx
+++ b/packages/patternfly-4/react-core/src/components/Accordion/AccordionToggle.tsx
@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 import { AngleRightIcon } from '@patternfly/react-icons';
 import { Omit } from '../../helpers/typeUtils';
+import { AccordionContext } from './Accordion';
 
 export interface AccordionToggleProps extends Omit<React.HTMLProps<HTMLButtonElement>, 'type'> {
   /** Content rendered inside the Accordion toggle  */
@@ -23,16 +24,20 @@ export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
   ...props
 }: AccordionToggleProps) => (
   <dt>
-    <h3>
-      <button
-        id={id}
-        className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
-        {...props}
-        aria-expanded={isExpanded}
-      >
-        <span className={css(styles.accordionToggleText)}>{children}</span>
-        <AngleRightIcon className={css(styles.accordionToggleIcon)} />
-      </button>
-    </h3>
+    <AccordionContext.Consumer>
+      {(AccordionHeadingLevel: any) => (
+        <AccordionHeadingLevel>
+          <button
+            id={id}
+            className={css(styles.accordionToggle, isExpanded && styles.modifiers.expanded, className)}
+            {...props}
+            aria-expanded={isExpanded}
+          >
+            <span className={css(styles.accordionToggleText)}>{children}</span>
+            <AngleRightIcon className={css(styles.accordionToggleIcon)} />
+          </button>
+        </AccordionHeadingLevel>
+      )}
+    </AccordionContext.Consumer>
   </dt>
 );
diff --git a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
index 8b5b87cfc40..ac5f7da3423 100644
--- a/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
+++ b/packages/patternfly-4/react-core/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap
@@ -6,3 +6,93 @@ exports[`Accordion Accordion default 1`] = `
   class="pf-c-accordion"
 />
 `;
+
+exports[`Accordion Accordion with non-default headingLevel 1`] = `
+<dl
+  aria-label=""
+  class="pf-c-accordion"
+>
+  <dt>
+    <h2>
+      <button
+        aria-expanded="false"
+        class="pf-c-accordion__toggle"
+        id="item-1"
+      >
+        <span
+          class="pf-c-accordion__toggle-text"
+        >
+          Item One
+        </span>
+        <svg
+          aria-hidden="true"
+          class="pf-c-accordion__toggle-icon"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </h2>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+  <dt>
+    <h3>
+      <button
+        aria-expanded="false"
+        class="pf-c-accordion__toggle"
+        id="item-1"
+      >
+        <span
+          class="pf-c-accordion__toggle-text"
+        >
+          Item One
+        </span>
+        <svg
+          aria-hidden="true"
+          class="pf-c-accordion__toggle-icon"
+          fill="currentColor"
+          height="1em"
+          role="img"
+          style="vertical-align:-0.125em"
+          viewBox="0 0 256 512"
+          width="1em"
+        >
+          <path
+            d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+            transform=""
+          />
+        </svg>
+      </button>
+    </h3>
+  </dt>
+  <dd
+    aria-label=""
+    class="pf-c-accordion__expanded-content pf-m-expanded"
+    id=""
+  >
+    <div
+      class="pf-c-accordion__expanded-content-body"
+    >
+      Item One Content
+    </div>
+  </dd>
+</dl>
+`;