Merge branch 'master' into 5815-warning-inner-fill-progress-indicator

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

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>
   );
 }

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>

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>

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());
+  });
+});

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;
+}