From a02cd0e5ce6c3b6d647851a0e57a7ef4e4d6da34 Mon Sep 17 00:00:00 2001
From: Peter Stenger <peter@prairielearn.com>
Date: Wed, 2 Jul 2025 13:33:33 -0500
Subject: [PATCH 1/3] Initial commit

---
 docs/rules.md                                 |   1 +
 docs/rules/group-attrs.md                     | 148 +++++++++++
 .../eslint-plugin/lib/rules/group-attrs.js    | 232 +++++++++++++++++
 packages/eslint-plugin/lib/rules/index.js     |   2 +
 .../tests/rules/group-attrs.test.js           | 244 ++++++++++++++++++
 5 files changed, 627 insertions(+)
 create mode 100644 docs/rules/group-attrs.md
 create mode 100644 packages/eslint-plugin/lib/rules/group-attrs.js
 create mode 100644 packages/eslint-plugin/tests/rules/group-attrs.test.js

diff --git a/docs/rules.md b/docs/rules.md
index bd657d78..52996b1c 100644
--- a/docs/rules.md
+++ b/docs/rules.md
@@ -68,6 +68,7 @@
 | -------------------------------------------------------- | ----------------------------------------------------------------- | ---- |
 | [attrs-newline](rules/attrs-newline)                     | Enforce newline between attributes                                | ⭐🔧 |
 | [element-newline](rules/element-newline)                 | Enforce newline between elements.                                 | ⭐🔧 |
+| [group-attrs](rules/group-attrs)                         | Enforce grouping and ordering of related attributes               | 🔧   |
 | [id-naming-convention](rules/id-naming-convention)       | Enforce consistent naming id attributes                           |      |
 | [indent](rules/indent)                                   | Enforce consistent indentation                                    | ⭐🔧 |
 | [lowercase](rules/lowercase)                             | Enforce to use lowercase for tag and attribute names.             | 🔧   |
