AC-2487::Accordions do not indicate current state

packages/venia-ui/i18n/en_US.json

@@ -184,6 +184,7 @@
     "filterModal.item.clearFilter": "Remove filter \"{optionName}\".",
     "filterModal.item.hideOptions": "Hide \"{itemName}\" filter item options.",
     "filterModal.item.showOptions": "Show \"{itemName}\" filter item options.",
+    "filterModalOpenButton.ariaLabel": "Filter Button for Filter Options.",
     "filterSearch.name": "Enter a {name}",
     "footer.calloutText": "Lorem ipsum dolor sit amet, consectetur adipsicing elit, sed do eiusmod tempor incididunt ut labore et dolore.",
     "footer.followText": "Follow Us!",
@@ -373,6 +374,8 @@
     "productQuantity.label": "product's quantity",
     "productSort.sortByButton": "Sort by",
     "productSort.sortButton": "Sort",
+    "productSort.sortButtonCollapsed": "Sort Button Collapsed",
+    "productSort.sortButtonExpanded": "Sort Button Expanded",
     "quantity.buttonDecrement": "Decrease Quantity",
     "quantity.buttonIncrement": "Increase Quantity",
     "quantity.input": "Item Quantity",

packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { shape, string, array } from 'prop-types';
-import { FormattedMessage } from 'react-intl';
+import { FormattedMessage, useIntl } from 'react-intl';
 import Button from '../Button';
 import { useStyle } from '../../classify';
 import defaultClasses from './filterModalOpenButton.module.css';
@@ -10,7 +10,12 @@ const FilterModalOpenButton = props => {
     const { filters, classes: propsClasses } = props;
     const classes = useStyle(defaultClasses, propsClasses);
     const { handleOpen } = useFilterModal({ filters });
-
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            handleOpen;
+        }
+    };
+    const { formatMessage } = useIntl();
     return (
         <Button
             priority={'low'}
@@ -19,9 +24,14 @@ const FilterModalOpenButton = props => {
             }}
             data-cy="FilterModalOpenButton-button"
             onClick={handleOpen}
+            onKeyDown={handleKeypress}
             type="button"
             aria-live="polite"
             aria-busy="false"
+            aria-label={formatMessage({
+                id: 'filterModalOpenButton.ariaLabel',
+                defaultMessage: 'Filter Button for Filter Options'
+            })}
         >
             <FormattedMessage
                 id={'productList.filter'}

packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap

@@ -127,6 +127,7 @@ exports[`it does not render order details if loading is true 1`] = `
     />
   </div>
   <button
+    aria-expanded={false}
     className="contentToggleContainer"
     onClick={[MockFunction handleContentToggle]}
     type="button"
@@ -285,6 +286,7 @@ exports[`it renders collapsed order row 1`] = `
     />
   </div>
   <button
+    aria-expanded={false}
     className="contentToggleContainer"
     onClick={[MockFunction handleContentToggle]}
     type="button"
@@ -571,6 +573,7 @@ exports[`it renders open order row 1`] = `
     />
   </div>
   <button
+    aria-expanded={true}
     className="contentToggleContainer"
     onClick={[MockFunction handleContentToggle]}
     type="button"
@@ -867,6 +870,7 @@ exports[`it renders with missing order information 1`] = `
     />
   </div>
   <button
+    aria-expanded={false}
     className="contentToggleContainer"
     onClick={[MockFunction]}
     type="button"

packages/venia-ui/lib/components/OrderHistoryPage/orderRow.js

@@ -131,6 +131,7 @@ const OrderRow = props => {
                 className={classes.contentToggleContainer}
                 onClick={handleContentToggle}
                 type="button"
+                aria-expanded={isOpen}
             >
                 {contentToggleIcon}
             </button>

packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap

@@ -5,6 +5,7 @@ exports[`renders correctly 1`] = `
   aria-busy="false"
 >
   <button
+    aria-label="Sort Button Collapsed"
     disabled={false}
     onClick={[Function]}
     onDragStart={[Function]}

packages/venia-ui/lib/components/ProductSort/productSort.js

@@ -157,6 +157,21 @@ const ProductSort = props => {
         setExpanded(!expanded);
     };
 
+    const handleKeypress = e => {
+        if (e.code == 'Enter') {
+            setExpanded(expanded);
+        }
+    };
+    const result = expanded
+        ? formatMessage({
+              id: 'productSort.sortButtonExpanded',
+              defaultMessage: 'Sort Button Expanded'
+          })
+        : formatMessage({
+              id: 'productSort.sortButtonCollapsed',
+              defaultMessage: 'Sort Button Collapsed'
+          });
+
     return (
         <div
             ref={elementRef}
@@ -171,6 +186,8 @@ const ProductSort = props => {
                 }}
                 onClick={handleSortClick}
                 data-cy="ProductSort-sortButton"
+                onKeyDown={handleKeypress}
+                aria-label={result}
             >
                 <span className={classes.mobileText}>
                     <FormattedMessage