From 2afd383ac2ccce134f4fff23b09b4789114324a3 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 19 Sep 2024 16:16:13 -0700 Subject: [PATCH 1/5] fix(action): create localized template for aria-label #9071 --- packages/calcite-components/src/components/action/action.tsx | 5 +---- .../src/components/action/assets/action/t9n/messages.json | 3 ++- .../src/components/action/assets/action/t9n/messages_en.json | 3 ++- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 436c1adfdb6..88e32365e30 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -298,10 +298,7 @@ export class Action buttonId, messages, } = this; - const labelFallback = label || text; - const ariaLabel = labelFallback - ? `${labelFallback}${indicator ? ` (${messages.indicator})` : ""}` - : ""; + const ariaLabel = messages.indicatorLabel?.replace("{label}", label || text) ?? ""; const buttonClasses = { [CSS.button]: true, diff --git a/packages/calcite-components/src/components/action/assets/action/t9n/messages.json b/packages/calcite-components/src/components/action/assets/action/t9n/messages.json index 7b1107df302..367544c3ba1 100644 --- a/packages/calcite-components/src/components/action/assets/action/t9n/messages.json +++ b/packages/calcite-components/src/components/action/assets/action/t9n/messages.json @@ -1,4 +1,5 @@ { "loading": "Loading", - "indicator": "Indicator present" + "indicator": "Indicator present", + "indicatorLabel": "{text} (Indicator present)" } diff --git a/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json b/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json index 7b1107df302..367544c3ba1 100644 --- a/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json +++ b/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json @@ -1,4 +1,5 @@ { "loading": "Loading", - "indicator": "Indicator present" + "indicator": "Indicator present", + "indicatorLabel": "{text} (Indicator present)" } From 383b6e34bddce23cd8e6270abe17aeb312544b0a Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Thu, 19 Sep 2024 16:17:14 -0700 Subject: [PATCH 2/5] fix substitution --- .../src/components/action/assets/action/t9n/messages.json | 2 +- .../src/components/action/assets/action/t9n/messages_en.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/action/assets/action/t9n/messages.json b/packages/calcite-components/src/components/action/assets/action/t9n/messages.json index 367544c3ba1..0427d1ab686 100644 --- a/packages/calcite-components/src/components/action/assets/action/t9n/messages.json +++ b/packages/calcite-components/src/components/action/assets/action/t9n/messages.json @@ -1,5 +1,5 @@ { "loading": "Loading", "indicator": "Indicator present", - "indicatorLabel": "{text} (Indicator present)" + "indicatorLabel": "{label} (Indicator present)" } diff --git a/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json b/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json index 367544c3ba1..0427d1ab686 100644 --- a/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json +++ b/packages/calcite-components/src/components/action/assets/action/t9n/messages_en.json @@ -1,5 +1,5 @@ { "loading": "Loading", "indicator": "Indicator present", - "indicatorLabel": "{text} (Indicator present)" + "indicatorLabel": "{label} (Indicator present)" } From 7b5e9a0e718291bf7d252ef9d7ccb6a00f56a031 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 20 Sep 2024 08:40:21 -0700 Subject: [PATCH 3/5] fix string --- packages/calcite-components/src/components/action/action.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 88e32365e30..6187c2b66d9 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -298,7 +298,10 @@ export class Action buttonId, messages, } = this; - const ariaLabel = messages.indicatorLabel?.replace("{label}", label || text) ?? ""; + const labelFallback = label || text; + const ariaLabel = indicator + ? messages.indicatorLabel?.replace("{label}", labelFallback) + : labelFallback; const buttonClasses = { [CSS.button]: true, From ecf1cd383701b26e43ccb503a33f9a7234c6da9e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 20 Sep 2024 08:42:23 -0700 Subject: [PATCH 4/5] cleanup --- packages/calcite-components/src/components/action/action.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 6187c2b66d9..2b6341c056d 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -298,7 +298,7 @@ export class Action buttonId, messages, } = this; - const labelFallback = label || text; + const labelFallback = label || text || ""; const ariaLabel = indicator ? messages.indicatorLabel?.replace("{label}", labelFallback) : labelFallback; From d48eaa4d6ac6e90a22c69ed1fa910d04f01c6175 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 20 Sep 2024 12:05:59 -0700 Subject: [PATCH 5/5] revert code changes --- .../calcite-components/src/components/action/action.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/calcite-components/src/components/action/action.tsx b/packages/calcite-components/src/components/action/action.tsx index 2b6341c056d..436c1adfdb6 100644 --- a/packages/calcite-components/src/components/action/action.tsx +++ b/packages/calcite-components/src/components/action/action.tsx @@ -298,10 +298,10 @@ export class Action buttonId, messages, } = this; - const labelFallback = label || text || ""; - const ariaLabel = indicator - ? messages.indicatorLabel?.replace("{label}", labelFallback) - : labelFallback; + const labelFallback = label || text; + const ariaLabel = labelFallback + ? `${labelFallback}${indicator ? ` (${messages.indicator})` : ""}` + : ""; const buttonClasses = { [CSS.button]: true,