diff --git a/docs/rules/group-attrs.md b/docs/rules/group-attrs.md
new file mode 100644
index 00000000..1b365ea5
--- /dev/null
+++ b/docs/rules/group-attrs.md
@@ -0,0 +1,148 @@
+# group-attrs
+
+Enforce grouping and ordering of related attributes.
+
+## How to use
+
+```js,.eslintrc.js
+module.exports = {
+  rules: {
+    "@html-eslint/group-attrs": "error",
+  },
+};
+```
+
+## Rule Details
+
+This rule ensures that related attributes are placed next to each other when multiple attributes from the same group are present on an element. It also ensures that attributes are in the correct order within their group.
+
+If only some attributes from a group are present (partial groups), they are still grouped together. For example, if you have a group `["left", "top", "right", "bottom"]` and only `left` and `top` are present, they should be adjacent to each other.
+
+Examples of **incorrect** code for this rule:
+
+```html
+<!-- min and max are separated by type -->
+<input min="5" type="text" max="10">
+
+<!-- width and height are separated by src and alt -->
+<img width="100" src="image.jpg" height="200" alt="Image">
+
+<!-- minlength and maxlength are separated by placeholder -->
+<textarea minlength="10" placeholder="Enter text" maxlength="100"></textarea>
+
+<!-- aria-labelledby and aria-describedby are separated by class -->
+<div aria-labelledby="label1" class="container" aria-describedby="desc1"></div>
+
+<!-- Partial groups: only some attributes from a group are present, but separated -->
+<div left="10" class="box" top="20"></div>
+
+<!-- Multiple attributes from positioning group separated -->
+<div left="0" width="100" top="10" height="50" right="100"></div>
+```
+
+Examples of **correct** code for this rule:
+
+```html
+<!-- Related attributes are grouped together -->
+<input min="5" max="10" type="text">
+
+<!-- Related attributes are grouped together -->
+<img width="100" height="200" src="image.jpg" alt="Image">
+
+<!-- Related attributes are grouped together -->
+<textarea minlength="10" maxlength="100" placeholder="Enter text"></textarea>
+
+<!-- Related attributes are grouped together -->
+<div aria-labelledby="label1" aria-describedby="desc1" class="container"></div>
+
+<!-- Partial groups: multiple attributes from the same group are together -->
+<div left="10" top="20" class="box"></div>
+
+<!-- Multiple positioning attributes grouped together -->
+<div left="0" top="10" right="100" width="100" height="50"></div>
+
+<!-- Only one attribute from a group (no violation) -->
+<input min="5" type="text">
+
+<!-- No related attributes present -->
+<input type="text" name="example">
+```
+
+### Options
+
+This rule accepts an options object with the following properties:
+
+- `groups`: Array of attribute groups that should be kept together and in order.
+
+```ts
+//...
+"@html-eslint/group-attrs": ["error", {
+  "groups": Array<Array<string>>
+}]
+```
+
+#### groups
+
+Default:
+
+```js
+[
+  ["min", "max"],
+  ["minlength", "maxlength"], 
+  ["width", "height"],
+  ["aria-labelledby", "aria-describedby"],
+  ["data-min", "data-max"],
+  ["left", "top", "right", "bottom"]
+]
+```
+
+Defines arrays of attribute names that should be grouped together when present.
+
+Example configuration:
+
+```js,.eslintrc.js
+module.exports = {
+  rules: {
+    "@html-eslint/group-attrs": [
+      "error",
+      {
+        groups: [
+          ["min", "max"],
+          ["data-start", "data-end"],
+          ["x", "y"],
+          ["left", "top", "right", "bottom"]
+        ]
+      }
+    ],
+  },
+};
+```
+
+With this configuration:
+
+```html
+<!-- ❌ Incorrect: data-start and data-end are separated -->
+<div data-start="0" class="slider" data-end="100"></div>
+
+<!-- ✅ Correct: data-start and data-end are grouped -->
+<div data-start="0" data-end="100" class="slider"></div>
+
+<!-- ❌ Incorrect: x and y are separated -->
+<rect x="10" fill="red" y="20"></rect>
+
+<!-- ✅ Correct: x and y are grouped -->
+<rect x="10" y="20" fill="red"></rect>
+
+<!-- ❌ Incorrect: partial group separated (only 3 out of 4 positioning attributes) -->
+<div left="0" width="100" top="10" right="100"></div>
+
+<!-- ✅ Correct: partial group together -->
+<div left="0" top="10" right="100" width="100"></div>
+```
+
+## When Not To Use It
+
+You might want to disable this rule if:
+
+- You have `@html-eslint/sort-attrs` enabled
+- You have specific semantic groupings that don't align with the default groups
\ No newline at end of file
diff --git a/packages/eslint-plugin/lib/rules/group-attrs.js b/packages/eslint-plugin/lib/rules/group-attrs.js
new file mode 100644
index 00000000..01c988db
--- /dev/null
+++ b/packages/eslint-plugin/lib/rules/group-attrs.js
@@ -0,0 +1,232 @@
+/**
+ * @import {Attribute} from "@html-eslint/types";
+ * @import {RuleModule} from "../types";
+ *
+ * @typedef {Object} Option
+ * @property {string[][]} [Option.groups] - Array of attribute groups that should be kept together and in order
+ */
+
+const { RULE_CATEGORY } = require("../constants");
+const { createVisitors } = require("./utils/visitors");
+const { getRuleUrl } = require("./utils/rule");
+const { getSourceCode } = require("./utils/source-code");
+
+const MESSAGE_IDS = {
+  NOT_GROUPED: "notGrouped",
+  WRONG_ORDER: "wrongOrder",
+};
+
+/**
+ * Default attribute groups that are commonly related.
+ * When multiple attributes from the same group are present,
+ * they should be placed next to each other in the specified order.
+ */
+const DEFAULT_GROUPS = [
+  ["min", "max"],
+  ["minlength", "maxlength"],
+  ["width", "height"],
+  ["aria-labelledby", "aria-describedby"],
+  ["data-min", "data-max"],
+  ["left", "top", "right", "bottom"],
+];
+
+/**
+ * @type {RuleModule<[Option]>}
+ */
+module.exports = {
+  meta: {
+    type: "code",
+
+    docs: {
+      description: "Enforce grouping and ordering of related attributes",
+      category: RULE_CATEGORY.STYLE,
+      recommended: false,
+      url: getRuleUrl("group-attrs"),
+    },
+
+    fixable: "code",
+    schema: [
+      {
+        type: "object",
+        properties: {
+          groups: {
+            type: "array",
+            items: {
+              type: "array",
+              items: {
+                type: "string",
+              },
+              minItems: 2,
+            },
+          },
+        },
+        additionalProperties: false,
+      },
+    ],
+    messages: {
+      [MESSAGE_IDS.NOT_GROUPED]: 
+        "Related attributes should be grouped together: {{attrs}} (found separated by: {{separator}})",
+      [MESSAGE_IDS.WRONG_ORDER]:
+        "Related attributes should be in the correct order: {{attrs}} (expected order: {{expectedOrder}})",
+    },
+  },
+
+  create(context) {
+    const options = context.options[0] || {};
+    const groups = options.groups || DEFAULT_GROUPS;
+
+    /**
+     * @param {Attribute[]} attributes
+     */
+    function checkAttributes(attributes) {
+      if (attributes.length <= 1) {
+        return;
+      }
+
+      for (const group of groups) {
+        /** @type {string[]} */
+        const foundAttrs = [];
+        /** @type {number[]} */
+        const indices = [];
+        
+        // Find which attributes from this group are present
+        for (let i = 0; i < attributes.length; i++) {
+          const attr = attributes[i];
+          if (group.includes(attr.key.value)) {
+            foundAttrs.push(attr.key.value);
+            indices.push(i);
+          }
+        }
+        
+        // If we have multiple attributes from this group, check violations
+        if (foundAttrs.length > 1) {
+          const firstIndex = indices[0];
+          const lastIndex = indices[indices.length - 1];
+          
+          // Check if indices are consecutive
+          const isConsecutive = indices.every((index, i) => 
+            i === 0 || index === indices[i - 1] + 1
+          );
+          
+          if (!isConsecutive) {
+            // Grouping violation: attributes are not together
+            const separatorAttrs = [];
+            for (let i = firstIndex + 1; i < lastIndex; i++) {
+              if (!indices.includes(i)) {
+                separatorAttrs.push(attributes[i].key.value);
+              }
+            }
+            
+            context.report({
+              loc: {
+                start: attributes[firstIndex].loc.start,
+                end: attributes[lastIndex].loc.end,
+              },
+              messageId: MESSAGE_IDS.NOT_GROUPED,
+              data: {
+                attrs: foundAttrs.join(", "),
+                separator: separatorAttrs.join(", "),
+              },
+              fix(fixer) {
+                return fixAttributeOrder(fixer, attributes, indices, group, foundAttrs);
+              },
+            });
+            return; // Only report one violation at a time
+          } else {
+            // Check ordering violation: attributes are together but in wrong order
+            const expectedOrder = group.filter(attr => foundAttrs.includes(attr));
+            const isCorrectOrder = foundAttrs.every((attr, i) => attr === expectedOrder[i]);
+            
+            if (!isCorrectOrder) {
+              context.report({
+                loc: {
+                  start: attributes[firstIndex].loc.start,
+                  end: attributes[lastIndex].loc.end,
+                },
+                messageId: MESSAGE_IDS.WRONG_ORDER,
+                data: {
+                  attrs: foundAttrs.join(", "),
+                  expectedOrder: expectedOrder.join(", "),
+                },
+                fix(fixer) {
+                  return fixAttributeOrder(fixer, attributes, indices, group, foundAttrs);
+                },
+              });
+              return; // Only report one violation at a time
+            }
+          }
+        }
+      }
+    }
+
+    /**
+     * Fix attribute order by grouping and sorting them correctly
+     * @param {*} fixer
+     * @param {Attribute[]} attributes
+     * @param {number[]} indices
+     * @param {string[]} group
+     * @param {string[]} foundAttrs
+     */
+    function fixAttributeOrder(fixer, attributes, indices, group, foundAttrs) {
+      const sourceCode = getSourceCode(context);
+      const source = sourceCode.getText();
+      
+      // Get the attributes that need to be reordered
+      const attrsToReorder = indices.map(i => attributes[i]);
+      
+      // Sort them according to the group order
+      const expectedOrder = group.filter(attr => foundAttrs.includes(attr));
+      attrsToReorder.sort((a, b) => {
+        const aIndex = expectedOrder.indexOf(a.key.value);
+        const bIndex = expectedOrder.indexOf(b.key.value);
+        return aIndex - bIndex;
+      });
+      
+             // Create a fixed version of all attributes by building the new arrangement
+       const fixed = [];
+       let groupInserted = false;
+       const targetInsertIndex = Math.min(...indices); // Insert grouped attrs at position of first occurrence
+       
+       for (let i = 0; i < attributes.length; i++) {
+         if (i === targetInsertIndex && !groupInserted) {
+           // Insert the grouped/reordered attributes at the position of first occurrence
+           fixed.push(...attrsToReorder);
+           groupInserted = true;
+         } else if (!indices.includes(i)) {
+           // Only add non-grouped attributes
+           fixed.push(attributes[i]);
+         }
+         // Skip attributes that are part of the group (they're already inserted above)
+       }
+      
+      // Build the replacement text
+      let result = "";
+      for (let i = 0; i < fixed.length; i++) {
+        const attr = fixed[i];
+        result += source.slice(attr.range[0], attr.range[1]);
+        
+        // Add spacing between attributes
+        if (i < fixed.length - 1) {
+          result += " ";
+        }
+      }
+      
+      return fixer.replaceTextRange(
+        [attributes[0].range[0], attributes[attributes.length - 1].range[1]],
+        result
+      );
+    }
+
+    return createVisitors(context, {
+      Tag(node) {
+        checkAttributes(node.attributes);
+      },
+      ScriptTag(node) {
+        checkAttributes(node.attributes);
+      },
+      StyleTag(node) {
+        checkAttributes(node.attributes);
+      },
+    });
+  },
+};
diff --git a/packages/eslint-plugin/lib/rules/index.js b/packages/eslint-plugin/lib/rules/index.js
index 1a3113c0..9d8929a6 100644
--- a/packages/eslint-plugin/lib/rules/index.js
+++ b/packages/eslint-plugin/lib/rules/index.js
@@ -51,6 +51,7 @@ const noDuplicateClass = require("./no-duplicate-class");
 const noEmptyHeadings = require("./no-empty-headings");
 const noInvalidEntity = require("./no-invalid-entity");
 const noDuplicateInHead = require("./no-duplicate-in-head");
+const groupAttrs = require("./group-attrs");
 // import new rule here ↑
 // DO NOT REMOVE THIS COMMENT
 
