gd-bs 6.2.5 → 6.2.7

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.5",
+    "version": "6.2.7",
     "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
@@ -509,6 +510,7 @@ class _Dropdown extends Base<IDropdownProps> implements IDropdown {
         if (ddl) {
             // Set the inner html
             ddl.innerHTML = value;
+            ddl.setAttribute("aria-label", value);
         }
     }
 

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);
 
@@ -332,6 +338,12 @@ class _Tooltip extends Base<ITooltipProps> {
     setContent(content: string | Element) {
         // Set the tippy content
         this.tippy.setContent(content);
+
+        // See if the button exists
+        if (this._btn && typeof (content) === "string") {
+            // Update the content
+            this._btn.el.setAttribute("aria-description", content);
+        }
     }
 
     // Shows the tooltip

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());