From 7e9d781b9b44171d129a4af3726146f03864a0fc Mon Sep 17 00:00:00 2001
From: Daniel Leroux <daniel.leroux@shopify.com>
Date: Thu, 15 Aug 2019 09:01:01 -0400
Subject: [PATCH] making list item accessible

---
 UNRELEASED.md                                 |  2 ++
 a11y_shitlist.json                            | 36 -------------------
 src/components/ResourceList/README.md         | 16 +++++++--
 .../ResourceList/components/Item/Item.tsx     |  2 +-
 4 files changed, 17 insertions(+), 39 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 23ab1bc94ac..fc07581c421 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -48,10 +48,12 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Updated translation.yml with the new locales path ([#1649](https://github.com/Shopify/polaris-react/pull/1649))
 - Fixed accessibility issue with `Tabs` list item presentation role ([#1958](https://github.com/Shopify/polaris-react/pull/1958))
 - Removed `Tooltip` on disabled `Pagination` buttons ([#1963](https://github.com/Shopify/polaris-react/pull/1963))
+- Fixed accessibility labels on `ResourceList.Item` persistent action disclosure icon ([#1973](https://github.com/Shopify/polaris-react/pull/1973))
 
 ### Documentation
 
 - Updated `AppProvider` app bridge example to use our `AppBridgeContext`([#1877](https://github.com/Shopify/polaris-react/pull/1877))
+- Updated example for the `ResourceList.Item` persistent actions accessibility labels ([#1973](https://github.com/Shopify/polaris-react/pull/1973))
 
 ### Development workflow
 
diff --git a/a11y_shitlist.json b/a11y_shitlist.json
index 471058b69c9..abf62758fcb 100644
--- a/a11y_shitlist.json
+++ b/a11y_shitlist.json
@@ -77,24 +77,6 @@
       "selector": "#Popover1 > div > div > ul > li:nth-child(5) > div > button"
     }
   ],
-  "all-components-resource-list--resource-list-with-persistent-item-shortcut-actions": [
-    {
-      "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Button.Name",
-      "context": "<button type=\"button\" class=\"Button-Button_2pL_i Button-plain_RU0pa Button-iconOnly_2ZPSS\" tabindex=\"0\" aria-controls=\"Popover1\" aria-owns=\"Popover1\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"Button-Content_2iX...</button>",
-      "message": "This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.",
-      "type": "error",
-      "typeCode": 1,
-      "selector": "#341 > div:nth-child(4) > div > button"
-    },
-    {
-      "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Button.Name",
-      "context": "<button type=\"button\" class=\"Button-Button_2pL_i Button-plain_RU0pa Button-iconOnly_2ZPSS\" tabindex=\"0\" aria-controls=\"Popover2\" aria-owns=\"Popover2\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"Button-Content_2iX...</button>",
-      "message": "This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.",
-      "type": "error",
-      "typeCode": 1,
-      "selector": "#256 > div:nth-child(4) > div > button"
-    }
-  ],
   "all-components-resource-list--resource-list-with-filtering": [
     {
       "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.A.NoContent",
@@ -112,23 +94,5 @@
       "typeCode": 1,
       "selector": "#ResourceListItemOverlay2"
     }
-  ],
-  "all-components-resource-list--resource-list-with-all-of-its-elements": [
-    {
-      "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Button.Name",
-      "context": "<button type=\"button\" class=\"Button-Button_2pL_i Button-plain_RU0pa Button-iconOnly_2ZPSS\" tabindex=\"0\" aria-controls=\"Popover2\" aria-owns=\"Popover2\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"Button-Content_2iX...</button>",
-      "message": "This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.",
-      "type": "error",
-      "typeCode": 1,
-      "selector": "#341 > div:nth-child(4) > div > button"
-    },
-    {
-      "code": "WCAG2AA.Principle4.Guideline4_1.4_1_2.H91.Button.Name",
-      "context": "<button type=\"button\" class=\"Button-Button_2pL_i Button-plain_RU0pa Button-iconOnly_2ZPSS\" tabindex=\"0\" aria-controls=\"Popover3\" aria-owns=\"Popover3\" aria-haspopup=\"true\" aria-expanded=\"false\"><span class=\"Button-Content_2iX...</button>",
-      "message": "This button element does not have a name available to an accessibility API. Valid names are: title undefined, element content, aria-label undefined, aria-labelledby undefined.",
-      "type": "error",
-      "typeCode": 1,
-      "selector": "#256 > div:nth-child(4) > div > button"
-    }
   ]
 }
diff --git a/src/components/ResourceList/README.md b/src/components/ResourceList/README.md
index 6c47abba37d..c282ecffee4 100644
--- a/src/components/ResourceList/README.md
+++ b/src/components/ResourceList/README.md
@@ -614,7 +614,13 @@ Shortcut actions are intended to provide quick access to popular actions from th
       const {id, url, name, location, latestOrderUrl} = item;
       const media = <Avatar customer size="medium" name={name} />;
       const shortcutActions = latestOrderUrl
-        ? [{content: 'View latest order', url: latestOrderUrl}]
+        ? [
+            {
+              content: 'View latest order',
+              accessibilityLabel: `View ${name}'s latest order`,
+              url: latestOrderUrl,
+            },
+          ]
         : null;
 
       return (
@@ -664,7 +670,13 @@ Use persistent shortcut actions in rare cases when the action cannot be made ava
       const {id, url, name, location, latestOrderUrl} = item;
       const media = <Avatar customer size="medium" name={name} />;
       const shortcutActions = latestOrderUrl
-        ? [{content: 'View latest order', url: latestOrderUrl}]
+        ? [
+            {
+              content: 'View latest order',
+              accessibilityLabel: `View ${name}'s latest order`,
+              url: latestOrderUrl,
+            },
+          ]
         : null;
 
       return (
diff --git a/src/components/ResourceList/components/Item/Item.tsx b/src/components/ResourceList/components/Item/Item.tsx
index 21297f23f60..f5fafae282f 100644
--- a/src/components/ResourceList/components/Item/Item.tsx
+++ b/src/components/ResourceList/components/Item/Item.tsx
@@ -217,7 +217,7 @@ export class BaseItem extends React.Component<CombinedProps, State> {
             <Popover
               activator={
                 <Button
-                  aria-label={intl.translate(
+                  accessibilityLabel={intl.translate(
                     'Polaris.ResourceList.Item.actionsDropdown',
                   )}
                   onClick={this.handleActionsClick}