@@ -108,6 +109,7 @@ const rules = {
   "no-empty-headings": noEmptyHeadings,
   "no-invalid-entity": noInvalidEntity,
   "no-duplicate-in-head": noDuplicateInHead,
+  "group-attrs": groupAttrs,
   // export new rule here ↑
   // DO NOT REMOVE THIS COMMENT
 };
diff --git a/packages/eslint-plugin/tests/rules/group-attrs.test.js b/packages/eslint-plugin/tests/rules/group-attrs.test.js
new file mode 100644
index 00000000..f7097d4a
--- /dev/null
+++ b/packages/eslint-plugin/tests/rules/group-attrs.test.js
@@ -0,0 +1,244 @@
+const createRuleTester = require("../rule-tester");
+const rule = require("../../lib/rules/group-attrs");
+
+const ruleTester = createRuleTester();
+const templateRuleTester = createRuleTester("espree");
+
+ruleTester.run("group-attrs", rule, {
+  valid: [
+    // Basic valid cases
+    {
+      code: '<input min="5" max="10">',
+    },
+    {
+      code: '<div width="100" height="200">',
+    },
+    {
+      code: '<textarea minlength="5" maxlength="100">',
+    },
+    
+    // Only one attribute from a group
+    {
+      code: '<input min="5">',
+    },
+    {
+      code: '<input max="10">',
+    },
+    {
+      code: '<div width="100">',
+    },
+    
+    // No related attributes
+    {
+      code: '<input type="text" name="test">',
+    },
+    {
+      code: '<div class="test" id="example">',
+    },
+    
+    // Custom groups configuration
+    {
+      code: '<input data-start="1" data-end="10">',
+      options: [{ groups: [["data-start", "data-end"]] }],
+    },
+    
+    // Partial groups - only some attributes from a group present
+    {
+      code: '<div left="10" top="20">',
+    },
+    {
+      code: '<div left="10" top="20" class="test">',
+    },
+    {
+      code: '<input min="5" class="field">',
+    },
+    
+    // Empty attributes
+    {
+      code: '<div></div>',
+    },
+    
+    // Single attribute
+    {
+      code: '<input type="text">',
+    },
+  ],
+  invalid: [
+    // Basic min/max separation
+    {
+      code: '<input min="5" type="text" max="10">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "min, max",
+            separator: "type",
+          },
+        },
+      ],
+      output: '<input min="5" max="10" type="text">',
+    },
+    
+    // Wrong order within group
+    {
+      code: '<input max="10" min="5">',
+      errors: [
+        {
+          messageId: "wrongOrder",
+          data: {
+            attrs: "max, min",
+            expectedOrder: "min, max",
+          },
+        },
+      ],
+      output: '<input min="5" max="10">',
+    },
+    
+    // minlength/maxlength separation
+    {
+      code: '<textarea minlength="5" placeholder="Enter text" maxlength="100">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "minlength, maxlength",
+            separator: "placeholder",
+          },
+        },
+      ],
+      output: '<textarea minlength="5" maxlength="100" placeholder="Enter text">',
+    },
+    
+    // width/height separation
+    {
+      code: '<img width="100" src="test.jpg" height="200" alt="Test">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "width, height",
+            separator: "src",
+          },
+        },
+      ],
+      output: '<img width="100" height="200" src="test.jpg" alt="Test">',
+    },
+    
+    // Multiple separators
+    {
+      code: '<input min="5" type="text" name="test" max="10">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "min, max",
+            separator: "type, name",
+          },
+        },
+      ],
+      output: '<input min="5" max="10" type="text" name="test">',
+    },
+    
+    // aria attributes separation
+    {
+      code: '<div aria-labelledby="label1" class="test" aria-describedby="desc1">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "aria-labelledby, aria-describedby",
+            separator: "class",
+          },
+        },
+      ],
+      output: '<div aria-labelledby="label1" aria-describedby="desc1" class="test">',
+    },
+    
+    // Custom groups
+    {
+      code: '<input data-start="1" type="text" data-end="10">',
+      options: [{ groups: [["data-start", "data-end"]] }],
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "data-start, data-end",
+            separator: "type",
+          },
+        },
+      ],
+      output: '<input data-start="1" data-end="10" type="text">',
+    },
+    
+    // Partial groups - only some attributes from a group, but they should still be together
+    {
+      code: '<div left="10" class="box" top="20">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "left, top",
+            separator: "class",
+          },
+        },
+      ],
+      output: '<div left="10" top="20" class="box">',
+    },
+    
+    // Partial groups with 3 out of 4 attributes present
+    {
+      code: '<div left="0" width="100" top="10" height="50" right="100">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "width, height",
+            separator: "top",
+          },
+        },
+      ],
+      output: '<div left="0" width="100" height="50" top="10" right="100">',
+    },
+    
+    // Multiple violations - only first one will be reported/fixed
+    {
+      code: '<input min="5" type="text" max="10" width="100" class="test" height="200">',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "min, max",
+            separator: "type",
+          },
+        },
+      ],
+      output: '<input min="5" max="10" type="text" width="100" class="test" height="200">',
+    },
+  ],
+});
+
+templateRuleTester.run("[template] group-attrs", rule, {
+  valid: [
+    {
+      code: 'html`<input min="\\${min}" max="\\${max}">`',
+    },
+    {
+      code: 'html`<div width="100" height="200">`',
+    },
+  ],
+  invalid: [
+    {
+      code: 'html`<input min="\\${min}" type="text" max="\\${max}">`',
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "min, max",
+            separator: "type",
+          },
+        },
+      ],
+      output: 'html`<input min="\\${min}" max="\\${max}" type="text">`',
+    },
+  ],
+});

From 403e71ec2961fbf3bd4d0e465714041c186248ff Mon Sep 17 00:00:00 2001
From: Peter Stenger <peter@prairielearn.com>
Date: Wed, 2 Jul 2025 16:19:56 -0500
Subject: [PATCH 2/3] yarn format, add more rules

---
 docs/rules/group-attrs.md                     |  20 +--
 .../eslint-plugin/lib/rules/group-attrs.js    | 141 +++++++++++++-----
 .../tests/rules/group-attrs.test.js           |  41 ++---
 3 files changed, 134 insertions(+), 68 deletions(-)

diff --git a/docs/rules/group-attrs.md b/docs/rules/group-attrs.md
index 1b365ea5..6dcd1c20 100644
--- a/docs/rules/group-attrs.md
+++ b/docs/rules/group-attrs.md
@@ -22,10 +22,10 @@ Examples of **incorrect** code for this rule:
 
 ```html
 <!-- min and max are separated by type -->
-<input min="5" type="text" max="10">
+<input min="5" type="text" max="10" />
 
 <!-- width and height are separated by src and alt -->
-<img width="100" src="image.jpg" height="200" alt="Image">
+<img width="100" src="image.jpg" height="200" alt="Image" />
 
 <!-- minlength and maxlength are separated by placeholder -->
 <textarea minlength="10" placeholder="Enter text" maxlength="100"></textarea>
@@ -44,10 +44,10 @@ Examples of **correct** code for this rule:
 
 ```html
 <!-- Related attributes are grouped together -->
-<input min="5" max="10" type="text">
+<input min="5" max="10" type="text" />
 
 <!-- Related attributes are grouped together -->
-<img width="100" height="200" src="image.jpg" alt="Image">
+<img width="100" height="200" src="image.jpg" alt="Image" />
 
 <!-- Related attributes are grouped together -->
 <textarea minlength="10" maxlength="100" placeholder="Enter text"></textarea>
