v27.1.51 is released

Author: pipeline

controls/barcodegenerator/CHANGELOG.md

@@ -2,7 +2,7 @@
 
 ## [Unreleased]
 
-## 27.1.50 (2024-09-24)
+## 27.1.51 (2024-09-30)
 
 ### Barcode
 

controls/buttons/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 ## [Unreleased]
 
+## 27.1.51 (2024-09-30)
+
+### Checkbox
+
+#### Bug Fixes
+
+- `#I909049` - The issue with "Need to set the aria-label attribute for the checkbox input element and not to the wrapper element" has been resolved.
+
+### RadioButton
+
+#### Bug Fixes
+
+- The issue with "Background color issue for disabled unselect radio button in bootstrap5 theme" has been resolved.
+
 ## 26.1.35 (2024-06-11)
 
 ### Floating Action Button

controls/buttons/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@syncfusion/ej2-buttons",
-	"version": "18.64.1",
+	"version": "27.1.50",
 	"description": "A package of feature-rich Essential JS 2 components such as Button, CheckBox, RadioButton and Switch.",
 	"author": "Syncfusion Inc.",
 	"license": "SEE LICENSE IN license",

controls/buttons/spec/check-box.spec.ts

@@ -555,6 +555,11 @@ describe('CheckBox', () => {
             expect(element.parentElement.parentElement.getAttribute("data-containerid").indexOf("error-agreement")).toEqual(0);
             expect(element.parentElement.parentElement.getAttribute("test").indexOf("test")).toEqual(0);
         });
+
+        it('EJ2-909049 - Need to set the aria-label attribute for the checkbox input element and not to the wrapper element in core.', function () {
+            checkbox = new CheckBox({ htmlAttributes: { 'aria-label': 'checkbox aria label' } }, '#checkbox');
+            expect(checkbox.element.ariaLabel).toContain('checkbox aria label');
+        });
 
     });
 

controls/buttons/src/check-box/check-box.ts

@@ -22,7 +22,7 @@ const RIPPLECHECK: string = 'e-ripple-check';
 const RIPPLEINDETERMINATE: string = 'e-ripple-stop';
 const RTL: string = 'e-rtl';
 const WRAPPER: string = 'e-checkbox-wrapper';
-const containerAttr: string[] = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id', 'tabindex'];
+const containerAttr: string[] = ['title', 'class', 'style', 'disabled', 'readonly', 'name', 'value', 'id', 'tabindex', 'aria-label'];
 
 /**
  * The CheckBox is a graphical user interface element that allows you to select one or more options from the choices.

controls/buttons/styles/check-box/_theme.scss

@@ -212,6 +212,13 @@
           }
         }
       }
+
+      &:hover .e-checkbox:focus + .e-frame.e-check {
+        @if $theme-name == 'fluent2-highcontrast' {
+          background-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
+          border-color: $primary-border-color-hover !important; /* stylelint-disable-line declaration-no-important */
+        }
+      }
     }
   }
 }

controls/buttons/styles/chips/_fluent2-definition.scss

@@ -529,7 +529,7 @@ $chip-outline-warning-avatar-pressed-bg-color: $chip-outline-warning-pressed-bg-
 $chip-outline-warning-avatar-disabled-bg-color: $chip-outline-warning-disabled-bg-color !default;
 $chip-outline-warning-font-color: $warning-bg-color !default;
 $chip-outline-warning-hover-font-color: $warning-bg-color-hover !default;
-$chip-outline-warning-focus-font-color: $success-text !default;
+$chip-outline-warning-focus-font-color: $warning-bg-color-hover !default;
 $chip-outline-warning-active-font-color: $warning-bg-color-selected !default;
 $chip-outline-warning-focus-active-font-color: $warning-bg-color-focus !default;
 $chip-outline-warning-pressed-font-color: $warning-bg-color-pressed !default;

controls/buttons/styles/radio-button/_bds-definition.scss

@@ -54,6 +54,7 @@ $radio-btn-check-transition: none !default;
 $radio-btn-disabled-border-color: $border !default;
 $radio-btn-disabled-checked-border-color: transparent !default;
 $radio-btn-disabled-background-color: $content-bg-color-alt3 !default;
+$radio-btn-disabled-not-checked-bg-color: transparent !default;
 $radio-btn-disabled-color: $border !default;
 $radio-btn-disabled-checked-color: $content-text-color-disabled !default;
 $radio-btn-font-color: $content-text-color !default;

controls/buttons/styles/radio-button/_bootstrap4-definition.scss

@@ -21,6 +21,7 @@ $radio-btn-check-transition: none !default;
 $radio-btn-disabled-border-color: $gray-500 !default;
 $radio-btn-disabled-checked-border-color: transparent !default;
 $radio-btn-disabled-background-color: rgba($primary, .5) !default;
+$radio-btn-disabled-not-checked-bg-color: transparent !default;
 $radio-btn-disabled-color: $gray-200 !default;
 $radio-btn-disabled-checked-color: $white !default;
 $radio-btn-font-color: $gray-900 !default;

controls/buttons/styles/radio-button/_bootstrap5-definition.scss

@@ -54,7 +54,7 @@ $radio-btn-check-transition: none !default;
 $radio-btn-disabled-border-color: $border-light !default;
 $radio-btn-disabled-checked-border-color: transparent !default;
 $radio-btn-disabled-background-color: $primary-light !default;
-$radio-btn-disabled-not-checked-bg-color: $primary-light !default;
+$radio-btn-disabled-not-checked-bg-color: transparent !default;
 $radio-btn-disabled-color: $content-text-color-disabled !default;
 $radio-btn-disabled-checked-color: $primary-text-color !default;
 $radio-btn-font-color: $content-text-color !default;