gd-bs 6.2.4 → 6.2.6

package/generateIcons.js

@@ -150,6 +150,8 @@ fs.readdir(dirIcons, function (err, files) {
         '\t        icon.classList.add(classNames[i]);',
         '\t      }',
         '\t    }\n',
+        '\t    // Make this icon invisible to the screen reader',
+		'\t    icon.setAttribute("aria-hidden", "true");\n',
         '\t    // Set the height/width',
         '\t    icon.setAttribute("height", (height ? height : 32).toString());',
         '\t    icon.setAttribute("width", (width ? width : 32).toString());\n',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "gd-bs",
-    "version": "6.2.4",
+    "version": "6.2.6",
     "description": "Bootstrap JavaScript, TypeScript and Web Components library.",
     "main": "build/index.js",
     "typings": "src/index.d.ts",
@@ -36,7 +36,7 @@
         "@popperjs/core": "^2.11.8",
         "bootstrap": "^5.3.1",
         "bootstrap-icons": "^1.10.5",
-        "core-js": "^3.32.0",
+        "core-js": "^3.32.1",
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {

package/pnpm-lock.yaml

@@ -2,7 +2,7 @@ dependencies:
   '@popperjs/core': 2.11.8
   bootstrap: 5.3.1_@popperjs+core@2.11.8
   bootstrap-icons: 1.10.5
-  core-js: 3.32.0
+  core-js: 3.32.1
   tippy.js: 6.3.7
 devDependencies:
   '@babel/core': 7.19.3
@@ -1834,11 +1834,11 @@ packages:
     dev: true
     resolution:
       integrity: sha512-ovcyhs2DEBUIE0MGEKHP4olCUW/XYte3Vroyxuh38rD1wAO4dHohsovUC4eAOuzFxE6b+RXvBU3UZ9o0YhUTkA==
-  /core-js/3.32.0:
+  /core-js/3.32.1:
     dev: false
     requiresBuild: true
     resolution:
-      integrity: sha512-rd4rYZNlF3WuoYuRIDEmbR/ga9CeuWX9U05umAvgrrZoHY4Z++cp/xwPQMvUpBB4Ag6J8KfD80G0zwCyaSxDww==
+      integrity: sha512-lqufgNn9NLnESg5mQeYsxQP5w7wrViSj0jr/kv6ECQiByzQkrn1MKvV0L3acttpDqfQrHLwr2KCMgX5b8X+lyQ==
   /cosmiconfig/8.2.0:
     dependencies:
       import-fresh: 3.3.0
@@ -3284,7 +3284,7 @@ specifiers:
   babel-loader: ^9.1.2
   bootstrap: ^5.3.1
   bootstrap-icons: ^1.10.5
-  core-js: ^3.32.0
+  core-js: ^3.32.1
   css-loader: ^6.7.3
   dts-bundle: ^0.7.3
   postcss-loader: ^7.3.3

package/src/components/button/index.ts

@@ -84,6 +84,10 @@ class _Button extends Base<IButtonProps> implements IButton {
         // Set the default type
         this.setType(this.props.type || ButtonTypes.Primary)
 
+        // Set the aria label/description
+        this.props.description ? this.el.setAttribute("aria-description", this.props.description) : null;
+        this.el.setAttribute("aria-label", this.props.label || this.props.text);
+
         // Set the attributes
         this.props.dismiss ? this.el.setAttribute("data-bs-dismiss", this.props.dismiss) : null;
         this.props.href ? this.el.href = this.props.href : null;

package/src/components/button/types.d.ts

@@ -86,6 +86,7 @@ export interface IButtonProps extends IBaseProps<IButton> {
     badge?: IBadgeProps;
     controls?: string | Array<string>;
     data?: any;
+    description?: string;
     dismiss?: string;
     href?: string;
     iconClassName?: string;
@@ -98,6 +99,7 @@ export interface IButtonProps extends IBaseProps<IButton> {
     isLarge?: boolean;
     isLink?: boolean;
     isSmall?: boolean;
+    label?: string;
     onClick?: (button?: IButtonProps, ev?: Event) => void;
     spinnerProps?: ISpinnerProps;
     tabIndex?: number;

package/src/components/dropdown/index.ts

@@ -124,6 +124,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         if (toggle) {
             toggle.classList.add(btnType);
             toggle.disabled = this.props.isReadonly ? true : false;
+            toggle.setAttribute("aria-label", this.props.label || "");
         }
 
         // See if we are rendering the menu only
@@ -502,6 +503,16 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         }
     }
 
+    // Sets the label of the dropdown
+    setLabel(value: string) {
+        // Get the dropdown
+        let ddl = this.el.querySelector(".dropdown-toggle");
+        if (ddl) {
+            // Set the inner html
+            ddl.innerHTML = value;
+        }
+    }
+
     // Enables/Disables the dark theme
     setTheme(isDark: boolean) {
         // Get the menu

package/src/components/dropdown/types.d.ts

@@ -83,6 +83,9 @@ export interface IDropdown {
     /** Updates the dropdown items. */
     setItems: (items: Array<IDropdownItem>) => void;
 
+    /** Updates the label of the dropdown. */
+    setLabel: (value: string) => void;
+
     /** Enables/Disables the dark theme. */
     setTheme: (isDark: boolean) => void;
 
@@ -144,7 +147,6 @@ export interface IDropdownProps extends IBaseProps<IDropdown> {
     onChange?: (item?: IDropdownItem | Array<IDropdownItem>, ev?: Event) => void;
     onMenuRendering?: (props: IPopoverProps) => IPopoverProps;
     required?: boolean;
-    setLabelToValue?: boolean;
     title?: string;
     type?: number;
     value?: any;

package/src/components/form/control.ts

@@ -99,7 +99,7 @@ export class FormControl implements IFormControl {
     // Creates the control
     private create() {
         // Parse the custom classes to add
-        let className = [(this._props.className || ""), (this._props.controlClassName || "")].join(" ").trim();
+        let className = this._props.controlClassName || "";
 
         // Set the value
         let formValue = this._formProps.value ? this._formProps.value[this._props.name] : null;

package/src/components/form/group.ts

@@ -96,6 +96,15 @@ export class FormGroup {
             elDescription = null;
         }
 
+        // Set the class name
+        if (this._props.className) {
+            // Set the class
+            this._el.className = [
+                this._el.className || "",
+                this._props.className
+            ].join(' ').trim();
+        }
+
         // Create the control
         this._control = new FormControl(this._props, this._formProps, elLabel);
 

package/src/components/tooltip/index.ts

@@ -71,6 +71,12 @@ class _Tooltip extends Base<ITooltipProps> {
             let btnProps = this.props.btnProps || {};
             btnProps.type = btnProps.type || ButtonTypes.OutlineSecondary
 
+            // See if the content is text
+            if (typeof (this.props.content) === "string") {
+                // Set the label
+                btnProps.description = this.props.content;
+            }
+
             // Create the button
             this._btn = Button(btnProps);
 

package/src/icons/generate.ts

@@ -15,6 +15,9 @@ export const generateIcon = (svg: string, height: number = 32, width: number = 3
 	      }
 	    }
 
+	    // Make this icon invisible to the screen reader
+	    icon.setAttribute("aria-hidden", "true");
+
 	    // Set the height/width
 	    icon.setAttribute("height", (height ? height : 32).toString());
 	    icon.setAttribute("width", (width ? width : 32).toString());