[ResourceItem] - Add default accessibility label and remove a11y_shitlist

UNRELEASED.md

@@ -18,6 +18,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Fixed vertical alignment of Tabs disclosure activator ([#2087](https://github.com/Shopify/polaris-react/pull/2087))
 - Fixed `Modal` setting an invalid `id` on `aria-labelledby` when no `title` is set ([#2115](https://github.com/Shopify/polaris-react/pull/2115))
 - Fixed error warnings in `Card` and `RollupActions` tests ([#2125](https://github.com/Shopify/polaris-react/pull/2125))
+- Added default accessibility label from `ResourceItem` ([#2097](https://github.com/Shopify/polaris-react/pull/2097))
 
 ### Documentation
 

locales/de.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} Produkte",
       "Item": {
         "actionsDropdownLabel": "Aktionen für {accessibilityLabel}",
-        "actionsDropdown": "Dropdown-Liste mit Aktionen"
+        "actionsDropdown": "Dropdown-Liste mit Aktionen",
+        "viewItem": "Details anzeigen für {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Aktionen",

locales/en.json

@@ -170,7 +170,8 @@
 
       "Item": {
         "actionsDropdownLabel": "Actions for {accessibilityLabel}",
-        "actionsDropdown": "Actions dropdown"
+        "actionsDropdown": "Actions dropdown",
+        "viewItem": "View details for {itemName}"
       },
 
       "BulkActions": {

locales/es.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} artículos",
       "Item": {
         "actionsDropdownLabel": "Acciones para {accessibilityLabel}",
-        "actionsDropdown": "Menú desplegable de acciones"
+        "actionsDropdown": "Menú desplegable de acciones",
+        "viewItem": "Ver detalles de {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Acciones",

locales/fr.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} articles",
       "Item": {
         "actionsDropdownLabel": "Actions pour {accessibilityLabel}",
-        "actionsDropdown": "Actions de la liste déroulante"
+        "actionsDropdown": "Actions de la liste déroulante",
+        "viewItem": "Afficher les détails de {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Actions",

locales/hi.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} आइटम",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel} के लिए कार्रवाई",
-        "actionsDropdown": "कार्रवाई ड्रॉपडाउन"
+        "actionsDropdown": "कार्रवाई ड्रॉपडाउन",
+        "viewItem": "{itemName} के लिए विवरण देखें"
       },
       "BulkActions": {
         "actionsActivatorLabel": "कार्रवाई",

locales/it.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} articoli",
       "Item": {
         "actionsDropdownLabel": "Azioni per {accessibilityLabel}",
-        "actionsDropdown": "Menu a tendina delle azioni"
+        "actionsDropdown": "Menu a tendina delle azioni",
+        "viewItem": "Visualizza dettagli di {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Azioni",

locales/ja.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength}個のアイテム",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel}のアクション",
-        "actionsDropdown": "アクションドロップダウン"
+        "actionsDropdown": "アクションドロップダウン",
+        "viewItem": "{itemName}の詳細を表示する"
       },
       "BulkActions": {
         "actionsActivatorLabel": "アクション",

locales/ms.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} item",
       "Item": {
         "actionsDropdownLabel": "Tindakan untuk {accessibilityLabel}",
-        "actionsDropdown": "Juntai bawah tindakan"
+        "actionsDropdown": "Juntai bawah tindakan",
+        "viewItem": "Lihat butiran untuk {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Tindakan",

locales/nl.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} artikelen",
       "Item": {
         "actionsDropdownLabel": "Acties voor {accessibilityLabel}",
-        "actionsDropdown": "Vervolgkeuze acties"
+        "actionsDropdown": "Vervolgkeuze acties",
+        "viewItem": "Details weergeven voor {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Acties",

locales/pt-BR.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} itens",
       "Item": {
         "actionsDropdownLabel": "Ações para {accessibilityLabel}",
-        "actionsDropdown": "Menu suspenso Ações"
+        "actionsDropdown": "Menu suspenso Ações",
+        "viewItem": "Visualizar detalhes de {itemName}"
       },
       "BulkActions": {
         "actionsActivatorLabel": "Ações",

locales/zh-CN.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} 件产品",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel}的操作",
-        "actionsDropdown": "操作下拉菜单"
+        "actionsDropdown": "操作下拉菜单",
+        "viewItem": "查看 {itemName} 详细信息"
       },
       "BulkActions": {
         "actionsActivatorLabel": "编辑",

locales/zh-TW.json

@@ -150,7 +150,8 @@
       "ariaLivePlural": "{itemsLength} 件商品",
       "Item": {
         "actionsDropdownLabel": "{accessibilityLabel} 的動作",
-        "actionsDropdown": "動作下拉式選單"
+        "actionsDropdown": "動作下拉式選單",
+        "viewItem": "檢視 {itemName} 的詳細資訊"
       },
       "BulkActions": {
         "actionsActivatorLabel": "動作",

scripts/pa11y.js

@@ -1,9 +1,6 @@
 /* eslint-disable no-console */
 const puppeteer = require('puppeteer');
 const pa11y = require('pa11y');
-const shitlistCheck = require('./pa11y-utilities.js').shitlistCheck;
-
-const shitlist = require('./../a11y_shitlist.json');
 
 const NUMBER_OF_BROWSERS = 5;
 
@@ -106,28 +103,7 @@ async function runPa11y() {
     process.exit(1);
   }
 
-  const {results, remainingIssues} = shitlistCheck(rawResults, shitlist);
-
-  if (remainingIssues) {
-    console.log(
-      `
-========================================================================
-The following items were fixed, and therefore should be removed from the shitlist.
-Please edit the file a11y_shitlist.json to remove them and run these tests again.',
-========================================================================
-`,
-    );
-    remainingIssues.forEach((issue) => {
-      console.log(
-        '------------------------------------------------------------------------',
-      );
-      console.log(issue.exampleID);
-      console.log(
-        '------------------------------------------------------------------------',
-      );
-      console.log(JSON.stringify(issue.issues, null, 2));
-    });
-  }
+  const results = rawResults.filter((result) => result.issues.length);
 
   console.log(
     `
@@ -153,7 +129,7 @@ The following issues were discovered and need to be fixed before this code can b
     console.log('No issues!');
   }
 
-  if (results.length || remainingIssues) {
+  if (results.length) {
     process.exit(1);
   }
   process.exit(0);

src/components/AppProvider/README.md

@@ -46,6 +46,9 @@ AppProvider works by default without any additional options passed to it.
         defaultItemSingular: 'item',
         defaultItemPlural: 'items',
         showing: 'Showing {itemsCount} {resource}',
+        Item: {
+          viewItem: 'View details for {itemName}',
+        },
       },
       Common: {
         checkbox: 'checkbox',
@@ -106,6 +109,9 @@ With an `i18n`, `AppProvider` will provide these translations to polaris compone
         showing: '{itemsCount} {resource} affichés',
         defaultItemPlural: 'articles',
         defaultItemSingular: 'article',
+        Item: {
+          viewItem: "Afficher les détails de l'{itemName}",
+        },
       },
     },
   }}

src/components/ResourceItem/ResourceItem.tsx

@@ -137,7 +137,7 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
       persistActions = false,
       accessibilityLabel,
       name,
-      context: {selectable, selectMode, loading},
+      context: {selectable, selectMode, loading, resourceName},
       i18n,
     } = this.props;
 
@@ -268,10 +268,16 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
 
     const tabIndex = loading ? -1 : 0;
 
+    const ariaLabel =
+      accessibilityLabel ||
+      i18n.translate('Polaris.ResourceList.Item.viewItem', {
+        itemName: name || (resourceName && resourceName.singular) || '',
+      });
+
     const accessibleMarkup = url ? (
       <UnstyledLink
         aria-describedby={this.props.id}
-        aria-label={accessibilityLabel}
+        aria-label={ariaLabel}
         className={styles.Link}
         url={url}
         tabIndex={tabIndex}
@@ -280,7 +286,7 @@ class BaseResourceItem extends React.Component<CombinedProps, State> {
     ) : (
       <button
         className={styles.Button}
-        aria-label={accessibilityLabel}
+        aria-label={ariaLabel}
         aria-controls={ariaControls}
         aria-expanded={ariaExpanded}
         onClick={this.handleClick}