removing focus ring on click

update unrelease.md

UNRELEASED.md

@@ -13,6 +13,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - `IndexTable` Remove parent resource name from bulk select action ([#4013](https://github.com/Shopify/polaris-react/pull/4013))
 - Ensured `@charset` declaration is the first thing in our styles.css file ([#4019](https://github.com/Shopify/polaris-react/pull/4019))
 - Fix `Modal.Section` divider color to match header and footer divider ([#4021](https://github.com/Shopify/polaris-react/pull/4021))
+- Remove focus ring on click for ActionList ([#4034](https://github.com/Shopify/polaris-react/pull/4034))
 
 ### Documentation
 

src/components/ActionList/ActionList.scss

@@ -137,6 +137,11 @@ $item-vertical-padding: ($item-min-height - line-height(body)) / 2;
   margin-left: spacing();
 }
 
+.ContentBlock,
+.ContentBlock span {
+  display: block;
+}
+
 .Text {
   @include layout-flex-fix;
   flex: 1 1 auto;

src/components/ActionList/components/Item/Item.tsx

@@ -8,6 +8,7 @@ import {UnstyledLink} from '../../../UnstyledLink';
 import {Badge} from '../../../Badge';
 import {TextStyle} from '../../../TextStyle';
 import styles from '../../ActionList.scss';
+import {handleMouseUpByBlurring} from '../../../../utilities/focus';
 
 export type ItemProps = ActionListItemDescriptor;
 
@@ -40,30 +41,30 @@ export function Item({
   let prefixMarkup: React.ReactNode | null = null;
 
   if (prefix) {
-    prefixMarkup = <div className={styles.Prefix}>{prefix}</div>;
+    prefixMarkup = <span className={styles.Prefix}>{prefix}</span>;
   } else if (icon) {
     prefixMarkup = (
-      <div className={styles.Prefix}>
+      <span className={styles.Prefix}>
         <Icon source={icon} />
-      </div>
+      </span>
     );
   } else if (image) {
     prefixMarkup = (
-      <div
+      <span
         role="presentation"
         className={styles.Prefix}
         style={{backgroundImage: `url(${image}`}}
-      />
+      ></span>
     );
   }
 
   const contentText = ellipsis && content ? `${content}…` : content;
 
   const contentMarkup = helpText ? (
-    <div>
-      <div>{contentText}</div>
+    <span className={styles.ContentBlock}>
+      <span>{contentText}</span>
       <TextStyle variation="subdued">{helpText}</TextStyle>
-    </div>
+    </span>
   ) : (
     contentText
   );
@@ -78,15 +79,15 @@ export function Item({
     <span className={styles.Suffix}>{suffix}</span>
   );
 
-  const textMarkup = <div className={styles.Text}>{contentMarkup}</div>;
+  const textMarkup = <span className={styles.Text}>{contentMarkup}</span>;
 
   const contentElement = (
-    <div className={styles.Content}>
+    <span className={styles.Content}>
       {prefixMarkup}
       {textMarkup}
       {badgeMarkup}
       {suffixMarkup}
-    </div>
+    </span>
   );
 
   const scrollMarkup = active ? <Scrollable.ScrollTo /> : null;
@@ -110,6 +111,7 @@ export function Item({
       disabled={disabled}
       aria-label={accessibilityLabel}
       onClick={onAction}
+      onMouseUp={handleMouseUpByBlurring}
     >
       {contentElement}
     </button>