Update _disabled to use state selector (#6700)

Co-authored-by: Segun Adebayo <joseshegs@gmail.com>

.changeset/new-dolls-trade.md

@@ -0,0 +1,8 @@
+---
+"@chakra-ui/styled-system": patch
+"@chakra-ui/utils": patch
+"@chakra-ui/dom-utils": patch
+---
+
+Update disabled selector to use state selector `:disabled`, instead of `[disabled]` attribute selector.
+This is useful when an editable element is wrapped within `<fieldset disabled>`

packages/components/styled-system/src/pseudos.ts

@@ -68,7 +68,7 @@ export const pseudoSelectors = {
    * - `&:disabled`
    * - `&[data-disabled]`
    */
-  _disabled: "&[disabled], &[aria-disabled=true], &[data-disabled]",
+  _disabled: "&:disabled, &[aria-disabled=true], &[data-disabled]",
   /**
    * Styles for CSS Selector `&:readonly`
    */

packages/legacy/utils/src/dom-query.ts

@@ -2,15 +2,15 @@ import { isHTMLElement } from "./dom"
 import { isFocusable, isTabbable } from "./tabbable"
 
 const focusableElList = [
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
+  "input:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
   "embed",
   "iframe",
   "object",
   "a[href]",
   "area[href]",
-  "button:not([disabled])",
+  "button:not(:disabled)",
   "[tabindex]",
   "audio[controls]",
   "video[controls]",

packages/utilities/dom-utils/src/index.ts

@@ -1,15 +1,15 @@
 import { isFocusable, isTabbable } from "./tabbable"
 
 const focusableElList = [
-  "input:not([disabled])",
-  "select:not([disabled])",
-  "textarea:not([disabled])",
+  "input:not(:disabled)",
+  "select:not(:disabled)",
+  "textarea:not(:disabled)",
   "embed",
   "iframe",
   "object",
   "a[href]",
   "area[href]",
-  "button:not([disabled])",
+  "button:not(:disabled)",
   "[tabindex]",
   "audio[controls]",
   "video[controls]",