@primer/view-components 0.43.3-rc.7688a81a → 0.43.3-rc.8cfa102c

package/app/components/primer/alpha/action_list.js

@@ -17,7 +17,6 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
 };
 var _ActionListElement_truncationObserver;
 import { controller } from '@github/catalyst';
-// eslint-disable-next-line custom-elements/no-exports-with-element
 export class ActionListTruncationObserver {
     constructor(el) {
         this.resizeObserver = new ResizeObserver(entries => {
@@ -67,6 +66,5 @@ let ActionListElement = class ActionListElement extends HTMLElement {
 _ActionListElement_truncationObserver = new WeakMap();
 ActionListElement = __decorate([
     controller
-    // eslint-disable-next-line custom-elements/expose-class-on-global
 ], ActionListElement);
 export { ActionListElement };

package/app/components/primer/alpha/toggle_switch.js

@@ -144,6 +144,7 @@ let ToggleSwitchElement = class ToggleSwitchElement extends HTMLElement {
                 headers: requestHeaders,
                 body,
             });
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
         }
         catch (error) {
             throw new Error('A network error occurred, please try again.');

package/app/components/primer/beta/breadcrumbs.css

@@ -1 +1 @@
-.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}
+.breadcrumb-item{display:inline-block;list-style:none;margin-left:-.35em;max-width:100%}.breadcrumb-item:after{border-right:.1em solid var(--borderColor-neutral-emphasis);content:"";display:inline-block;height:.8em;margin:0 .5em;transform:rotate(15deg) translateY(.0625em)}.breadcrumb-item:first-child{margin-left:0}:is(.breadcrumb-item-selected,.breadcrumb-item[aria-current]:not([aria-current=false])):after{content:none}.breadcrumb-item-selected a{color:var(--fgColor-default);cursor:default!important;-webkit-text-decoration:none!important;text-decoration:none!important}

package/app/components/primer/beta/details_toggle_element.d.ts

@@ -3,9 +3,10 @@
  * ensures the <details> and <summary> elements markup is properly accessible by
  * updating the aria-label and aria-expanded attributes on click.
  *
- * aria-label values default to "Expand" and "Collapse". To override those
- * values, use the `data-aria-label-open` and `data-aria-label-closed`
- * attributes on the summary target.
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
  *
  * @example
  * ```html

package/app/components/primer/beta/details_toggle_element.js

@@ -10,9 +10,10 @@ import { controller, target } from '@github/catalyst';
  * ensures the <details> and <summary> elements markup is properly accessible by
  * updating the aria-label and aria-expanded attributes on click.
  *
- * aria-label values default to "Expand" and "Collapse". To override those
- * values, use the `data-aria-label-open` and `data-aria-label-closed`
- * attributes on the summary target.
+ * aria-label values are only set if provided via the `data-aria-label-open` and
+ * `data-aria-label-closed` attributes on the summary target. If these attributes
+ * are not present, no aria-label will be set, allowing screen readers to use
+ * the visible text content.
  *
  * @example
  * ```html
@@ -37,13 +38,17 @@ let DetailsToggleElement = class DetailsToggleElement extends HTMLElement {
     toggle() {
         const detailsIsOpen = this.detailsTarget.hasAttribute('open');
         if (detailsIsOpen) {
-            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed') || 'Expand';
-            this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            const ariaLabelClosed = this.summaryTarget.getAttribute('data-aria-label-closed');
+            if (ariaLabelClosed) {
+                this.summaryTarget.setAttribute('aria-label', ariaLabelClosed);
+            }
             this.summaryTarget.setAttribute('aria-expanded', 'false');
         }
         else {
-            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open') || 'Collapse';
-            this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            const ariaLabelOpen = this.summaryTarget.getAttribute('data-aria-label-open');
+            if (ariaLabelOpen) {
+                this.summaryTarget.setAttribute('aria-label', ariaLabelOpen);
+            }
             this.summaryTarget.setAttribute('aria-expanded', 'true');
         }
     }

package/app/components/primer/beta/nav_list.js

@@ -16,7 +16,6 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
 var _NavListElement_instances, _NavListElement_truncationObserver, _NavListElement_findSelectedNavItemById, _NavListElement_findSelectedNavItemByHref, _NavListElement_findSelectedNavItemByCurrentLocation, _NavListElement_select, _NavListElement_deselect, _NavListElement_findParentMenu;
-/* eslint-disable custom-elements/expose-class-on-global */
 import { controller, target, targets } from '@github/catalyst';
 import { ActionListTruncationObserver } from '../alpha/action_list';
 let NavListElement = class NavListElement extends HTMLElement {

package/app/components/primer/beta/nav_list_group_element.js

@@ -62,6 +62,7 @@ let NavListGroupElement = class NavListGroupElement extends HTMLElement {
             if (this.currentPage === this.totalPages) {
                 this.showMoreItem.hidden = true;
             }
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
         }
         catch (err) {
             // Ignore network errors

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.43.3-rc.7688a81a",
+  "version": "0.43.3-rc.8cfa102c",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -72,15 +72,12 @@
     "@primer/stylelint-config": "^13.1.1",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-typescript": "^8.3.3",
-    "@typescript-eslint/eslint-plugin": "^7.0.1",
-    "@typescript-eslint/parser": "^7.0.1",
     "axe-core": "^4.7.1",
     "chokidar-cli": "^3.0.0",
     "cssnano": "^7.0.1",
-    "eslint": "^8.23.1",
-    "eslint-plugin-custom-elements": "^0.0.8",
+    "eslint": "^9.10.0",
     "eslint-plugin-github": "^6.0.0",
-    "eslint-plugin-prettier": "^5.0.0",
+    "glob": "^11.0.2",
     "markdownlint-cli2": "^0.18.1",
     "mocha": "^11.0.1",
     "playwright": "^1.49.1",

package/static/info_arch.json

@@ -13108,6 +13108,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/details/with_aria_labels",
+        "name": "with_aria_labels",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": []

package/static/previews.json

@@ -3157,6 +3157,19 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/beta/details/with_aria_labels",
+        "name": "with_aria_labels",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ]
   },