@@ -62,10 +62,10 @@ Examples of **correct** code for this rule:
 <div left="0" top="10" right="100" width="100" height="50"></div>
 
 <!-- Only one attribute from a group (no violation) -->
-<input min="5" type="text">
+<input min="5" type="text" />
 
 <!-- No related attributes present -->
-<input type="text" name="example">
+<input type="text" name="example" />
 ```
 
 ### Options
@@ -88,12 +88,12 @@ Default:
 ```js
 [
   ["min", "max"],
-  ["minlength", "maxlength"], 
+  ["minlength", "maxlength"],
   ["width", "height"],
   ["aria-labelledby", "aria-describedby"],
   ["data-min", "data-max"],
-  ["left", "top", "right", "bottom"]
-]
+  ["left", "top", "right", "bottom"],
+];
 ```
 
 Defines arrays of attribute names that should be grouped together when present.
@@ -145,4 +145,4 @@ With this configuration:
 You might want to disable this rule if:
 
 - You have `@html-eslint/sort-attrs` enabled
-- You have specific semantic groupings that don't align with the default groups
\ No newline at end of file
+- You have specific semantic groupings that don't align with the default groups
diff --git a/packages/eslint-plugin/lib/rules/group-attrs.js b/packages/eslint-plugin/lib/rules/group-attrs.js
index 01c988db..d81d9cf9 100644
--- a/packages/eslint-plugin/lib/rules/group-attrs.js
+++ b/packages/eslint-plugin/lib/rules/group-attrs.js
@@ -23,10 +23,57 @@ const MESSAGE_IDS = {
  */
 const DEFAULT_GROUPS = [
   ["min", "max"],
+  ["low", "high"],
+  ["src", "srcset", "alt"],
+  ["cols", "rows"],
+  ["type", "name", "value"],
+  ["shadowrootclonable", "shadowrootdelegatesfocus", "shadowrootmode"],
+  ["formaction", "formmethod", "formtarget"],
   ["minlength", "maxlength"],
+  ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-valuetext"],
+  ["aria-rowindex", "aria-colindex"],
+  ["aria-rowspan", "aria-colspan"],
+  ["aria-rowcount", "aria-colcount"],
   ["width", "height"],
-  ["aria-labelledby", "aria-describedby"],
-  ["data-min", "data-max"],
+  ["aria-label", "aria-labelledby", "aria-describedby"],
+  ["aria-expanded", "aria-haspopup"],
+  // Group remaining ARIA attributes
+  [
+    "role",
+    "aria-activedescendant",
+    "aria-atomic",
+    "aria-autocomplete",
+    "aria-busy",
+    "aria-checked",
+    "aria-controls",
+    "aria-current",
+    "aria-details",
+    "aria-disabled",
+    "aria-dropeffect",
+    "aria-errormessage",
+    "aria-flowto",
+    "aria-grabbed",
+    "aria-hidden",
+    "aria-invalid",
+    "aria-keyshortcuts",
+    "aria-level",
+    "aria-live",
+    "aria-modal",
+    "aria-multiline",
+    "aria-multiselectable",
+    "aria-orientation",
+    "aria-owns",
+    "aria-placeholder",
+    "aria-posinset",
+    "aria-pressed",
+    "aria-readonly",
+    "aria-relevant",
+    "aria-required",
+    "aria-roledescription",
+    "aria-selected",
+    "aria-setsize",
+    "aria-sort",
+  ],
   ["left", "top", "right", "bottom"],
 ];
 
@@ -64,7 +111,7 @@ module.exports = {
       },
     ],
     messages: {
-      [MESSAGE_IDS.NOT_GROUPED]: 
+      [MESSAGE_IDS.NOT_GROUPED]:
         "Related attributes should be grouped together: {{attrs}} (found separated by: {{separator}})",
       [MESSAGE_IDS.WRONG_ORDER]:
         "Related attributes should be in the correct order: {{attrs}} (expected order: {{expectedOrder}})",
@@ -88,7 +135,7 @@ module.exports = {
         const foundAttrs = [];
         /** @type {number[]} */
         const indices = [];
-        
+
         // Find which attributes from this group are present
         for (let i = 0; i < attributes.length; i++) {
           const attr = attributes[i];
@@ -97,17 +144,17 @@ module.exports = {
             indices.push(i);
           }
         }
-        
+
         // If we have multiple attributes from this group, check violations
         if (foundAttrs.length > 1) {
           const firstIndex = indices[0];
           const lastIndex = indices[indices.length - 1];
-          
+
           // Check if indices are consecutive
-          const isConsecutive = indices.every((index, i) => 
-            i === 0 || index === indices[i - 1] + 1
+          const isConsecutive = indices.every(
+            (index, i) => i === 0 || index === indices[i - 1] + 1
           );
-          
+
           if (!isConsecutive) {
             // Grouping violation: attributes are not together
             const separatorAttrs = [];
@@ -116,7 +163,7 @@ module.exports = {
                 separatorAttrs.push(attributes[i].key.value);
               }
             }
-            
+
             context.report({
               loc: {
                 start: attributes[firstIndex].loc.start,
@@ -128,15 +175,25 @@ module.exports = {
                 separator: separatorAttrs.join(", "),
               },
               fix(fixer) {
-                return fixAttributeOrder(fixer, attributes, indices, group, foundAttrs);
+                return fixAttributeOrder(
+                  fixer,
+                  attributes,
+                  indices,
+                  group,
+                  foundAttrs
+                );
               },
             });
             return; // Only report one violation at a time
           } else {
             // Check ordering violation: attributes are together but in wrong order
-            const expectedOrder = group.filter(attr => foundAttrs.includes(attr));
-            const isCorrectOrder = foundAttrs.every((attr, i) => attr === expectedOrder[i]);
-            
+            const expectedOrder = group.filter((attr) =>
+              foundAttrs.includes(attr)
+            );
+            const isCorrectOrder = foundAttrs.every(
+              (attr, i) => attr === expectedOrder[i]
+            );
+
             if (!isCorrectOrder) {
               context.report({
                 loc: {
@@ -149,7 +206,13 @@ module.exports = {
                   expectedOrder: expectedOrder.join(", "),
                 },
                 fix(fixer) {
-                  return fixAttributeOrder(fixer, attributes, indices, group, foundAttrs);
+                  return fixAttributeOrder(
+                    fixer,
+                    attributes,
+                    indices,
+                    group,
+                    foundAttrs
+                  );
                 },
               });
               return; // Only report one violation at a time
@@ -170,47 +233,47 @@ module.exports = {
     function fixAttributeOrder(fixer, attributes, indices, group, foundAttrs) {
       const sourceCode = getSourceCode(context);
       const source = sourceCode.getText();
-      
+
       // Get the attributes that need to be reordered
-      const attrsToReorder = indices.map(i => attributes[i]);
-      
+      const attrsToReorder = indices.map((i) => attributes[i]);
+
       // Sort them according to the group order
-      const expectedOrder = group.filter(attr => foundAttrs.includes(attr));
+      const expectedOrder = group.filter((attr) => foundAttrs.includes(attr));
       attrsToReorder.sort((a, b) => {
         const aIndex = expectedOrder.indexOf(a.key.value);
         const bIndex = expectedOrder.indexOf(b.key.value);
         return aIndex - bIndex;
       });
-      
-             // Create a fixed version of all attributes by building the new arrangement
-       const fixed = [];
-       let groupInserted = false;
-       const targetInsertIndex = Math.min(...indices); // Insert grouped attrs at position of first occurrence
-       
-       for (let i = 0; i < attributes.length; i++) {
-         if (i === targetInsertIndex && !groupInserted) {
-           // Insert the grouped/reordered attributes at the position of first occurrence
-           fixed.push(...attrsToReorder);
-           groupInserted = true;
-         } else if (!indices.includes(i)) {
-           // Only add non-grouped attributes
-           fixed.push(attributes[i]);
-         }
-         // Skip attributes that are part of the group (they're already inserted above)
-       }
-      
+
+      // Create a fixed version of all attributes by building the new arrangement
+      const fixed = [];
+      let groupInserted = false;
+      const targetInsertIndex = Math.min(...indices); // Insert grouped attrs at position of first occurrence
+
+      for (let i = 0; i < attributes.length; i++) {
+        if (i === targetInsertIndex && !groupInserted) {
+          // Insert the grouped/reordered attributes at the position of first occurrence
+          fixed.push(...attrsToReorder);
+          groupInserted = true;
+        } else if (!indices.includes(i)) {
+          // Only add non-grouped attributes
+          fixed.push(attributes[i]);
+        }
+        // Skip attributes that are part of the group (they're already inserted above)
+      }
+
       // Build the replacement text
       let result = "";
       for (let i = 0; i < fixed.length; i++) {
         const attr = fixed[i];
         result += source.slice(attr.range[0], attr.range[1]);
-        
+
         // Add spacing between attributes
         if (i < fixed.length - 1) {
           result += " ";
         }
       }
-      
+
       return fixer.replaceTextRange(
         [attributes[0].range[0], attributes[attributes.length - 1].range[1]],
         result
diff --git a/packages/eslint-plugin/tests/rules/group-attrs.test.js b/packages/eslint-plugin/tests/rules/group-attrs.test.js
index f7097d4a..d02ce6ec 100644
--- a/packages/eslint-plugin/tests/rules/group-attrs.test.js
+++ b/packages/eslint-plugin/tests/rules/group-attrs.test.js
@@ -16,7 +16,7 @@ ruleTester.run("group-attrs", rule, {
     {
       code: '<textarea minlength="5" maxlength="100">',
     },
-    
+
     // Only one attribute from a group
     {
       code: '<input min="5">',
@@ -27,7 +27,7 @@ ruleTester.run("group-attrs", rule, {
     {
       code: '<div width="100">',
     },
-    
+
     // No related attributes
     {
       code: '<input type="text" name="test">',
@@ -35,13 +35,13 @@ ruleTester.run("group-attrs", rule, {
     {
       code: '<div class="test" id="example">',
     },
-    
+
     // Custom groups configuration
     {
       code: '<input data-start="1" data-end="10">',
       options: [{ groups: [["data-start", "data-end"]] }],
     },
-    
+
     // Partial groups - only some attributes from a group present
     {
       code: '<div left="10" top="20">',
@@ -52,12 +52,12 @@ ruleTester.run("group-attrs", rule, {
     {
       code: '<input min="5" class="field">',
     },
-    
+
     // Empty attributes
     {
-      code: '<div></div>',
+      code: "<div></div>",
     },
-    
+
     // Single attribute
     {
       code: '<input type="text">',
@@ -78,7 +78,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<input min="5" max="10" type="text">',
     },
-    
+
     // Wrong order within group
     {
       code: '<input max="10" min="5">',
@@ -93,7 +93,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<input min="5" max="10">',
     },
-    
+
     // minlength/maxlength separation
     {
       code: '<textarea minlength="5" placeholder="Enter text" maxlength="100">',
@@ -106,9 +106,10 @@ ruleTester.run("group-attrs", rule, {
           },
         },
       ],
-      output: '<textarea minlength="5" maxlength="100" placeholder="Enter text">',
+      output:
+        '<textarea minlength="5" maxlength="100" placeholder="Enter text">',
     },
-    
+
     // width/height separation
     {
       code: '<img width="100" src="test.jpg" height="200" alt="Test">',
@@ -123,7 +124,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<img width="100" height="200" src="test.jpg" alt="Test">',
     },
-    
+
     // Multiple separators
     {
       code: '<input min="5" type="text" name="test" max="10">',
@@ -138,7 +139,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<input min="5" max="10" type="text" name="test">',
     },
-    
+
     // aria attributes separation
     {
       code: '<div aria-labelledby="label1" class="test" aria-describedby="desc1">',
@@ -151,9 +152,10 @@ ruleTester.run("group-attrs", rule, {
           },
         },
       ],
-      output: '<div aria-labelledby="label1" aria-describedby="desc1" class="test">',
+      output:
+        '<div aria-labelledby="label1" aria-describedby="desc1" class="test">',
     },
-    
+
     // Custom groups
     {
       code: '<input data-start="1" type="text" data-end="10">',
@@ -169,7 +171,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<input data-start="1" data-end="10" type="text">',
     },
-    
+
     // Partial groups - only some attributes from a group, but they should still be together
     {
       code: '<div left="10" class="box" top="20">',
@@ -184,7 +186,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<div left="10" top="20" class="box">',
     },
-    
+
     // Partial groups with 3 out of 4 attributes present
     {
       code: '<div left="0" width="100" top="10" height="50" right="100">',
@@ -199,7 +201,7 @@ ruleTester.run("group-attrs", rule, {
       ],
       output: '<div left="0" width="100" height="50" top="10" right="100">',
     },
-    
+
     // Multiple violations - only first one will be reported/fixed
     {
       code: '<input min="5" type="text" max="10" width="100" class="test" height="200">',
@@ -212,7 +214,8 @@ ruleTester.run("group-attrs", rule, {
           },
         },
       ],
-      output: '<input min="5" max="10" type="text" width="100" class="test" height="200">',
+      output:
+        '<input min="5" max="10" type="text" width="100" class="test" height="200">',
     },
   ],
 });

From 89c2dea7b883f2142dbc5460099583eb5663b590 Mon Sep 17 00:00:00 2001
From: Peter Stenger <peter@prairielearn.com>
Date: Sun, 6 Jul 2025 22:23:21 -0500
Subject: [PATCH 3/3] add regex

---
 docs/rules/group-attrs.md                     |  83 ++++-
 .../eslint-plugin/lib/rules/group-attrs.js    | 289 +++++++++++-------
 .../tests/rules/group-attrs.test.js           | 199 +++++++++++-
 3 files changed, 458 insertions(+), 113 deletions(-)

diff --git a/docs/rules/group-attrs.md b/docs/rules/group-attrs.md
index 6dcd1c20..95c6c83e 100644
--- a/docs/rules/group-attrs.md
+++ b/docs/rules/group-attrs.md
@@ -96,7 +96,7 @@ Default:
 ];
 ```
 
