Warning on buttons with icons

Polaris
1

Hello,

Considering the following HTML:

<s-button href="#" target="_blank" icon="smiley-sad" variant="secondary">Hello</s-button>

Polaris will complain will the following warning (the accessibilityLabel is not needed here as ti is not an icon-only button):

The icon-only button with icon=“smiley-sad” must also have an “accessibilityLabel” property.

Thanks!

2

If you’re using raw HTML, then yeah; we’re aware that our warnings are not quite working correctly for raw HTML. This will apply to the majority of our warnings.

4

I’m using it in React :).

5

My React app is also showing this warning on an icon-and-text button.

I haven’t done a full MWE for this in React, but it looks like applying this diff to the React Router template app.tsx file should get you a minimal app that shows the incorrect warning:

diff --git a/app/routes/app.tsx b/app/routes/app.tsx
index 338e74b..a2af7b9 100644
--- a/app/routes/app.tsx
+++ b/app/routes/app.tsx
@@ -17,11 +17,7 @@ export default function App() {
 
   return (
     <AppProvider embedded apiKey={apiKey}>
-      <s-app-nav>
-        <s-link href="/app">Home</s-link>
-        <s-link href="/app/additional">Additional page</s-link>
-      </s-app-nav>
-      <Outlet />
+      <s-button icon="edit">Edit</s-button>
     </AppProvider>
   );
 }

The HTML example in the docs, “Add an icon alongside a text label”, also reproduces the problem :slightly_smiling_face: