carbon-react 129.0.0 → 131.0.0

package/esm/components/fieldset/fieldset.component.d.ts

@@ -1,11 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface FieldsetProps extends MarginProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** Child elements */
     children?: React.ReactNode;
-    /** The text for the fieldsets legend element. */
+    /** The text for the fieldset's legend element. */
     legend?: string;
     /** Flag to configure fields as mandatory. */
     required?: boolean;
@@ -13,7 +11,7 @@ export interface FieldsetProps extends MarginProps {
     isOptional?: boolean;
 }
 export declare const Fieldset: {
-    ({ children, inline, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
     displayName: string;
 };
 export default Fieldset;

package/esm/components/fieldset/fieldset.component.js

@@ -2,30 +2,18 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 import React, { useState, useEffect } from "react";
 import PropTypes from "prop-types";
 import tagComponent from "../../__internal__/utils/helpers/tags/tags";
-import { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle } from "./fieldset.style";
+import { FieldsetStyle, StyledLegend } from "./fieldset.style";
 import { NewValidationContext } from "../carbon-provider/carbon-provider.component";
 import FormSpacingProvider from "../../__internal__/form-spacing-provider";
 import useFormSpacing from "../../hooks/__internal__/useFormSpacing";
 export const Fieldset = ({
   children,
-  inline = false,
   legend,
   required,
   isOptional,
   ...rest
 }) => {
   const [ref, setRef] = useState(null);
-  const getLegend = () => {
-    if (!legend) return null;
-    return /*#__PURE__*/React.createElement(LegendContainerStyle, {
-      isRequired: required,
-      isOptional: isOptional,
-      inline: inline,
-      "data-component": "legend-style"
-    }, /*#__PURE__*/React.createElement("legend", {
-      "data-element": "legend"
-    }, legend));
-  };
   const marginProps = useFormSpacing(rest);
   useEffect(() => {
     if (ref && required) {
@@ -40,12 +28,13 @@ export const Fieldset = ({
     }
   }, /*#__PURE__*/React.createElement(FieldsetStyle, _extends({
     ref: setRef
-  }, tagComponent("fieldset", rest), rest, marginProps), /*#__PURE__*/React.createElement(FieldsetContentStyle, {
-    "data-component": "fieldset-style",
-    inline: inline
-  }, getLegend(), /*#__PURE__*/React.createElement(FormSpacingProvider, {
+  }, tagComponent("fieldset", rest), rest, marginProps), legend && /*#__PURE__*/React.createElement(StyledLegend, {
+    "data-element": "legend",
+    isRequired: required,
+    isOptional: isOptional
+  }, legend), /*#__PURE__*/React.createElement(FormSpacingProvider, {
     marginBottom: undefined
-  }, children))));
+  }, children)));
 };
 Fieldset.displayName = "Fieldset";
 export default Fieldset;

package/esm/components/fieldset/fieldset.style.d.ts

@@ -1,12 +1,9 @@
 export interface StyledFieldsetProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** Flag to configure fields as mandatory. */
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
 }
 declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-declare const LegendContainerStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-declare const FieldsetContentStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };
+declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledFieldsetProps, never>;
+export { FieldsetStyle, StyledLegend };

package/esm/components/fieldset/fieldset.style.js

@@ -1,8 +1,6 @@
 import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import FormFieldStyle from "../../__internal__/form-field/form-field.style";
-import ValidationIconStyle from "../../__internal__/validations/validation-icon.style";
-import StyledIcon from "../icon/icon.style";
 import baseTheme from "../../style/themes/base";
 import CheckboxStyle from "../checkbox/checkbox.style";
 const FieldsetStyle = styled.fieldset`
@@ -24,58 +22,40 @@ const FieldsetStyle = styled.fieldset`
 FieldsetStyle.defaultProps = {
   theme: baseTheme
 };
-const LegendContainerStyle = styled.div`
-  ${({
-  inline
-}) => inline && `
-  margin-right: 32px;
-  height: 34px !important;
-  `}
+const StyledLegend = styled.legend`
   display: flex;
   align-items: center;
   margin-bottom: 32px;
+  font-size: 20px;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
+  line-height: 24px;
+  margin-right: 4px;
 
