@stackoverflow/stacks 1.0.1 → 1.3.0

package/lib/ts/controllers/s-popover.ts

@@ -278,21 +278,33 @@ export class PopoverController extends BasePopoverController {
     private boundHideOnEscapePress!: any;
 
     /**
-     * Toggles optional classes in addition to BasePopoverController.shown
+     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.shown
      */
-    protected shown(dispatcher: Element|null = null) {
+    protected override shown(dispatcher: Element|null = null) {
         this.toggleOptionalClasses(true);
+        this.toggleAccessibilityAttributes(true);
         super.shown(dispatcher);
     }
 
     /**
-     * Toggles optional classes in addition to BasePopoverController.hidden
+     * Toggles optional classes and accessibility attributes in addition to BasePopoverController.hidden
      */
-    protected hidden(dispatcher: Element|null = null) {
+    protected override hidden(dispatcher: Element|null = null) {
         this.toggleOptionalClasses(false);
+        this.toggleAccessibilityAttributes(false);
         super.hidden(dispatcher);
     }
 
+
+    /**
+     * Initializes accessibility attributes in addition to BasePopoverController.connect
+     */
+    public override connect(): void {
+        super.connect();
+
+        this.toggleAccessibilityAttributes();
+    }
+
     /**
      * Binds global events to the document for hiding popovers on user interaction
      */
@@ -307,7 +319,7 @@ export class PopoverController extends BasePopoverController {
     /**
      * Unbinds global events to the document for hiding popovers on user interaction
      */
-    protected  unbindDocumentEvents() {
+    protected unbindDocumentEvents() {
         document.removeEventListener("mousedown", this.boundHideOnOutsideClick);
         document.removeEventListener("keyup", this.boundHideOnEscapePress);
     }
@@ -357,6 +369,14 @@ export class PopoverController extends BasePopoverController {
             cl.toggle(cls, show);
         });
     }
+
+    /**
+     * Toggles accessibility attributes based on whether the popover is shown or not
+     * @param {boolean=} show - A boolean indicating whether this is being triggered by a show or hide.
+     */
+    private toggleAccessibilityAttributes(show?: boolean) {
+        this.referenceElement.ariaExpanded = show?.toString() || this.referenceElement.ariaExpanded || 'false';
+    }
 }
 
 /**

package/lib/ts/controllers/s-uploader.ts

@@ -12,8 +12,8 @@ export class UploaderController extends Stacks.StacksController {
     private previewsTarget!: HTMLElement;
     private uploaderTarget!: HTMLElement;
 
-    private boundDragEnter!: any;
-    private boundDragLeave!: any;
+    private boundDragEnter!: () => void;
+    private boundDragLeave!: () => void;
 
     private static readonly FILE_DISPLAY_LIMIT = 10;
     private static readonly MAX_FILE_SIZE = 1024 * 1024 * 10; // 10 MB
@@ -50,7 +50,7 @@ export class UploaderController extends Stacks.StacksController {
                     const hasMultipleFiles = res.length > 1;
 
                     if (hasMultipleFiles) {
-                        let headingElement = document.createElement("div");
+                        const headingElement = document.createElement("div");
                         headingElement.classList.add("s-uploader--previews-heading");
                         headingElement.innerText = res.length < count ?
                             `Showing ${res.length} of ${count} files` : `${count} items`;
@@ -61,7 +61,9 @@ export class UploaderController extends Stacks.StacksController {
                     }
                     res.forEach((file) => this.addFilePreview(file));
                     this.handleUploaderActive(true);
-                });
+                })
+                // TODO consider rendering an error message
+                .catch(() => null);
     }
 
     /**
@@ -84,13 +86,25 @@ export class UploaderController extends Stacks.StacksController {
         const enableElements = scope.findAllElements('[data-s-uploader-enable-on-input]');
 
         if (shouldPreview) {
-            hideElements.map(el => el.classList.add("d-none"));
-            showElements.map(el => el.classList.remove("d-none"));
-            enableElements.map(el => el.removeAttribute("disabled"));
+            hideElements.forEach(el => {
+                el.classList.add("d-none");
+            });
+            showElements.forEach(el => {
+                el.classList.remove("d-none");
+            });
+            enableElements.forEach(el => {
+                el.removeAttribute("disabled");
+            });
         } else {
-            hideElements.map(el => el.classList.remove("d-none"));
-            showElements.map(el => el.classList.add("d-none"));
-            enableElements.map(el => el.setAttribute("disabled", "true"))
+            hideElements.forEach(el => {
+                el.classList.remove("d-none");
+            });
+            showElements.forEach(el => {
+                el.classList.add("d-none");
+            });
+            enableElements.forEach(el => {
+                el.setAttribute("disabled", "true");
+            });
             this.handleUploaderActive(false);
         }
     }
@@ -104,7 +118,7 @@ export class UploaderController extends Stacks.StacksController {
             return;
         }
 
-        let previewElement = document.createElement("div");
+        const previewElement = document.createElement("div");
         let thumbElement;
 
         if (file.type.match('image/*') && file.data) {
@@ -137,7 +151,7 @@ export class UploaderController extends Stacks.StacksController {
      * @returns an object containing a FilePreview object
      */
     private fileToDataURL(file: File): Promise<FilePreview> {
-        var reader = new FileReader();
+        const reader = new FileReader();
         const { name, size, type } = file;
 
         if (size < UploaderController.MAX_FILE_SIZE && type.indexOf("image") > -1) {

package/package.json

@@ -5,7 +5,7 @@
     "type": "git",
     "url": "https://github.com/StackExchange/Stacks.git"
   },
-  "version": "1.0.1",
+  "version": "1.3.0",
   "files": [
     "dist",
     "lib"
@@ -30,43 +30,42 @@
   },
   "license": "MIT",
   "dependencies": {
-    "@popperjs/core": "^2.11.4",
+    "@popperjs/core": "^2.11.5",
     "stimulus": "^2.0.0"
   },
   "devDependencies": {
-    "@11ty/eleventy": "^1.0.0",
-    "@highlightjs/cdn-assets": "^11.5.1",
-    "@stackoverflow/stacks-editor": "^0.4.2",
-    "@stackoverflow/stacks-icons": "^2.27.0",
-    "@typescript-eslint/eslint-plugin": "^5.18.0",
-    "@typescript-eslint/parser": "^5.18.0",
-    "backstopjs": "^6.0.4",
-    "concurrently": "^7.1.0",
+    "@11ty/eleventy": "^1.0.1",
+    "@highlightjs/cdn-assets": "^11.6.0",
+    "@stackoverflow/stacks-editor": "^0.6.1",
+    "@stackoverflow/stacks-icons": "^3.0.0",
+    "@typescript-eslint/eslint-plugin": "^5.31.0",
+    "@typescript-eslint/parser": "^5.31.0",
+    "backstopjs": "^6.1.0",
+    "concurrently": "^7.3.0",
     "css-loader": "^6.7.1",
-    "cssnano": "^5.1.7",
+    "cssnano": "^5.1.12",
     "docsearch.js": "^2.6.3",
-    "eleventy-plugin-highlightjs": "^1.0.0",
+    "eleventy-plugin-highlightjs": "^1.1.0",
     "eleventy-plugin-nesting-toc": "^1.3.0",
-    "eslint": "^8.13.0",
+    "eslint": "^8.20.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-no-unsanitized": "^4.0.1",
-    "grunt-concurrent": "^3.0.0",
     "jquery": "^3.6.0",
-    "less-loader": "^10.2.0",
+    "less-loader": "^11.0.0",
     "list.js": "^2.3.1",
-    "markdown-it": "^12.3.2",
-    "mini-css-extract-plugin": "^2.6.0",
+    "markdown-it": "^13.0.1",
+    "mini-css-extract-plugin": "^2.6.1",
     "postcss-less": "^6.0.0",
-    "postcss-loader": "^6.2.1",
-    "prettier": "^2.6.2",
-    "stylelint": "^14.6.1",
-    "stylelint-config-recommended": "^7.0.0",
-    "stylelint-config-standard": "^25.0.0",
-    "terser-webpack-plugin": "^5.3.1",
-    "ts-loader": "^9.2.8",
-    "typescript": "^4.6.3",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
+    "postcss-loader": "^7.0.1",
+    "prettier": "^2.7.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-recommended": "^8.0.0",
+    "stylelint-config-standard": "^26.0.0",
+    "terser-webpack-plugin": "^5.3.3",
+    "ts-loader": "^9.3.1",
+    "typescript": "^4.7.4",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "webpack-merge": "^5.8.0"
   },
   "browserslist": [