From 56c96818c120b9d2986af681e4c58ea1acba272d Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Wed, 16 Nov 2022 02:54:10 +0530
Subject: [PATCH 1/3] AC-2487::Accordions do not indicate current state (#3977)

* AC-2487::Accordions do not indicate current state

* AC-2487::fixed failing test cases

* AC-2487::fixed failing test cases

* AC-2487::run prettier command for filterModalOpenButton.js

* AC-2487::added translation as suggested

* AC-2487::fixed failing test case

* AC-2487::worked on failing test cases

* AC-2487::worked on failing test cases
---
 packages/venia-ui/i18n/en_US.json               |  3 +++
 .../filterModalOpenButton.js                    | 14 ++++++++++++--
 .../__snapshots__/orderRow.spec.js.snap         |  4 ++++
 .../lib/components/OrderHistoryPage/orderRow.js |  1 +
 .../__snapshots__/productSort.spec.js.snap      |  1 +
 .../lib/components/ProductSort/productSort.js   | 17 +++++++++++++++++
 6 files changed, 38 insertions(+), 2 deletions(-)

diff --git a/packages/venia-ui/i18n/en_US.json b/packages/venia-ui/i18n/en_US.json
index b21dec20a7..4db67d96c8 100644
--- a/packages/venia-ui/i18n/en_US.json
+++ b/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",
diff --git a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js b/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
index f42237c61a..be645baacf 100644
--- a/packages/venia-ui/lib/components/FilterModalOpenButton/filterModalOpenButton.js
+++ b/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'}
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap b/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap
index 5e7afe1475..76dc9241c4 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/__tests__/__snapshots__/orderRow.spec.js.snap
+++ b/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"
diff --git a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.js b/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.js
index 50bc58dc1c..93df587f34 100644
--- a/packages/venia-ui/lib/components/OrderHistoryPage/orderRow.js
+++ b/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>
diff --git a/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap b/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap
index 9f766d280e..f30825021a 100644
--- a/packages/venia-ui/lib/components/ProductSort/__tests__/__snapshots__/productSort.spec.js.snap
+++ b/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]}
diff --git a/packages/venia-ui/lib/components/ProductSort/productSort.js b/packages/venia-ui/lib/components/ProductSort/productSort.js
index a248fe0660..ba4c7e8261 100644
--- a/packages/venia-ui/lib/components/ProductSort/productSort.js
+++ b/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

From a128fbc68793bb9f001de4dd1fcaaa8e1f066aa0 Mon Sep 17 00:00:00 2001
From: Aanchal Pawar <97873570+glo82145@users.noreply.github.com>
Date: Wed, 16 Nov 2022 20:30:50 +0530
Subject: [PATCH 2/3] AC-6679::The button is not usable by keyboard (#3980)

* AC-6679::The button is not usable by keyboard

* revert test change

Co-authored-by: James Calcaben <jcalcaben@users.noreply.github.com>
Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
---
 .../__snapshots__/useCheckoutPage.spec.js.snap         |  1 +
 .../lib/talons/CheckoutPage/useCheckoutPage.js         | 10 ++++++++++
 .../lib/components/CheckoutPage/checkoutPage.js        |  2 ++
 3 files changed, 13 insertions(+)

diff --git a/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap b/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
index f209f578f6..df9b26fcf9 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/__tests__/__snapshots__/useCheckoutPage.spec.js.snap
+++ b/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,
diff --git a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js b/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
index 617249044b..e084d05794 100644
--- a/packages/peregrine/lib/talons/CheckoutPage/useCheckoutPage.js
+++ b/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,
diff --git a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js b/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
index 15d43d07f5..cb319f4d5f 100644
--- a/packages/venia-ui/lib/components/CheckoutPage/checkoutPage.js
+++ b/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"

From 60c3e8e730d0048a1e57f441880a132670af8693 Mon Sep 17 00:00:00 2001
From: Olena Tkacheva <otkacheva@magento.com>
Date: Wed, 16 Nov 2022 09:43:59 -0600
Subject: [PATCH 3/3] Update README.md (#4006)

Co-authored-by: Anthoula Wojczak <awojczak@adobe.com>
Co-authored-by: Devagouda <40405790+dpatil-magento@users.noreply.github.com>
---
 README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/README.md b/README.md
index 337a3a34fb..2abe9b542c 100644
--- a/README.md
+++ b/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