-  legend {
-    font-size: 20px;
-    font-weight: var(--fontWeights700);
-    color: var(--colorsUtilityYin090);
-    line-height: 24px;
-    margin-right: 4px;
-
-    ${({
+  ${({
   isRequired
 }) => isRequired && css`
-        ::after {
-          content: "*";
-          line-height: 24px;
-          color: var(--colorsSemanticNegative500);
-          font-weight: var(--fontWeights700);
-          margin-left: var(--spacing100);
-          position: relative;
-          top: 1px;
-          left: -4px;
-        }
-      `}
+      ::after {
+        content: "*";
+        line-height: 24px;
+        color: var(--colorsSemanticNegative500);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing100);
+        position: relative;
+        top: 1px;
+        left: -4px;
+      }
+    `}
 
-    ${({
+  ${({
   isOptional
 }) => isOptional && css`
-        ::after {
-          content: "(optional)";
-          color: var(--colorsUtilityYin055);
-          font-weight: var(--fontWeights400);
-          margin-left: var(--spacing050);
-        }
-      `}
-  }
-
-  ${ValidationIconStyle} ${StyledIcon}:focus {
-    outline: 2px solid #ffb500;
-  }
-`;
-const FieldsetContentStyle = styled.div`
-  ${({
-  inline
-}) => inline && "display: flex;"}
+      ::after {
+        content: "(optional)";
+        color: var(--colorsUtilityYin055);
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
+      }
+    `}
 `;
-export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };
+export { FieldsetStyle, StyledLegend };

package/esm/components/flat-table/sort/sort.component.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 export interface SortProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-    sortType?: "ascending" | "descending" | false;
-    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    sortType?: "ascending" | "descending";
+    /** Callback fired when the component is clicked */
     onClick?: () => void;
-    /** Sets the content of `FlatTableSortHeader` */
-    children?: React.ReactNode;
+    /** Sets the text content of the component */
+    children?: string;
+    /** Sets the accessible name of the component */
+    accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
 export default Sort;

package/esm/components/flat-table/sort/sort.component.js

@@ -1,15 +1,19 @@
 import React, { useRef, useContext } from "react";
 import PropTypes from "prop-types";
 import Event from "../../../__internal__/utils/helpers/events";
+import Typography from "../../typography";
 import { StyledSort, StyledSpaceHolder, StyledSortIcon } from "./sort.style";
 import guid from "../../../__internal__/utils/helpers/guid";
+import useLocale from "../../../hooks/__internal__/useLocale";
 import { FlatTableThemeContext } from "../flat-table.component";
 export const Sort = ({
   children,
   onClick,
-  sortType
+  sortType,
+  accessibleName
 }) => {
   const id = useRef(guid());
+  const locale = useLocale();
   const onKeyDown = e => {
     if (Event.isEnterOrSpaceKey(e)) {
       e.preventDefault();
@@ -20,10 +24,10 @@ export const Sort = ({
   const {
     colorTheme
   } = useContext(FlatTableThemeContext);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    hidden: true,
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
+    screenReaderOnly: true,
     id: id.current
-  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/React.createElement(StyledSort, {
+  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/React.createElement(StyledSort, {
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,

package/esm/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -38,8 +38,8 @@ export const TileSelectGroup = ({
     legend: legend
   }, tagComponent("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, filterStyledSystemMarginProps(rest)), description ? /*#__PURE__*/React.createElement(StyledGroupDescription, {
+  }, filterStyledSystemMarginProps(rest)), description && /*#__PURE__*/React.createElement(StyledGroupDescription, {
     "data-element": "tile-select-group-description"
-  }, description) : null, /*#__PURE__*/React.createElement("div", null, tiles));
+  }, description), tiles);
 };
 export default TileSelectGroup;

package/esm/components/tile-select/tile-select.component.js

@@ -105,7 +105,7 @@ const TileSelect = /*#__PURE__*/React.forwardRef(({
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/React.createElement(StyledAdornment, {
     hasAdditionalInformation: !!additionalInformation
-  }, titleAdornment)), additionalInformation && /*#__PURE__*/React.createElement("div", null, additionalInformation), /*#__PURE__*/React.createElement(StyledDescription, {
+  }, titleAdornment && /*#__PURE__*/React.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/React.createElement("div", null, additionalInformation), /*#__PURE__*/React.createElement(StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
   }, description), footer && /*#__PURE__*/React.createElement(StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/React.createElement(StyledAccordionFooterWrapper, {
     accordionExpanded: accordionExpanded

package/esm/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

package/esm/components/tile-select/tile-select.style.js

@@ -2,7 +2,7 @@ import styled, { css } from "styled-components";
 import { margin } from "styled-system";
 import Fieldset from "../fieldset";
 import { Input } from "../../__internal__/input";
-import { LegendContainerStyle } from "../fieldset/fieldset.style";
+import { StyledLegend } from "../fieldset/fieldset.style";
 import StyledIcon from "../icon/icon.style";
 import { baseTheme } from "../../style/themes";
 import addFocusStyling from "../../style/utils/add-focus-styling";
@@ -166,13 +166,11 @@ const StyledDeselectWrapper = styled.div`
 const StyledTileSelectFieldset = styled(Fieldset)`
   ${margin}
 
-  ${LegendContainerStyle} {
+  ${StyledLegend} {
     margin-bottom: 16px;
-    legend {
-      font-size: 16px;
-      line-height: 16px;
-      margin-left: -2px;
-    }
+    font-size: 16px;
+    line-height: 16px;
+    margin-left: -2px;
   }
   ${({
   multiSelect

package/esm/locales/__internal__/es-es.js

@@ -150,6 +150,9 @@ const esES = {
       close: () => "Cerrar"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Ordenar todo ${sortContent || "contenido"}${sortType ? ` en orden ${sortType === "ascending" ? "ascendente" : "descendente"}.` : " en orden ascendente o descendente."}`
+  },
   splitButton: {
     ariaLabel: () => "Mostrar más"
   },

package/esm/locales/en-gb.js

@@ -152,6 +152,9 @@ const enGB = {
       close: () => "Close"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Sort all ${sortContent || "contents"}${sortType ? ` in an ${sortType} order.` : " in an ascending or descending order."}`
+  },
   splitButton: {
     ariaLabel: () => "Show more"
   },

package/esm/locales/locale.d.ts

@@ -127,18 +127,21 @@ interface Locale {
             close: () => string;
         };
     };
+    sort: {
+        accessibleName: (sortContent?: string, sortType?: "ascending" | "descending") => string;
+    };
     splitButton: {
         ariaLabel: () => string;
     };
-    switch: {
-        on: () => string;
-        off: () => string;
-    };
     stepFlow: {
         stepLabel: (currentStep: number, totalSteps: number) => string;
         screenReaderOnlyTitle: (title: string, currentStep: number, totalSteps: number, category?: string) => string;
         closeIconAriaLabel?: () => string;
     };
+    switch: {
+        on: () => string;
+        off: () => string;
+    };
     textEditor: {
         tooltipMessages: {
             bold: () => string;

package/lib/components/fieldset/fieldset.component.d.ts

@@ -1,11 +1,9 @@
 import React from "react";
 import { MarginProps } from "styled-system";
 export interface FieldsetProps extends MarginProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** Child elements */
     children?: React.ReactNode;
-    /** The text for the fieldsets legend element. */
+    /** The text for the fieldset's legend element. */
     legend?: string;
     /** Flag to configure fields as mandatory. */
     required?: boolean;
@@ -13,7 +11,7 @@ export interface FieldsetProps extends MarginProps {
     isOptional?: boolean;
 }
 export declare const Fieldset: {
-    ({ children, inline, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: FieldsetProps): React.JSX.Element;
     displayName: string;
 };
 export default Fieldset;

package/lib/components/fieldset/fieldset.component.js

@@ -17,24 +17,12 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 const Fieldset = ({
   children,
-  inline = false,
   legend,
   required,
   isOptional,
   ...rest
 }) => {
   const [ref, setRef] = (0, _react.useState)(null);
-  const getLegend = () => {
-    if (!legend) return null;
-    return /*#__PURE__*/_react.default.createElement(_fieldset.LegendContainerStyle, {
-      isRequired: required,
-      isOptional: isOptional,
-      inline: inline,
-      "data-component": "legend-style"
-    }, /*#__PURE__*/_react.default.createElement("legend", {
-      "data-element": "legend"
-    }, legend));
-  };
   const marginProps = (0, _useFormSpacing.default)(rest);
   (0, _react.useEffect)(() => {
     if (ref && required) {
@@ -49,12 +37,13 @@ const Fieldset = ({
     }
   }, /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetStyle, _extends({
     ref: setRef
-  }, (0, _tags.default)("fieldset", rest), rest, marginProps), /*#__PURE__*/_react.default.createElement(_fieldset.FieldsetContentStyle, {
-    "data-component": "fieldset-style",
-    inline: inline
-  }, getLegend(), /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
+  }, (0, _tags.default)("fieldset", rest), rest, marginProps), legend && /*#__PURE__*/_react.default.createElement(_fieldset.StyledLegend, {
+    "data-element": "legend",
+    isRequired: required,
+    isOptional: isOptional
+  }, legend), /*#__PURE__*/_react.default.createElement(_formSpacingProvider.default, {
     marginBottom: undefined
-  }, children))));
+  }, children)));
 };
 exports.Fieldset = Fieldset;
 Fieldset.displayName = "Fieldset";

package/lib/components/fieldset/fieldset.style.d.ts

@@ -1,12 +1,9 @@
 export interface StyledFieldsetProps {
-    /** When true, legend is placed in line with the children */
-    inline?: boolean;
     /** Flag to configure fields as mandatory. */
     isRequired?: boolean;
     /** Flag to configure fields as optional. */
     isOptional?: boolean;
 }
 declare const FieldsetStyle: import("styled-components").StyledComponent<"fieldset", any, {}, never>;
-declare const LegendContainerStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-declare const FieldsetContentStyle: import("styled-components").StyledComponent<"div", any, StyledFieldsetProps, never>;
-export { FieldsetStyle, LegendContainerStyle, FieldsetContentStyle };
+declare const StyledLegend: import("styled-components").StyledComponent<"legend", any, StyledFieldsetProps, never>;
+export { FieldsetStyle, StyledLegend };

package/lib/components/fieldset/fieldset.style.js

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.LegendContainerStyle = exports.FieldsetStyle = exports.FieldsetContentStyle = void 0;
+exports.StyledLegend = exports.FieldsetStyle = void 0;
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _styledSystem = require("styled-system");
 var _formField = _interopRequireDefault(require("../../__internal__/form-field/form-field.style"));
-var _validationIcon = _interopRequireDefault(require("../../__internal__/validations/validation-icon.style"));
-var _icon = _interopRequireDefault(require("../icon/icon.style"));
 var _base = _interopRequireDefault(require("../../style/themes/base"));
 var _checkbox = _interopRequireDefault(require("../checkbox/checkbox.style"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -33,57 +31,39 @@ const FieldsetStyle = exports.FieldsetStyle = _styledComponents.default.fieldset
 FieldsetStyle.defaultProps = {
   theme: _base.default
 };
-const LegendContainerStyle = exports.LegendContainerStyle = _styledComponents.default.div`
-  ${({
-  inline
-}) => inline && `
-  margin-right: 32px;
-  height: 34px !important;
-  `}
+const StyledLegend = exports.StyledLegend = _styledComponents.default.legend`
   display: flex;
   align-items: center;
   margin-bottom: 32px;
+  font-size: 20px;
+  font-weight: var(--fontWeights700);
+  color: var(--colorsUtilityYin090);
+  line-height: 24px;
+  margin-right: 4px;
 
-  legend {
-    font-size: 20px;
-    font-weight: var(--fontWeights700);
-    color: var(--colorsUtilityYin090);
-    line-height: 24px;
-    margin-right: 4px;
-
-    ${({
+  ${({
   isRequired
 }) => isRequired && (0, _styledComponents.css)`
-        ::after {
-          content: "*";
-          line-height: 24px;
-          color: var(--colorsSemanticNegative500);
-          font-weight: var(--fontWeights700);
-          margin-left: var(--spacing100);
-          position: relative;
-          top: 1px;
-          left: -4px;
-        }
-      `}
+      ::after {
+        content: "*";
+        line-height: 24px;
+        color: var(--colorsSemanticNegative500);
+        font-weight: var(--fontWeights700);
+        margin-left: var(--spacing100);
+        position: relative;
+        top: 1px;
+        left: -4px;
+      }
+    `}
 
-    ${({
+  ${({
   isOptional
 }) => isOptional && (0, _styledComponents.css)`
-        ::after {
-          content: "(optional)";
-          color: var(--colorsUtilityYin055);
-          font-weight: var(--fontWeights400);
-          margin-left: var(--spacing050);
-        }
-      `}
-  }
-
-  ${_validationIcon.default} ${_icon.default}:focus {
-    outline: 2px solid #ffb500;
-  }
-`;
-const FieldsetContentStyle = exports.FieldsetContentStyle = _styledComponents.default.div`
-  ${({
-  inline
-}) => inline && "display: flex;"}
+      ::after {
+        content: "(optional)";
+        color: var(--colorsUtilityYin055);
+        font-weight: var(--fontWeights400);
+        margin-left: var(--spacing050);
+      }
+    `}
 `;

package/lib/components/flat-table/sort/sort.component.d.ts

@@ -1,11 +1,13 @@
 import React from "react";
 export interface SortProps {
     /** if `asc` it will show `sort_up` icon, if `desc` it will show `sort_down` */
-    sortType?: "ascending" | "descending" | false;
-    /** Callback fired when the `FlatTableSortHeader` is clicked */
+    sortType?: "ascending" | "descending";
+    /** Callback fired when the component is clicked */
     onClick?: () => void;
-    /** Sets the content of `FlatTableSortHeader` */
-    children?: React.ReactNode;
+    /** Sets the text content of the component */
+    children?: string;
+    /** Sets the accessible name of the component */
+    accessibleName?: string;
 }
-export declare const Sort: ({ children, onClick, sortType }: SortProps) => React.JSX.Element;
+export declare const Sort: ({ children, onClick, sortType, accessibleName, }: SortProps) => React.JSX.Element;
 export default Sort;

package/lib/components/flat-table/sort/sort.component.js

@@ -7,8 +7,10 @@ exports.default = exports.Sort = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _events = _interopRequireDefault(require("../../../__internal__/utils/helpers/events"));
+var _typography = _interopRequireDefault(require("../../typography"));
 var _sort = require("./sort.style");
 var _guid = _interopRequireDefault(require("../../../__internal__/utils/helpers/guid"));
+var _useLocale = _interopRequireDefault(require("../../../hooks/__internal__/useLocale"));
 var _flatTable = require("../flat-table.component");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -16,9 +18,11 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
 const Sort = ({
   children,
   onClick,
-  sortType
+  sortType,
+  accessibleName
 }) => {
   const id = (0, _react.useRef)((0, _guid.default)());
+  const locale = (0, _useLocale.default)();
   const onKeyDown = e => {
     if (_events.default.isEnterOrSpaceKey(e)) {
       e.preventDefault();
@@ -29,10 +33,10 @@ const Sort = ({
   const {
     colorTheme
   } = (0, _react.useContext)(_flatTable.FlatTableThemeContext);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
-    hidden: true,
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_typography.default, {
+    screenReaderOnly: true,
     id: id.current
-  }, children, sortType ? `, sort type ${sortType}` : ", sortable"), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
+  }, accessibleName || locale.sort.accessibleName(children, sortType)), /*#__PURE__*/_react.default.createElement(_sort.StyledSort, {
     role: "button",
     onKeyDown: onKeyDown,
     tabIndex: 0,

package/lib/components/tile-select/tile-select-group/tile-select-group.component.js

@@ -45,9 +45,9 @@ const TileSelectGroup = ({
     legend: legend
   }, (0, _tags.default)("tile-select-group", rest), {
     multiSelect: multiSelect
-  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description ? /*#__PURE__*/_react.default.createElement(_tileSelect.StyledGroupDescription, {
+  }, (0, _utils.filterStyledSystemMarginProps)(rest)), description && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledGroupDescription, {
     "data-element": "tile-select-group-description"
-  }, description) : null, /*#__PURE__*/_react.default.createElement("div", null, tiles));
+  }, description), tiles);
 };
 exports.TileSelectGroup = TileSelectGroup;
 var _default = exports.default = TileSelectGroup;

package/lib/components/tile-select/tile-select.component.js

@@ -114,7 +114,7 @@ const TileSelect = /*#__PURE__*/_react.default.forwardRef(({
     as: checkPropTypeIsNode(subtitle) ? "div" : undefined
   }, subtitle), titleAdornment && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAdornment, {
     hasAdditionalInformation: !!additionalInformation
-  }, titleAdornment)), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, {
+  }, titleAdornment && /*#__PURE__*/_react.default.createElement("div", null, titleAdornment))), additionalInformation && /*#__PURE__*/_react.default.createElement("div", null, additionalInformation), /*#__PURE__*/_react.default.createElement(_tileSelect.StyledDescription, {
     as: checkPropTypeIsNode(description) ? "div" : undefined
   }, description), footer && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledFooterWrapper, null, footer), accordionContent && accordionControl && /*#__PURE__*/_react.default.createElement(_tileSelect.StyledAccordionFooterWrapper, {
     accordionExpanded: accordionExpanded

package/lib/components/tile-select/tile-select.style.d.ts

@@ -28,7 +28,7 @@ declare const StyledDeselectWrapper: import("styled-components").StyledComponent
     hasActionAdornment: boolean;
 }, never>;
 declare const StyledTileSelectFieldset: import("styled-components").StyledComponent<{
-    ({ children, inline, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
+    ({ children, legend, required, isOptional, ...rest }: import("../fieldset").FieldsetProps): import("react").JSX.Element;
     displayName: string;
 }, any, {
     multiSelect: boolean;

package/lib/components/tile-select/tile-select.style.js

@@ -175,13 +175,11 @@ const StyledDeselectWrapper = exports.StyledDeselectWrapper = _styledComponents.
 const StyledTileSelectFieldset = exports.StyledTileSelectFieldset = (0, _styledComponents.default)(_fieldset.default)`
   ${_styledSystem.margin}
 
-  ${_fieldset2.LegendContainerStyle} {
+  ${_fieldset2.StyledLegend} {
     margin-bottom: 16px;
-    legend {
-      font-size: 16px;
-      line-height: 16px;
-      margin-left: -2px;
-    }
+    font-size: 16px;
+    line-height: 16px;
+    margin-left: -2px;
   }
   ${({
   multiSelect

package/lib/locales/__internal__/es-es.js

@@ -156,6 +156,9 @@ const esES = {
       close: () => "Cerrar"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Ordenar todo ${sortContent || "contenido"}${sortType ? ` en orden ${sortType === "ascending" ? "ascendente" : "descendente"}.` : " en orden ascendente o descendente."}`
+  },
   splitButton: {
     ariaLabel: () => "Mostrar más"
   },

package/lib/locales/en-gb.js

@@ -158,6 +158,9 @@ const enGB = {
       close: () => "Close"
     }
   },
+  sort: {
+    accessibleName: (sortContent, sortType) => `Sort all ${sortContent || "contents"}${sortType ? ` in an ${sortType} order.` : " in an ascending or descending order."}`
+  },
   splitButton: {
     ariaLabel: () => "Show more"
   },

package/lib/locales/locale.d.ts

@@ -127,18 +127,21 @@ interface Locale {
             close: () => string;
         };
     };
+    sort: {
+        accessibleName: (sortContent?: string, sortType?: "ascending" | "descending") => string;
+    };
     splitButton: {
         ariaLabel: () => string;
     };
-    switch: {
-        on: () => string;
-        off: () => string;
-    };
     stepFlow: {
         stepLabel: (currentStep: number, totalSteps: number) => string;
         screenReaderOnlyTitle: (title: string, currentStep: number, totalSteps: number, category?: string) => string;
         closeIconAriaLabel?: () => string;
     };
+    switch: {
+        on: () => string;
+        off: () => string;
+    };
     textEditor: {
         tooltipMessages: {
             bold: () => string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "carbon-react",
-  "version": "129.0.0",
+  "version": "131.0.0",
   "description": "A library of reusable React components for easily building user interfaces.",
   "files": [
     "lib",