-Defines arrays of attribute names that should be grouped together when present.
+Defines arrays of attribute names that should be grouped together when present. Regex patterns are supported, and if an attribute matches multiple patterns, it will only be affected by the first matching pattern.
 
 Example configuration:
 
@@ -108,7 +108,7 @@ module.exports = {
       {
         groups: [
           ["min", "max"],
-          ["data-start", "data-end"],
+          ["/^data-/"],
           ["x", "y"],
           ["left", "top", "right", "bottom"]
         ]
@@ -140,6 +140,85 @@ With this configuration:
 <div left="0" top="10" right="100" width="100"></div>
 ```
 
+#### Regex Groups and Alphabetical Sorting
+
+If a group is defined as a single regex pattern (for example, ["/^data-/"]), then all attributes matching that pattern will be grouped together and sorted alphabetically. This is useful for grouping and ordering dynamic or custom attributes, such as all `data-*` or `aria-*` attributes.
+
+Example configuration:
+
+```js
+module.exports = {
+  rules: {
+    "@html-eslint/group-attrs": [
+      "error",
+      {
+        groups: [
+          ["/^data-/"], // All data-* attributes, sorted alphabetically
+          ["/^aria-/"], // All aria-* attributes, sorted alphabetically
+        ]
+      }
+    ],
+  },
+};
+```
+
+With this configuration:
+
+```html
+<!-- ❌ Incorrect: data-y comes before data-x alphabetically -->
+<input data-y="2" data-x="1">
+
+<!-- ✅ Correct: data-x comes before data-y alphabetically -->
+<input data-x="1" data-y="2">
+
+<!-- ❌ Incorrect: aria-label comes before aria-describedby alphabetically -->
+<div aria-label="test" aria-describedby="desc"></div>
+
+<!-- ✅ Correct: aria-describedby comes before aria-label alphabetically -->
+<div aria-describedby="desc" aria-label="test"></div>
+```
+
+#### Multiple Items in a Group
+
+If a group contains multiple items (for example, ["type", "/^data-/"]), the set of attributes matching each regex will not be sorted alphabetically.
+
+Example configuration:
+
+```js
+module.exports = {
+  rules: {
+    "@html-eslint/group-attrs": [
+      "error",
+      {
+        groups: [
+          ["type", "/^data-/"], // 'type' first, then all data-* attributes (not alphabetically sorted)
+          ["/^aria-/", "/^aria-/"] // group all aria-* attributes, without sorting
+        ]
+      }
+    ],
+  },
+};
+```
+
+With this configuration:
+
+```html
+<!-- ❌ Incorrect: data-x comes before type -->
+<input data-x="1" type="text" data-y="2">
+
+<!-- ✅ Correct: type comes before data-x and data-y -->
+<input type="text" data-x="1" data-y="2">
+
+<!-- ✅ Correct: type comes before data-y and data-x -->
+<input type="text" data-y="2" data-x="1">
+
+<!-- ✅ Correct: aria-describedby comes before aria-label -->
+<div aria-describedby="desc" aria-label="test"></div>
+
+<!-- ✅ Correct: aria-label comes before aria-describedby -->
+<div aria-label="test" aria-describedby="desc"></div>
+```
+
 ## When Not To Use It
 
 You might want to disable this rule if:
diff --git a/packages/eslint-plugin/lib/rules/group-attrs.js b/packages/eslint-plugin/lib/rules/group-attrs.js
index d81d9cf9..be09ce9a 100644
--- a/packages/eslint-plugin/lib/rules/group-attrs.js
+++ b/packages/eslint-plugin/lib/rules/group-attrs.js
@@ -3,7 +3,7 @@
  * @import {RuleModule} from "../types";
  *
  * @typedef {Object} Option
- * @property {string[][]} [Option.groups] - Array of attribute groups that should be kept together and in order
+ * @property {(string[]|string[])[]} [Option.groups] - Array of attribute groups that should be kept together and in order. Each group can contain strings or regex patterns as strings (e.g., "/^data-/")
  */
 
 const { RULE_CATEGORY } = require("../constants");
@@ -22,61 +22,69 @@ const MESSAGE_IDS = {
  * they should be placed next to each other in the specified order.
  */
 const DEFAULT_GROUPS = [
+  ["type", "name", "value"],
+  ["width", "height"],
   ["min", "max"],
   ["low", "high"],
   ["src", "srcset", "alt"],
   ["cols", "rows"],
-  ["type", "name", "value"],
   ["shadowrootclonable", "shadowrootdelegatesfocus", "shadowrootmode"],
   ["formaction", "formmethod", "formtarget"],
   ["minlength", "maxlength"],
+  ["left", "top", "right", "bottom"],
+  // Group ARIA attributes
   ["aria-valuemin", "aria-valuenow", "aria-valuemax", "aria-valuetext"],
   ["aria-rowindex", "aria-colindex"],
   ["aria-rowspan", "aria-colspan"],
   ["aria-rowcount", "aria-colcount"],
-  ["width", "height"],
   ["aria-label", "aria-labelledby", "aria-describedby"],
   ["aria-expanded", "aria-haspopup"],
-  // Group remaining ARIA attributes
-  [
-    "role",
-    "aria-activedescendant",
-    "aria-atomic",
-    "aria-autocomplete",
-    "aria-busy",
-    "aria-checked",
-    "aria-controls",
-    "aria-current",
-    "aria-details",
-    "aria-disabled",
-    "aria-dropeffect",
-    "aria-errormessage",
-    "aria-flowto",
-    "aria-grabbed",
-    "aria-hidden",
-    "aria-invalid",
-    "aria-keyshortcuts",
-    "aria-level",
-    "aria-live",
-    "aria-modal",
-    "aria-multiline",
-    "aria-multiselectable",
-    "aria-orientation",
-    "aria-owns",
-    "aria-placeholder",
-    "aria-posinset",
-    "aria-pressed",
-    "aria-readonly",
-    "aria-relevant",
-    "aria-required",
-    "aria-roledescription",
-    "aria-selected",
-    "aria-setsize",
-    "aria-sort",
-  ],
-  ["left", "top", "right", "bottom"],
+  // Remaining ARIA attributes aren't sorted, but are grouped together
+  ["role", "/^aria-/"],
 ];
 
+/**
+ * Check if an attribute matches a group pattern
+ * @param {string} attrName - The attribute name to check
+ * @param {string} pattern - The pattern to match against (can be a string or regex pattern like "/^data-/")
+ * @returns {boolean} - True if the attribute matches the pattern
+ */
+function matchesPattern(attrName, pattern) {
+  if (typeof pattern === "string") {
+    // Check if it's a regex pattern (starts and ends with /)
+    if (pattern.startsWith("/") && pattern.endsWith("/")) {
+      try {
+        const regex = new RegExp(pattern.slice(1, -1));
+        return regex.test(attrName);
+      } catch (e) { // eslint-disable-line no-unused-vars
+        // If regex is invalid, fall back to exact string match
+        return attrName === pattern;
+      }
+    }
+    // Exact string match
+    return attrName === pattern;
+  }
+  return false;
+}
+
+/**
+ * Find which group an attribute belongs to
+ * @param {string} attrName - The attribute name
+ * @param {string[][]} groups - The groups to check
+ * @returns {number} - The index of the first matching group, or -1 if no match
+ */
+function findAttributeGroup(attrName, groups) {
+  for (let i = 0; i < groups.length; i++) {
+    const group = groups[i];
+    for (const pattern of group) {
+      if (matchesPattern(attrName, pattern)) {
+        return i;
+      }
+    }
+  }
+  return -1;
+}
+
 /**
  * @type {RuleModule<[Option]>}
  */
@@ -101,9 +109,9 @@ module.exports = {
             items: {
               type: "array",
               items: {
-                type: "string",
+                type: "string"
               },
-              minItems: 2,
+              minItems: 1,
             },
           },
         },
@@ -130,49 +138,133 @@ module.exports = {
         return;
       }
 
-      for (const group of groups) {
-        /** @type {string[]} */
-        const foundAttrs = [];
-        /** @type {number[]} */
-        const indices = [];
+      // Map each attribute to its group index (first match wins)
+      /** @type {Map<number, {attrName: string, index: number, groupIndex: number}[]>} */
+      const groupMap = new Map();
 
-        // Find which attributes from this group are present
-        for (let i = 0; i < attributes.length; i++) {
-          const attr = attributes[i];
-          if (group.includes(attr.key.value)) {
-            foundAttrs.push(attr.key.value);
-            indices.push(i);
+      for (let i = 0; i < attributes.length; i++) {
+        const attr = attributes[i];
+        const attrName = attr.key.value;
+        const groupIndex = findAttributeGroup(attrName, groups);
+        
+        if (groupIndex !== -1) {
+          if (!groupMap.has(groupIndex)) {
+            groupMap.set(groupIndex, []);
+          }
+          const groupList = groupMap.get(groupIndex);
+          if (groupList) {
+            groupList.push({
+              attrName,
+              index: i,
+              groupIndex
+            });
           }
         }
+      }
 
-        // If we have multiple attributes from this group, check violations
-        if (foundAttrs.length > 1) {
-          const firstIndex = indices[0];
-          const lastIndex = indices[indices.length - 1];
+      // Check each group for violations
+      for (const [groupIndex, attrInfos] of groupMap) {
+        if (attrInfos.length <= 1) {
+          continue;
+        }
 
-          // Check if indices are consecutive
-          const isConsecutive = indices.every(
-            (index, i) => i === 0 || index === indices[i - 1] + 1
-          );
+        const group = groups[groupIndex];
+        const indices = attrInfos.map(info => info.index);
+        const foundAttrs = attrInfos.map(info => info.attrName);
 
-          if (!isConsecutive) {
-            // Grouping violation: attributes are not together
-            const separatorAttrs = [];
-            for (let i = firstIndex + 1; i < lastIndex; i++) {
-              if (!indices.includes(i)) {
-                separatorAttrs.push(attributes[i].key.value);
+        const firstIndex = Math.min(...indices);
+        const lastIndex = Math.max(...indices);
+
+        // Check if indices are consecutive
+        const sortedIndices = [...indices].sort((a, b) => a - b);
+        const isConsecutive = sortedIndices.every(
+          (index, i) => i === 0 || index === sortedIndices[i - 1] + 1
+        );
+
+        if (!isConsecutive) {
+          // Grouping violation: attributes are not together
+          const separatorAttrs = [];
+          for (let i = firstIndex + 1; i < lastIndex; i++) {
+            if (!indices.includes(i)) {
+              separatorAttrs.push(attributes[i].key.value);
+            }
+          }
+
+          context.report({
+            loc: {
+              start: attributes[firstIndex].loc.start,
+              end: attributes[lastIndex].loc.end,
+            },
+            messageId: MESSAGE_IDS.NOT_GROUPED,
+            data: {
+              attrs: foundAttrs.join(", "),
+              separator: separatorAttrs.join(", "),
+            },
+            fix(fixer) {
+              return fixAttributeOrder(
+                fixer,
+                attributes,
+                indices,
+                group,
+                foundAttrs
+              );
+            },
+          });
+          return; // Only report one violation at a time
+        } else {
+          // Check ordering violation: attributes are together but in wrong order
+          const isRegexGroup = group.length === 1 && 
+            typeof group[0] === "string" && 
+            group[0].startsWith("/") && 
+            group[0].endsWith("/");
+          
+          let isCorrectOrder;
+          /** @type {string[]} */
+          let expectedOrder;
+          
+          if (isRegexGroup) {
+            // For regex groups, sort alphabetically
+            expectedOrder = [...foundAttrs].sort();
+            isCorrectOrder = foundAttrs.every((attr, i) => attr === expectedOrder[i]);
+          } else {
+            // For string groups, follow the defined order
+            expectedOrder = group.filter((pattern) => {
+              return foundAttrs.some(attr => matchesPattern(attr, pattern));
+            });
+            
+            // Create a mapping of expected positions
+            const expectedPositions = new Map();
+            let position = 0;
+            for (const pattern of expectedOrder) {
+              for (const attr of foundAttrs) {
+                if (matchesPattern(attr, pattern) && !expectedPositions.has(attr)) {
+                  expectedPositions.set(attr, position++);
+                }
               }
             }
 
+            isCorrectOrder = foundAttrs.every(
+              (attr, i) => {
+                const expectedPos = expectedPositions.get(attr);
+                return expectedPos === i;
+              }
+            );
+          }
+
+          if (!isCorrectOrder) {
             context.report({
               loc: {
                 start: attributes[firstIndex].loc.start,
                 end: attributes[lastIndex].loc.end,
               },
-              messageId: MESSAGE_IDS.NOT_GROUPED,
+              messageId: MESSAGE_IDS.WRONG_ORDER,
               data: {
                 attrs: foundAttrs.join(", "),
-                separator: separatorAttrs.join(", "),
+                expectedOrder: isRegexGroup ? expectedOrder.join(", ") : foundAttrs.sort((a, b) => {
+                  const aIndex = expectedOrder.findIndex(pattern => matchesPattern(a, pattern));
+                  const bIndex = expectedOrder.findIndex(pattern => matchesPattern(b, pattern));
+                  return aIndex - bIndex;
+                }).join(", "),
               },
               fix(fixer) {
                 return fixAttributeOrder(
@@ -185,38 +277,6 @@ module.exports = {
               },
             });
             return; // Only report one violation at a time
-          } else {
-            // Check ordering violation: attributes are together but in wrong order
-            const expectedOrder = group.filter((attr) =>
-              foundAttrs.includes(attr)
-            );
-            const isCorrectOrder = foundAttrs.every(
-              (attr, i) => attr === expectedOrder[i]
-            );
-
-            if (!isCorrectOrder) {
-              context.report({
-                loc: {
-                  start: attributes[firstIndex].loc.start,
-                  end: attributes[lastIndex].loc.end,
-                },
-                messageId: MESSAGE_IDS.WRONG_ORDER,
-                data: {
-                  attrs: foundAttrs.join(", "),
-                  expectedOrder: expectedOrder.join(", "),
-                },
-                fix(fixer) {
-                  return fixAttributeOrder(
-                    fixer,
-                    attributes,
-                    indices,
-                    group,
-                    foundAttrs
-                  );
-                },
-              });
-              return; // Only report one violation at a time
-            }
           }
         }
       }
@@ -238,12 +298,25 @@ module.exports = {
       const attrsToReorder = indices.map((i) => attributes[i]);
 
       // Sort them according to the group order
-      const expectedOrder = group.filter((attr) => foundAttrs.includes(attr));
-      attrsToReorder.sort((a, b) => {
-        const aIndex = expectedOrder.indexOf(a.key.value);
-        const bIndex = expectedOrder.indexOf(b.key.value);
-        return aIndex - bIndex;
-      });
+      const isRegexGroup = group.length === 1 && 
+        typeof group[0] === "string" && 
+        group[0].startsWith("/") && 
+        group[0].endsWith("/");
+      
+      if (isRegexGroup) {
+        // For regex groups, sort alphabetically
+        attrsToReorder.sort((a, b) => a.key.value.localeCompare(b.key.value));
+      } else {
+        // For string groups, follow the defined order
+        const expectedOrder = group.filter((pattern) => {
+          return foundAttrs.some(attr => matchesPattern(attr, pattern));
+        });
+        attrsToReorder.sort((a, b) => {
+          const aIndex = expectedOrder.findIndex(pattern => matchesPattern(a.key.value, pattern));
+          const bIndex = expectedOrder.findIndex(pattern => matchesPattern(b.key.value, pattern));
+          return aIndex - bIndex;
+        });
+      }
 
       // Create a fixed version of all attributes by building the new arrangement
       const fixed = [];
diff --git a/packages/eslint-plugin/tests/rules/group-attrs.test.js b/packages/eslint-plugin/tests/rules/group-attrs.test.js
index d02ce6ec..64cfb0ab 100644
--- a/packages/eslint-plugin/tests/rules/group-attrs.test.js
+++ b/packages/eslint-plugin/tests/rules/group-attrs.test.js
@@ -62,6 +62,72 @@ ruleTester.run("group-attrs", rule, {
     {
       code: '<input type="text">',
     },
+
+    // Regex groups - valid cases (alphabetically sorted)
+    {
+      code: '<input data-x="1" data-y="2">',
+      options: [{ groups: [["/^data-/"]] }],
+    },
+    {
+      code: '<div aria-describedby="desc" aria-label="test">',
+      options: [{ groups: [["/^aria-/"]] }],
+    },
+    {
+      code: '<input data-min="5" data-max="10">',
+      options: [{ groups: [["/^data-min$/", "/^data-max$/"]] }],
+    },
+    {
+      code: '<div class="test" id="example" style="color: red">',
+      options: [{ groups: [["class", "id", "style"]] }],
+    },
+
+    // First match precedence - data-x matches first group, aria-x matches second
+    {
+      code: '<input data-x="1" data-y="2">',
+      options: [{ 
+        groups: [
+          ["data-x", "data-y"],
+          ["data-y", "data-x"]
+        ] 
+      }],
+    },
+    {
+      code: '<input data-y="2" data-x="1">',
+      options: [{ 
+        groups: [
+          ["data-y", "data-x"],
+          ["data-x", "data-y"]
+        ] 
+      }],
+    },
+
+    // Mixed string and regex patterns
+    {
+      code: '<input type="text" data-x="1" data-y="2">',
+      options: [{ 
+        groups: [
+          ["type", "/^data-/"]
+        ] 
+      }],
+    },
+    // Order doesn't matter within data-*
+    {
+      code: '<input type="text" data-y="2" data-x="1">',
+      options: [{ 
+        groups: [
+          ["type", "/^data-/"]
+        ] 
+      }],
+    },
+    // Order doesn't matter within data-*
+    {
+      code: '<input type="text" data-x="2" data-y="1">',
+      options: [{ 
+        groups: [
+          ["type", "/^data-/"]
+        ] 
+      }],
+    },
   ],
   invalid: [
     // Basic min/max separation
@@ -194,12 +260,12 @@ ruleTester.run("group-attrs", rule, {
         {
           messageId: "notGrouped",
           data: {
-            attrs: "width, height",
-            separator: "top",
+            attrs: "left, top, right",
+            separator: "width, height",
           },
         },
       ],
-      output: '<div left="0" width="100" height="50" top="10" right="100">',
+      output: '<div left="0" top="10" right="100" width="100" height="50">',
     },
 
     // Multiple violations - only first one will be reported/fixed
@@ -217,7 +283,114 @@ ruleTester.run("group-attrs", rule, {
       output:
         '<input min="5" max="10" type="text" width="100" class="test" height="200">',
     },
+
+    // Regex groups - invalid cases (not grouped)
+    {
+      code: '<input data-x="1" type="text" data-y="2">',
+      options: [{ groups: [["/^data-/"]] }],
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "data-x, data-y",
+            separator: "type",
+          },
+        },
+      ],
+      output: '<input data-x="1" data-y="2" type="text">',
+    },
+
+    // Regex groups - wrong alphabetical order
+    {
+      code: '<input data-y="2" data-x="1">',
+      options: [{ groups: [["/^data-/"]] }],
+      errors: [
+        {
+          messageId: "wrongOrder",
+          data: {
+            attrs: "data-y, data-x",
+            expectedOrder: "data-x, data-y",
+          },
+        },
+      ],
+      output: '<input data-x="1" data-y="2">',
+    },
+
+    // Regex groups - multiple attributes in wrong alphabetical order
+    {
+      code: '<div data-start="1" data-end="10" data-step="2">',
+      options: [{ groups: [["/^data-/"]] }],
+      errors: [
+        {
+          messageId: "wrongOrder",
+          data: {
+            attrs: "data-start, data-end, data-step",
+            expectedOrder: "data-end, data-start, data-step",
+          },
+        },
+      ],
+      output: '<div data-end="10" data-start="1" data-step="2">',
+    },
+
+    // Regex groups - aria attributes in wrong alphabetical order
+    {
+      code: '<div aria-label="test" aria-describedby="desc">',
+      options: [{ groups: [["/^aria-/"]] }],
+      errors: [
+        {
+          messageId: "wrongOrder",
+          data: {
+            attrs: "aria-label, aria-describedby",
+            expectedOrder: "aria-describedby, aria-label",
+          },
+        },
+      ],
+      output: '<div aria-describedby="desc" aria-label="test">',
+    },
+
+
+    // Mixed string and regex patterns - invalid
+    {
+      code: '<input type="text" class="test" data-x="1">',
+      options: [{ 
+        groups: [
+          ["type", "/^data-/"]
+        ] 
+      }],
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "type, data-x",
+            separator: "class",
+          },
+        },
+      ],
+      output: '<input type="text" data-x="1" class="test">',
+    },
+    // Mixed string and regex patterns - wrong order within group
+    {
+      code: '<input data-x="1" type="text" data-y="2">',
+      options: [{ 
+        groups: [
+          ["type", "/^data-/"]
+        ] 
+      }],
+      errors: [
+        {
+          messageId: "wrongOrder",
+          data: {
+            attrs: "data-x, type, data-y",
+            expectedOrder: "type, data-x, data-y",
+          },
+        },
+      ],
+      output: '<input type="text" data-x="1" data-y="2">',
+    },
   ],
+
+ 
+
 });
 
 templateRuleTester.run("[template] group-attrs", rule, {
@@ -228,6 +401,11 @@ templateRuleTester.run("[template] group-attrs", rule, {
     {
       code: 'html`<div width="100" height="200">`',
     },
+    // Regex groups in templates (alphabetically sorted)
+    {
+      code: 'html`<input data-x="\\${x}" data-y="\\${y}">`',
+      options: [{ groups: [["/^data-/"]] }],
+    },
   ],
   invalid: [
     {
@@ -243,5 +421,20 @@ templateRuleTester.run("[template] group-attrs", rule, {
       ],
       output: 'html`<input min="\\${min}" max="\\${max}" type="text">`',
     },
+    // Regex groups in templates - invalid
+    {
+      code: 'html`<input data-x="\\${x}" type="text" data-y="\\${y}">`',
+      options: [{ groups: [["/^data-/"]] }],
+      errors: [
+        {
+          messageId: "notGrouped",
+          data: {
+            attrs: "data-x, data-y",
+            separator: "type",
+          },
+        },
+      ],
+      output: 'html`<input data-x="\\${x}" data-y="\\${y}" type="text">`',
+    },
   ],
 });