Merge branch 'develop' into AC-2498

README.md

@@ -22,8 +22,11 @@ Here, you can learn PWA Studio concepts, find API reference docs, and read tutor
 Here are some popular topics to help you get started:
 
 - [PWA Studio Overview][] - A high level overview of PWA Studio and what it provides to developers
+- [PWA Studio Beginner Guide](https://www.youtube.com/watch?v=n8C87KQT-Bg)
 - [Tools and libraries][] - A list of tools and libraries developers need to be familiar with to use PWA Studio
 - [PWA Studio fundamentals][] - A series of tutorials covering common storefront development tasks
+- [PWA Studio best Practices](https://developer.adobe.com/commerce/pwa-studio/guides/best-practices/)
+
 
 ### Venia
 

packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap

@@ -13,6 +13,7 @@ Object {
   "error": undefined,
   "guestSignInUsername": "",
   "handlePlaceOrder": [Function],
+  "handlePlaceOrderEnterKeyPress": [Function],
   "handleReviewOrder": [Function],
   "handleReviewOrderEnterKeyPress": [Function],
   "hasError": false,

packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js

@@ -40,6 +40,7 @@ export const CHECKOUT_STEP = {
  *  customer: Object,
  *  error: ApolloError,
  *  handlePlaceOrder: Function,
+ *  handlePlaceOrderEnterKeyPress: Function,
  *  hasError: Boolean,
  *  isCartEmpty: Boolean,
  *  isGuestCheckout: Boolean,
@@ -250,6 +251,14 @@ export const useCheckoutPage = (props = {}) => {
         setIsPlacingOrder(true);
     }, [cartId, getOrderDetails]);
 
+    const handlePlaceOrderEnterKeyPress = useCallback(() => {
+        event => {
+            if (event.key === 'Enter') {
+                handlePlaceOrder();
+            }
+        };
+    }, [handlePlaceOrder]);
+
     const [, { dispatch }] = useEventingContext();
 
     // Go back to checkout if shopper logs in
@@ -386,6 +395,7 @@ export const useCheckoutPage = (props = {}) => {
         error: checkoutError,
         guestSignInUsername,
         handlePlaceOrder,
+        handlePlaceOrderEnterKeyPress,
         hasError: !!checkoutError,
         isCartEmpty: !(checkoutData && checkoutData?.cart?.total_quantity),
         isGuestCheckout: !isSignedIn,

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/CheckoutPage/checkoutPage.js

@@ -52,6 +52,7 @@ const CheckoutPage = props => {
         error,
         guestSignInUsername,
         handlePlaceOrder,
+        handlePlaceOrderEnterKeyPress,
         hasError,
         isCartEmpty,
         isGuestCheckout,
@@ -272,6 +273,7 @@ const CheckoutPage = props => {
             checkoutStep === CHECKOUT_STEP.REVIEW ? (
                 <Button
                     onClick={handlePlaceOrder}
+                    onKeyDown={handlePlaceOrderEnterKeyPress}
                     priority="high"
                     className={classes.place_order_button}
                     data-cy="CheckoutPage-placeOrderButton"

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