From 4c91412810bb4fc5d4bc064ba1639fb26ab792bb Mon Sep 17 00:00:00 2001
From: Josh Black <josh@josh.black>
Date: Tue, 7 Apr 2020 12:41:42 -0500
Subject: [PATCH 1/2] fix(accordion): add aria-controls on each accordion item
 (#5787)

* fix(accordion): add aria-controls on each accordion item

* test(accordion): update snapshots

* chore(react): fix eslint violations

Co-authored-by: TJ Egan <tw15egan@gmail.com>
---
 .../src/components/Accordion/AccordionItem.js |  7 +++-
 .../__snapshots__/Accordion-test.js.snap      |  9 ++++++
 .../__snapshots__/AccordionItem-test.js.snap  |  3 ++
 .../src/internal/__tests__/useId-test.js      | 32 +++++++++++++++++++
 packages/react/src/internal/useId.js          | 21 ++++++++++++
 5 files changed, 71 insertions(+), 1 deletion(-)
 create mode 100644 packages/react/src/internal/__tests__/useId-test.js
 create mode 100644 packages/react/src/internal/useId.js

diff --git a/packages/react/src/components/Accordion/AccordionItem.js b/packages/react/src/components/Accordion/AccordionItem.js
index 4482a541c4a3..e99ecd40f537 100644
--- a/packages/react/src/components/Accordion/AccordionItem.js
+++ b/packages/react/src/components/Accordion/AccordionItem.js
@@ -11,6 +11,7 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { match, keys } from '../../internal/keyboard';
+import { useId } from '../../internal/useId';
 
 const { prefix } = settings;
 const defaultRenderExpando = props => <button {...props} />;
@@ -28,6 +29,7 @@ function AccordionItem({
   const [isOpen, setIsOpen] = useState(open);
   const [prevIsOpen, setPrevIsOpen] = useState(open);
   const [animation, setAnimation] = useState('');
+  const id = useId('accordion-item');
   const className = cx({
     [`${prefix}--accordion__item`]: true,
     [`${prefix}--accordion__item--active`]: isOpen,
@@ -70,6 +72,7 @@ function AccordionItem({
   return (
     <li className={className} {...rest} onAnimationEnd={handleAnimationEnd}>
       <Expando
+        aria-controls={id}
         aria-expanded={isOpen}
         className={`${prefix}--accordion__heading`}
         onClick={onClick}
@@ -82,7 +85,9 @@ function AccordionItem({
         />
         <div className={`${prefix}--accordion__title`}>{title}</div>
       </Expando>
-      <div className={`${prefix}--accordion__content`}>{children}</div>
+      <div id={id} className={`${prefix}--accordion__content`}>
+        {children}
+      </div>
     </li>
   );
 }
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
index 91a47fd42e86..2c6e2ad9ebdf 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/Accordion-test.js.snap
@@ -17,6 +17,7 @@ exports[`Accordion should render 1`] = `
         onAnimationEnd={[Function]}
       >
         <defaultRenderExpando
+          aria-controls="accordion-item-1"
           aria-expanded={false}
           className="bx--accordion__heading"
           onClick={[Function]}
@@ -25,6 +26,7 @@ exports[`Accordion should render 1`] = `
           type="button"
         >
           <button
+            aria-controls="accordion-item-1"
             aria-expanded={false}
             className="bx--accordion__heading"
             onClick={[Function]}
@@ -71,6 +73,7 @@ exports[`Accordion should render 1`] = `
         </defaultRenderExpando>
         <div
           className="bx--accordion__content"
+          id="accordion-item-1"
         >
           Panel A
         </div>
@@ -85,6 +88,7 @@ exports[`Accordion should render 1`] = `
         onAnimationEnd={[Function]}
       >
         <defaultRenderExpando
+          aria-controls="accordion-item-2"
           aria-expanded={false}
           className="bx--accordion__heading"
           onClick={[Function]}
@@ -93,6 +97,7 @@ exports[`Accordion should render 1`] = `
           type="button"
         >
           <button
+            aria-controls="accordion-item-2"
             aria-expanded={false}
             className="bx--accordion__heading"
             onClick={[Function]}
@@ -139,6 +144,7 @@ exports[`Accordion should render 1`] = `
         </defaultRenderExpando>
         <div
           className="bx--accordion__content"
+          id="accordion-item-2"
         >
           Panel B
         </div>
@@ -153,6 +159,7 @@ exports[`Accordion should render 1`] = `
         onAnimationEnd={[Function]}
       >
         <defaultRenderExpando
+          aria-controls="accordion-item-3"
           aria-expanded={false}
           className="bx--accordion__heading"
           onClick={[Function]}
@@ -161,6 +168,7 @@ exports[`Accordion should render 1`] = `
           type="button"
         >
           <button
+            aria-controls="accordion-item-3"
             aria-expanded={false}
             className="bx--accordion__heading"
             onClick={[Function]}
@@ -207,6 +215,7 @@ exports[`Accordion should render 1`] = `
         </defaultRenderExpando>
         <div
           className="bx--accordion__content"
+          id="accordion-item-3"
         >
           Panel C
         </div>
diff --git a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
index 1ff83cab4027..4de449455e15 100644
--- a/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
+++ b/packages/react/src/components/Accordion/__tests__/__snapshots__/AccordionItem-test.js.snap
@@ -10,6 +10,7 @@ exports[`AccordionItem should render 1`] = `
     onAnimationEnd={[Function]}
   >
     <defaultRenderExpando
+      aria-controls="accordion-item-1"
       aria-expanded={false}
       className="bx--accordion__heading"
       onClick={[Function]}
@@ -18,6 +19,7 @@ exports[`AccordionItem should render 1`] = `
       type="button"
     >
       <button
+        aria-controls="accordion-item-1"
         aria-expanded={false}
         className="bx--accordion__heading"
         onClick={[Function]}
@@ -64,6 +66,7 @@ exports[`AccordionItem should render 1`] = `
     </defaultRenderExpando>
     <div
       className="bx--accordion__content"
+      id="accordion-item-1"
     >
       Lorem ipsum.
     </div>
diff --git a/packages/react/src/internal/__tests__/useId-test.js b/packages/react/src/internal/__tests__/useId-test.js
new file mode 100644
index 000000000000..1e4a1576dc45
--- /dev/null
+++ b/packages/react/src/internal/__tests__/useId-test.js
@@ -0,0 +1,32 @@
+/**
+ * Copyright IBM Corp. 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { render, cleanup } from '@carbon/test-utils/react';
+import React from 'react';
+import { useId } from '../useId';
+
+describe('useId', () => {
+  afterEach(cleanup);
+
+  it('should generate a unique id that is stable across renders', () => {
+    function Test() {
+      const id = useId('test');
+      return <span id={id}>test</span>;
+    }
+
+    const container = document.createElement('div');
+    const getTestId = () => container.firstChild.getAttribute('id');
+
+    render(<Test />, { container });
+
+    const id = getTestId();
+    expect(getTestId()).toBeDefined();
+
+    render(<Test />, { container });
+    expect(id).toBe(getTestId());
+  });
+});
diff --git a/packages/react/src/internal/useId.js b/packages/react/src/internal/useId.js
new file mode 100644
index 000000000000..10bba13133ea
--- /dev/null
+++ b/packages/react/src/internal/useId.js
@@ -0,0 +1,21 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { useRef } from 'react';
+import setupGetInstanceId from '../tools/setupGetInstanceId';
+
+const getId = setupGetInstanceId();
+
+/**
+ * Generate a unique ID with an optional prefix prepended to it
+ * @param {string} [prefix]
+ * @returns {string}
+ */
+export function useId(prefix = 'id') {
+  const ref = useRef(`${prefix}-${getId()}`);
+  return ref.current;
+}

From 87ad9590479f3ed04da000356754d1ff68684068 Mon Sep 17 00:00:00 2001
From: carbon-bot <carbon@us.ibm.com>
Date: Tue, 7 Apr 2020 18:03:47 +0000
Subject: [PATCH 2/2] chore(project): sync generated files

---
 packages/components/docs/sass.md | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/components/docs/sass.md b/packages/components/docs/sass.md
index d8103e6f41a9..191e49aa94cb 100644
--- a/packages/components/docs/sass.md
+++ b/packages/components/docs/sass.md
@@ -18889,8 +18889,9 @@ List box styles
     position: absolute;
     top: 0;
     right: $carbon--spacing-05;
-    bottom: 0;
     height: 100%;
+    display: flex;
+    align-items: center;
     transition: transform $duration--fast-01 motion(standard, productive);
     cursor: pointer;
   }
@@ -19195,6 +19196,25 @@ List box styles
     overflow: hidden;
   }
 
+  // Dropdown top orientation modifiers
+  .#{$prefix}--list-box--up .#{$prefix}--list-box__menu {
+    bottom: 2.5rem;
+  }
+
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--sm
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--sm
+    .#{$prefix}--list-box__menu {
+    bottom: 2rem;
+  }
+
+  .#{$prefix}--list-box--up.#{$prefix}--dropdown--xl
+    .#{$prefix}--list-box__menu,
+  .#{$prefix}--list-box--up.#{$prefix}--list-box--xl
+    .#{$prefix}--list-box__menu {
+    bottom: 3rem;
+  }
+
   // Tweaks for descendants
   // When handling input, we need to target nodes that specifically opt-in to
   // the `combobox` role in order to make sure the text input is styled