@primer/view-components 0.50.0 → 0.50.1-rc.3cbb9623

package/app/components/primer/alpha/tree_view/tree_view_sub_tree_node_element.js

@@ -15,7 +15,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot write private member to an object whose class did not declare it");
     return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
 };
-var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_checkboxElement_get;
+var _TreeViewSubTreeNodeElement_instances, _TreeViewSubTreeNodeElement_expanded, _TreeViewSubTreeNodeElement_loadingState, _TreeViewSubTreeNodeElement_abortController, _TreeViewSubTreeNodeElement_activeElementIsLoader, _TreeViewSubTreeNodeElement_handleToggleEvent, _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent, _TreeViewSubTreeNodeElement_handleRetryButtonEvent, _TreeViewSubTreeNodeElement_handleKeyboardEvent, _TreeViewSubTreeNodeElement_handleCheckboxEvent, _TreeViewSubTreeNodeElement_update, _TreeViewSubTreeNodeElement_isIncludeFragment, _TreeViewSubTreeNodeElement_checkboxElement_get;
 import { controller, target } from '@github/catalyst';
 import { observeMutationsUntilConditionMet } from '../../utils';
 let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLElement {
@@ -134,6 +134,10 @@ let TreeViewSubTreeNodeElement = class TreeViewSubTreeNodeElement extends HTMLEl
             // sub-tree and no node in the entire tree can be focused
             const previousNode = this.subTree.querySelector("[tabindex='0']");
             previousNode?.setAttribute('tabindex', '-1');
+            // Also check if the subtree element itself is an include-fragment with role="treeitem" and has focus
+            if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this) && this.subTree.getAttribute('tabindex') === '0') {
+                this.subTree.setAttribute('tabindex', '-1');
+            }
             this.node.setAttribute('tabindex', '0');
             this.treeView.dispatchEvent(new CustomEvent('treeViewNodeCollapsed', {
                 bubbles: true,
@@ -237,6 +241,10 @@ _TreeViewSubTreeNodeElement_handleIncludeFragmentEvent = function _TreeViewSubTr
         // request succeeded but element has not yet been replaced
         case 'include-fragment-replace':
             __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, document.activeElement === this.loadingIndicator.closest('[role=treeitem]'), "f");
+            // Also check if the include-fragment itself has focus (when it has role="treeitem")
+            if (!__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, "f") && document.activeElement === this.subTree && __classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+                __classPrivateFieldSet(this, _TreeViewSubTreeNodeElement_activeElementIsLoader, true, "f");
+            }
             this.loadingState = 'success';
             break;
         case 'include-fragment-replaced':
@@ -332,6 +340,13 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
     if (this.expanded) {
         if (this.subTree)
             this.subTree.hidden = false;
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+            this.subTree.setAttribute('role', 'treeitem');
+            // Ensure the include-fragment can participate in roving tab index
+            if (!this.subTree.hasAttribute('tabindex')) {
+                this.subTree.setAttribute('tabindex', '-1');
+            }
+        }
         this.node.setAttribute('aria-expanded', 'true');
         this.treeView?.expandAncestorsForNode(this);
         if (this.iconPair) {
@@ -345,6 +360,11 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
     else {
         if (this.subTree)
             this.subTree.hidden = true;
+        if (__classPrivateFieldGet(this, _TreeViewSubTreeNodeElement_instances, "m", _TreeViewSubTreeNodeElement_isIncludeFragment).call(this)) {
+            this.subTree.removeAttribute('role');
+            // Remove tabindex when role is removed
+            this.subTree.removeAttribute('tabindex');
+        }
         this.node.setAttribute('aria-expanded', 'false');
         if (this.iconPair) {
             this.iconPair.showCollapsed();
@@ -375,6 +395,9 @@ _TreeViewSubTreeNodeElement_update = function _TreeViewSubTreeNodeElement_update
                 this.loadingFailureMessage.hidden = true;
     }
 };
+_TreeViewSubTreeNodeElement_isIncludeFragment = function _TreeViewSubTreeNodeElement_isIncludeFragment() {
+    return this.subTree?.getAttribute('data-target')?.includes('tree-view-sub-tree-node.includeFragment') ?? false;
+};
 _TreeViewSubTreeNodeElement_checkboxElement_get = function _TreeViewSubTreeNodeElement_checkboxElement_get() {
     return this.querySelector('.TreeViewItemCheckbox');
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/view-components",
-  "version": "0.50.0",
+  "version": "0.50.1-rc.3cbb9623",
   "description": "ViewComponents for the Primer Design System",
   "main": "app/assets/javascripts/primer_view_components.js",
   "module": "app/components/primer/primer.js",
@@ -78,14 +78,14 @@
     "eslint": "^9.10.0",
     "eslint-plugin-github": "^6.0.0",
     "glob": "^11.0.2",
-    "markdownlint-cli2": "^0.19.1",
+    "markdownlint-cli2": "^0.20.0",
     "mocha": "^11.0.1",
     "playwright": "^1.57.0",
     "postcss": "^8.4.16",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.0.0",
     "postcss-mixins": "^12.1.2",
-    "postcss-preset-env": "^10.0.2",
+    "postcss-preset-env": "^11.1.2",
     "prettier": "^3.3.2",
     "rollup": "^2.79.1",
     "rollup-plugin-terser": "^7.0.2",

package/static/info_arch.json

@@ -4629,7 +4629,7 @@
   {
     "fully_qualified_name": "Primer::Alpha::Layout",
     "description": "`Layout` provides foundational patterns for responsive pages.\n`Layout` can be used for simple two-column pages, or it can be nested to provide flexible 3-column experiences.\n On smaller screens, `Layout` uses vertically stacked rows to display content.\n\n`Layout` flows as both column, when there's enough horizontal space to render both `Main` and `Sidebar`side-by-side (on a desktop of tablet device, per instance);\nor it flows as a row, when `Main` and `Sidebar` are stacked vertically (e.g. on a mobile device).\n`Layout` should always work in any screen size.",
-    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won’t affect the visual position.",
+    "accessibility_docs": "Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether\n`main` or `sidebar` comes first in code. The code order won't affect the visual position.\n\nWhen using `row_placement: :none` on the sidebar, the sidebar content will be hidden at narrow viewports.\nThis may cause WCAG 1.4.10 Reflow failures if the sidebar contains essential content. Only use `:none`\nwhen the sidebar content is non-essential or available elsewhere on the page.",
     "is_form_component": false,
     "is_published": true,
     "requires_js": false,
@@ -4704,7 +4704,7 @@
             "name": "row_placement",
             "type": "Symbol",
             "default": "N/A",
-            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`."
+            "description": "Sidebar placement when `Layout` is in row mode. One of `:end`, `:none`, or `:start`. **Note:** Using `:none` hides the sidebar at narrow viewports, which may cause WCAG 1.4.10 Reflow issues if the sidebar contains essential content."
           },
           {
             "name": "system_arguments",