baseui 0.0.0-next-9864d7e → 0.0.0-next-cfeb108

package/breadcrumbs/breadcrumbs.js

@@ -103,7 +103,7 @@ function Breadcrumbs(props) {
   });
   return /*#__PURE__*/_react.default.createElement(_index.LocaleContext.Consumer, null, function (locale) {
     return /*#__PURE__*/_react.default.createElement(Root, _extends({
-      "aria-label": props.ariaLabel || locale.breadcrumbs.ariaLabel,
+      "aria-label": props['aria-label'] || props.ariaLabel || locale.breadcrumbs.ariaLabel,
       "data-baseweb": "breadcrumbs"
     }, baseRootProps), /*#__PURE__*/_react.default.createElement(List, baseListProps, childrenWithSeparators));
   });

package/breadcrumbs/breadcrumbs.js.flow

@@ -77,7 +77,11 @@ export function Breadcrumbs(props: BreadcrumbsPropsT) {
     <LocaleContext.Consumer>
       {locale => (
         <Root
-          aria-label={props.ariaLabel || locale.breadcrumbs.ariaLabel}
+          aria-label={
+            props['aria-label'] ||
+            props.ariaLabel ||
+            locale.breadcrumbs.ariaLabel
+          }
           data-baseweb="breadcrumbs"
           {...baseRootProps}
         >

package/breadcrumbs/index.d.ts

@@ -14,6 +14,7 @@ export interface BreadcrumbsProps {
   children?: React.ReactNode;
   overrides?: BreadcrumbsOverrides;
   ariaLabel?: string;
+  'aria-label'?: string;
   showTrailingSeparator?: boolean;
 }
 

package/breadcrumbs/types.js.flow

@@ -23,6 +23,7 @@ export type BreadcrumbsPropsT = {|
   children?: Node,
   overrides?: OverridesT,
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Whether to show a trailing separator after the last breadcrumb. */
   showTrailingSeparator?: boolean,
 |};

package/button-group/button-group.js

@@ -107,7 +107,6 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           _this$props$mode = _this$props.mode,
           mode = _this$props$mode === void 0 ? _constants.MODE.checkbox : _this$props$mode,
           children = _this$props.children,
-          ariaLabel = _this$props.ariaLabel,
           selected = _this$props.selected,
           disabled = _this$props.disabled,
           _onClick = _this$props.onClick,
@@ -120,6 +119,7 @@ var ButtonGroup = /*#__PURE__*/function (_React$Component) {
           Root = _getOverrides2[0],
           rootProps = _getOverrides2[1];
 
+      var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
       var isRadio = mode === _constants.MODE.radio;
       var numItems = React.Children.count(children);
       return /*#__PURE__*/React.createElement(_index2.LocaleContext.Consumer, null, function (locale) {

package/button-group/button-group.js.flow

@@ -43,7 +43,6 @@ export default class ButtonGroup extends React.Component<PropsT> {
       overrides = {},
       mode = MODE.checkbox,
       children,
-      ariaLabel,
       selected,
       disabled,
       onClick,
@@ -52,6 +51,7 @@ export default class ButtonGroup extends React.Component<PropsT> {
       size,
     } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    const ariaLabel = this.props['aria-label'] || this.props.ariaLabel;
     const isRadio = mode === MODE.radio;
 
     const numItems = React.Children.count(children);

package/button-group/index.d.ts

@@ -22,6 +22,7 @@ export interface ButtonGroupOverrides {
 
 export interface ButtonGroupProps {
   ariaLabel?: string;
+  'aria-label'?: string;
   children: React.ReactNode;
   disabled?: boolean;
   mode?: MODE[keyof MODE];

package/button-group/types.js.flow

@@ -17,6 +17,7 @@ import {MODE, STATE_CHANGE_TYPE} from './constants.js';
 export type PropsT = {|
   /** Accessible label. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Set of more than one `Button` components */
   children: Array<React.Node>,
   /** Defines if the button group is disabled. */

package/checkbox/checkbox.js

@@ -183,8 +183,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
           checked = _this$props2.checked,
           children = _this$props2.children,
           required = _this$props2.required,
-          title = _this$props2.title,
-          ariaLabel = _this$props2.ariaLabel;
+          title = _this$props2.title;
       var RootOverride = overrides.Root,
           CheckmarkOverride = overrides.Checkmark,
           LabelOverride = overrides.Label,
@@ -253,7 +252,7 @@ var StatelessCheckbox = /*#__PURE__*/function (_React$Component) {
         name: name,
         checked: checked,
         required: required,
-        "aria-label": ariaLabel,
+        "aria-label": this.props['aria-label'] || this.props.ariaLabel,
         "aria-checked": isIndeterminate ? 'mixed' : checked,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],

package/checkbox/checkbox.js.flow

@@ -134,7 +134,6 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
       children,
       required,
       title,
-      ariaLabel,
     } = this.props;
 
     const {
@@ -229,7 +228,7 @@ class StatelessCheckbox extends React.Component<PropsT, StatelessStateT> {
           name={name}
           checked={checked}
           required={required}
-          aria-label={ariaLabel}
+          aria-label={this.props['aria-label'] || this.props.ariaLabel}
           aria-checked={isIndeterminate ? 'mixed' : checked}
           aria-describedby={this.props['aria-describedby']}
           aria-errormessage={this.props['aria-errormessage']}

package/checkbox/index.d.ts

@@ -106,6 +106,7 @@ export interface CheckboxProps {
   checkmarkType?: STYLE_TYPE[keyof STYLE_TYPE];
   title?: string;
   ariaLabel?: string;
+  'aria-label'?: string;
   onChange?: React.FormEventHandler<HTMLInputElement>;
   onMouseEnter?: React.MouseEventHandler<HTMLInputElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLInputElement>;

package/checkbox/types.js.flow

@@ -48,6 +48,7 @@ export type PropsT = {
   'aria-errormessage'?: string,
   /** Passed to the input element aria-label attribute. */
   ariaLabel?: string,
+  'aria-label'?: string,
   /** Component or String value for label of checkbox. */
   children?: React$Node,
   /** Indicates if this checkbox children contain an interactive element (prevents the label from moving focus from the child element to the radio button) */