@zendeskgarden/react-buttons 8.59.1 → 8.60.0

package/dist/index.cjs.js

@@ -61,7 +61,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled__default["default"].div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -90,7 +90,7 @@ const StyledIcon = styled__default["default"](_ref => {
   return React__default["default"].cloneElement(React.Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -189,7 +189,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled__default["default"].button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.59.1',
+  'data-garden-version': '8.60.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -202,7 +202,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled__default["default"](StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.59.1',
+  'data-garden-version': '8.60.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -239,7 +239,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled__default["default"](SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -266,7 +266,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled__default["default"](StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -343,6 +343,7 @@ const Anchor = React.forwardRef((_ref, ref) => {
   let {
     children,
     isExternal,
+    externalIconLabel,
     ...otherProps
   } = _ref;
   let anchorProps = otherProps;
@@ -353,14 +354,25 @@ const Anchor = React.forwardRef((_ref, ref) => {
       ...anchorProps
     };
   }
+  const checkProps = isExternal ? {
+    externalIconLabel
+  } : {
+    noIconLabel: 'true'
+  };
+  const iconAriaLabel = reactTheming.useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
   return React__default["default"].createElement(StyledAnchor, _extends$2({
     ref: ref
-  }, anchorProps), children, isExternal && React__default["default"].createElement(StyledExternalIcon, null));
+  }, anchorProps), children, isExternal && React__default["default"].createElement(StyledExternalIcon, {
+    role: "img",
+    "aria-label": iconAriaLabel,
+    "aria-hidden": undefined
+  }));
 });
 Anchor.displayName = 'Anchor';
 Anchor.propTypes = {
   isExternal: PropTypes__default["default"].bool,
-  isDanger: PropTypes__default["default"].bool
+  isDanger: PropTypes__default["default"].bool,
+  externalIconLabel: PropTypes__default["default"].string
 };
 
 const ButtonGroup = React.forwardRef((_ref, ref) => {

package/dist/index.esm.js

@@ -9,7 +9,7 @@ import * as React from 'react';
 import React__default, { Children, createContext, useContext, forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
-import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, useText } from '@zendeskgarden/react-theming';
 import { rgba, math, em } from 'polished';
 import { useButtonGroup } from '@zendeskgarden/container-buttongroup';
 
@@ -33,7 +33,7 @@ const SIZE = ['small', 'medium', 'large'];
 const COMPONENT_ID$5 = 'buttons.button_group_view';
 const StyledButtonGroup = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledButtonGroup",
   componentId: "sc-1fbpzef-0"
@@ -62,7 +62,7 @@ const StyledIcon = styled(_ref => {
   return React__default.cloneElement(Children.only(children), props);
 }).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledIcon",
   componentId: "sc-19meqgg-0"
@@ -161,7 +161,7 @@ const sizeStyles = props => {
 };
 const StyledButton = styled.button.attrs(props => ({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.59.1',
+  'data-garden-version': '8.60.0',
   type: props.type || 'button'
 })).withConfig({
   displayName: "StyledButton",
@@ -174,7 +174,7 @@ StyledButton.defaultProps = {
 const COMPONENT_ID$2 = 'buttons.anchor';
 const StyledAnchor = styled(StyledButton).attrs(props => ({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.59.1',
+  'data-garden-version': '8.60.0',
   as: 'a',
   dir: props.theme.rtl ? 'rtl' : undefined,
   isLink: true,
@@ -211,7 +211,7 @@ var SvgNewWindowStroke = function SvgNewWindowStroke(props) {
 const COMPONENT_ID$1 = 'buttons.external_icon';
 const StyledExternalIcon = styled(SvgNewWindowStroke).attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledExternalIcon",
   componentId: "sc-16oz07e-0"
@@ -238,7 +238,7 @@ const iconStyles = props => {
 };
 const StyledIconButton = styled(StyledButton).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.59.1'
+  'data-garden-version': '8.60.0'
 }).withConfig({
   displayName: "StyledIconButton",
   componentId: "sc-1t0ughp-0"
@@ -315,6 +315,7 @@ const Anchor = forwardRef((_ref, ref) => {
   let {
     children,
     isExternal,
+    externalIconLabel,
     ...otherProps
   } = _ref;
   let anchorProps = otherProps;
@@ -325,14 +326,25 @@ const Anchor = forwardRef((_ref, ref) => {
       ...anchorProps
     };
   }
+  const checkProps = isExternal ? {
+    externalIconLabel
+  } : {
+    noIconLabel: 'true'
+  };
+  const iconAriaLabel = useText(Anchor, checkProps, isExternal ? 'externalIconLabel' : 'noIconLabel', '(opens in a new tab)');
   return React__default.createElement(StyledAnchor, _extends$2({
     ref: ref
-  }, anchorProps), children, isExternal && React__default.createElement(StyledExternalIcon, null));
+  }, anchorProps), children, isExternal && React__default.createElement(StyledExternalIcon, {
+    role: "img",
+    "aria-label": iconAriaLabel,
+    "aria-hidden": undefined
+  }));
 });
 Anchor.displayName = 'Anchor';
 Anchor.propTypes = {
   isExternal: PropTypes.bool,
-  isDanger: PropTypes.bool
+  isDanger: PropTypes.bool,
+  externalIconLabel: PropTypes.string
 };
 
 const ButtonGroup = forwardRef((_ref, ref) => {

package/dist/typings/types/index.d.ts

@@ -50,6 +50,11 @@ export interface IAnchorProps extends Pick<IButtonProps, 'isDanger'>, AnchorHTML
      * safe [cross-origin destination link](https://web.dev/external-anchors-use-rel-noopener/).
      **/
     isExternal?: boolean;
+    /**
+     * Allows a customized/translated text label to be passed to the external link icon,
+     * making that icon accessible to assistive technology
+     **/
+    externalIconLabel?: string;
 }
 export interface IButtonGroupProps extends HTMLAttributes<HTMLDivElement> {
     /** Defines the currently selected button in the group */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-buttons",
-  "version": "8.59.1",
+  "version": "8.60.0",
   "description": "Components relating to buttons in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -33,7 +33,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.59.1",
+    "@zendeskgarden/react-theming": "^8.60.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -46,5 +46,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "023c569e38e4d97264ef871bf7a9aa8b0d16b0aa"
+  "gitHead": "8adf13e61f58a64a0ba06794c0362f665e846fe9"
 }