A design system in a box.
hip-ui.tngl.io/docs/introduction
a11y lint
+127
-2
+2
-1
packages/eslint-config/package.json
+2
-1
packages/eslint-config/package.json
+5
-1
packages/eslint-config/react-internal.js
+5
-1
packages/eslint-config/react-internal.js
···
2
2
import pluginReactHooks from "eslint-plugin-react-hooks";
3
3
import eslintReact from "@eslint-react/eslint-plugin";
4
4
import { defineConfig } from "eslint/config";
5
+
import jsxA11y from "eslint-plugin-jsx-a11y";
5
6
6
7
import { config as baseConfig } from "./base.js";
7
8
···
19
20
"@stylexjs": stylex,
20
21
},
21
22
22
-
extends: [eslintReact.configs["strict-type-checked"]],
23
+
extends: [
24
+
eslintReact.configs["strict-type-checked"],
25
+
jsxA11y.flatConfigs.recommended,
26
+
],
23
27
24
28
settings: { react: { version: "detect" } },
25
29
rules: {
+5
packages/hip-ui/src/components/color-field/index.tsx
+5
packages/hip-ui/src/components/color-field/index.tsx
···
41
41
return (
42
42
<AriaColorField {...props} {...stylex.props(inputStyles.field, style)}>
43
43
{label !== undefined && <Label size={size}>{label}</Label>}
44
+
{/*
45
+
This onClick is specifically for mouse users not clicking directly on the input.
46
+
A keyboard user would not encounter the same issue.
47
+
*/}
48
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
44
49
<div
45
50
{...stylex.props(inputStyles.wrapper)}
46
51
onClick={() => inputRef.current?.focus()}
+5
packages/hip-ui/src/components/date-field/index.tsx
+5
packages/hip-ui/src/components/date-field/index.tsx
···
40
40
return (
41
41
<AriaDateField {...props} {...stylex.props(inputStyles.field, style)}>
42
42
{label !== undefined && <Label size={size}>{label}</Label>}
43
+
{/*
44
+
This onClick is specifically for mouse users not clicking directly on the input.
45
+
A keyboard user would not encounter the same issue.
46
+
*/}
47
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
43
48
<div
44
49
{...stylex.props(inputStyles.wrapper)}
45
50
onClick={() => inputRef.current?.focus()}
+5
packages/hip-ui/src/components/number-field/index.tsx
+5
packages/hip-ui/src/components/number-field/index.tsx
···
84
84
return (
85
85
<AriaNumberField {...props} {...stylex.props(inputStyles.field, style)}>
86
86
<Label size={size}>{label}</Label>
87
+
{/*
88
+
This onClick is specifically for mouse users not clicking directly on the input.
89
+
A keyboard user would not encounter the same issue.
90
+
*/}
91
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
87
92
<div
88
93
{...stylex.props(inputStyles.wrapper)}
89
94
onClick={() => inputRef.current?.focus()}
+5
packages/hip-ui/src/components/search-field/index.tsx
+5
packages/hip-ui/src/components/search-field/index.tsx
···
64
64
return (
65
65
<>
66
66
{label !== undefined && <Label size={size}>{label}</Label>}
67
+
{/*
68
+
This onClick is specifically for mouse users not clicking directly on the input.
69
+
A keyboard user would not encounter the same issue.
70
+
*/}
71
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
67
72
<div
68
73
{...stylex.props(inputStyles.wrapper, styles.wrapper)}
69
74
onClick={() => inputRef.current?.focus()}
+5
packages/hip-ui/src/components/text-area/index.tsx
+5
packages/hip-ui/src/components/text-area/index.tsx
···
141
141
return (
142
142
<AriaTextField {...props} {...stylex.props(styles.wrapper, style)}>
143
143
{label !== undefined && <Label size={size}>{label}</Label>}
144
+
{/*
145
+
This onClick is specifically for mouse users not clicking directly on the input.
146
+
A keyboard user would not encounter the same issue.
147
+
*/}
148
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
144
149
<div
145
150
{...stylex.props(styles.inputWrapper, gray.bgUi, gray.text)}
146
151
onClick={() => textAreaRef.current?.focus()}
+5
packages/hip-ui/src/components/text-field/index.tsx
+5
packages/hip-ui/src/components/text-field/index.tsx
···
84
84
{...stylex.props(inputStyles.field, style)}
85
85
>
86
86
{label !== undefined && <Label size={size}>{label}</Label>}
87
+
{/*
88
+
This onClick is specifically for mouse users not clicking directly on the input.
89
+
A keyboard user would not encounter the same issue.
90
+
*/}
91
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
87
92
<div
88
93
{...stylex.props(inputStyles.wrapper)}
89
94
onClick={() => inputRef.current?.focus()}
+5
packages/hip-ui/src/components/time-field/index.tsx
+5
packages/hip-ui/src/components/time-field/index.tsx
···
40
40
return (
41
41
<AriaTimeField {...props} {...stylex.props(inputStyles.field, style)}>
42
42
{label !== undefined && <Label size={size}>{label}</Label>}
43
+
{/*
44
+
This onClick is specifically for mouse users not clicking directly on the input.
45
+
A keyboard user would not encounter the same issue.
46
+
*/}
47
+
{/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
43
48
<div
44
49
{...stylex.props(inputStyles.wrapper)}
45
50
onClick={() => inputRef.current?.focus()}
+4
packages/hip-ui/src/components/typography/index.tsx
+4
packages/hip-ui/src/components/typography/index.tsx
···
62
62
}
63
63
64
64
export const Heading1 = ({ style, ...props }: Heading1Props) => {
65
+
// eslint-disable-next-line jsx-a11y/heading-has-content
65
66
return <h1 {...stylex.props(typeramp.heading1, style)} {...props} />;
66
67
};
67
68
···
71
72
}
72
73
73
74
export const Heading2 = ({ style, ...props }: Heading2Props) => {
75
+
// eslint-disable-next-line jsx-a11y/heading-has-content
74
76
return <h2 {...stylex.props(typeramp.heading2, style)} {...props} />;
75
77
};
76
78
···
80
82
}
81
83
82
84
export const Heading3 = ({ style, ...props }: Heading3Props) => {
85
+
// eslint-disable-next-line jsx-a11y/heading-has-content
83
86
return <h3 {...stylex.props(typeramp.heading3, style)} {...props} />;
84
87
};
85
88
···
89
92
}
90
93
91
94
export const Heading4 = ({ style, ...props }: Heading4Props) => {
95
+
// eslint-disable-next-line jsx-a11y/heading-has-content
92
96
return <h4 {...stylex.props(typeramp.heading4, style)} {...props} />;
93
97
};
94
98
+79
pnpm-lock.yaml
+79
pnpm-lock.yaml
···
96
96
'@stylexjs/eslint-plugin':
97
97
specifier: ^0.16.2
98
98
version: 0.16.2
99
+
eslint-plugin-jsx-a11y:
100
+
specifier: ^6.10.2
101
+
version: 6.10.2(eslint@9.34.0(jiti@2.6.1))
99
102
devDependencies:
100
103
'@eslint/js':
101
104
specifier: ^9.34.0
···
1760
1763
argparse@2.0.1:
1761
1764
resolution: {integrity: sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==}
1762
1765
1766
+
aria-query@5.3.2:
1767
+
resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==}
1768
+
engines: {node: '>= 0.4'}
1769
+
1763
1770
array-back@3.1.0:
1764
1771
resolution: {integrity: sha512-TkuxA4UCOvxuDK6NZYXCalszEzj+TLszyASooky+i742l9TqsOdYCMJJupxRic61hwquNtppB3hgcuq9SVSH1Q==}
1765
1772
engines: {node: '>=6'}
···
1800
1807
resolution: {integrity: sha512-Izi8RQcffqCeNVgFigKli1ssklIbpHnCYc6AknXGYoB6grJqyeby7jv12JUQgmTAnIDnbck1uxksT4dzN3PWBA==}
1801
1808
engines: {node: '>=12'}
1802
1809
1810
+
ast-types-flow@0.0.8:
1811
+
resolution: {integrity: sha512-OH/2E5Fg20h2aPrbe+QL8JZQFko0YZaF+j4mnQ7BGhfavO7OpSLa8a0y9sBwomHdSbkhTS8TQNayBfnW5DwbvQ==}
1812
+
1803
1813
ast-v8-to-istanbul@0.3.7:
1804
1814
resolution: {integrity: sha512-kr1Hy6YRZBkGQSb6puP+D6FQ59Cx4m0siYhAxygMCAgadiWQ6oxAxQXHOMvJx67SJ63jRoVIIg5eXzUbbct1ww==}
1805
1815
···
1813
1823
1814
1824
available-typed-arrays@1.0.7:
1815
1825
resolution: {integrity: sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==}
1826
+
engines: {node: '>= 0.4'}
1827
+
1828
+
axe-core@4.11.0:
1829
+
resolution: {integrity: sha512-ilYanEU8vxxBexpJd8cWM4ElSQq4QctCLKih0TSfjIfCQTeyH/6zVrmIJfLPrKTKJRbiG+cfnZbQIjAlJmF1jQ==}
1830
+
engines: {node: '>=4'}
1831
+
1832
+
axobject-query@4.1.0:
1833
+
resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==}
1816
1834
engines: {node: '>= 0.4'}
1817
1835
1818
1836
balanced-match@1.0.2:
···
1976
1994
csstype@3.1.3:
1977
1995
resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
1978
1996
1997
+
damerau-levenshtein@1.0.8:
1998
+
resolution: {integrity: sha512-sdQSFB7+llfUcQHUQO3+B8ERRj0Oa4w9POWMI/puGtuf7gFywGmkaLCElnudfTiKZV+NvHqL0ifzdrI8Ro7ESA==}
1999
+
1979
2000
data-view-buffer@1.0.2:
1980
2001
resolution: {integrity: sha512-EmKO5V3OLXh1rtK2wgXRansaK1/mtVdTUEiEI0W8RkvgT05kfxaH29PliLnpLP73yYO6142Q72QNa8Wx/A5CqQ==}
1981
2002
engines: {node: '>= 0.4'}
···
2130
2151
hasBin: true
2131
2152
peerDependencies:
2132
2153
eslint: '>=7.0.0'
2154
+
2155
+
eslint-plugin-jsx-a11y@6.10.2:
2156
+
resolution: {integrity: sha512-scB3nz4WmG75pV8+3eRUQOHZlNSUhFNq37xnpgRkCCELU3XMvXAxLk1eqWWyE22Ki4Q01Fnsw9BA3cJHDPgn2Q==}
2157
+
engines: {node: '>=4.0'}
2158
+
peerDependencies:
2159
+
eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9
2133
2160
2134
2161
eslint-plugin-only-warn@1.1.0:
2135
2162
resolution: {integrity: sha512-2tktqUAT+Q3hCAU0iSf4xAN1k9zOpjK5WO8104mB0rT/dGhOa09582HN5HlbxNbPRZ0THV7nLGvzugcNOSjzfA==}
···
2690
2717
keyv@4.5.4:
2691
2718
resolution: {integrity: sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==}
2692
2719
2720
+
language-subtag-registry@0.3.23:
2721
+
resolution: {integrity: sha512-0K65Lea881pHotoGEa5gDlMxt3pctLi2RplBb7Ezh4rRdLEOtgi7n4EwK9lamnUCkKBqaeKRVebTq6BAxSkpXQ==}
2722
+
2723
+
language-tags@1.0.9:
2724
+
resolution: {integrity: sha512-MbjN408fEndfiQXbFQ1vnd+1NoLDsnQW41410oQBXiyXDMYH5z505juWa4KUE1LqxRC7DgOgZDbKLxHIwm27hA==}
2725
+
engines: {node: '>=0.10'}
2726
+
2693
2727
levn@0.4.1:
2694
2728
resolution: {integrity: sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==}
2695
2729
engines: {node: '>= 0.8.0'}
···
3227
3261
string-width@7.2.0:
3228
3262
resolution: {integrity: sha512-tsaTIkKW9b4N+AEj+SVA+WhJzV7/zMhcSu78mLKWSk7cXMOSHsBKFWUs0fWwq8QyK3MgJBQRX6Gbi4kYbdvGkQ==}
3229
3263
engines: {node: '>=18'}
3264
+
3265
+
string.prototype.includes@2.0.1:
3266
+
resolution: {integrity: sha512-o7+c9bW6zpAdJHTtujeePODAhkuicdAryFsfVKwA+wGw89wJ4GTY484WTucM9hLtDEOpOvI+aHnzqnC5lHp4Rg==}
3267
+
engines: {node: '>= 0.4'}
3230
3268
3231
3269
string.prototype.matchall@4.0.12:
3232
3270
resolution: {integrity: sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==}
···
5768
5806
ansi-styles@6.2.3: {}
5769
5807
5770
5808
argparse@2.0.1: {}
5809
+
5810
+
aria-query@5.3.2: {}
5771
5811
5772
5812
array-back@3.1.0: {}
5773
5813
···
5832
5872
5833
5873
assertion-error@2.0.1: {}
5834
5874
5875
+
ast-types-flow@0.0.8: {}
5876
+
5835
5877
ast-v8-to-istanbul@0.3.7:
5836
5878
dependencies:
5837
5879
'@jridgewell/trace-mapping': 0.3.31
···
5845
5887
available-typed-arrays@1.0.7:
5846
5888
dependencies:
5847
5889
possible-typed-array-names: 1.1.0
5890
+
5891
+
axe-core@4.11.0: {}
5892
+
5893
+
axobject-query@4.1.0: {}
5848
5894
5849
5895
balanced-match@1.0.2: {}
5850
5896
···
6017
6063
css-url-regex@0.0.1: {}
6018
6064
6019
6065
csstype@3.1.3: {}
6066
+
6067
+
damerau-levenshtein@1.0.8: {}
6020
6068
6021
6069
data-view-buffer@1.0.2:
6022
6070
dependencies:
···
6242
6290
dependencies:
6243
6291
eslint: 9.34.0(jiti@2.6.1)
6244
6292
6293
+
eslint-plugin-jsx-a11y@6.10.2(eslint@9.34.0(jiti@2.6.1)):
6294
+
dependencies:
6295
+
aria-query: 5.3.2
6296
+
array-includes: 3.1.9
6297
+
array.prototype.flatmap: 1.3.3
6298
+
ast-types-flow: 0.0.8
6299
+
axe-core: 4.11.0
6300
+
axobject-query: 4.1.0
6301
+
damerau-levenshtein: 1.0.8
6302
+
emoji-regex: 9.2.2
6303
+
eslint: 9.34.0(jiti@2.6.1)
6304
+
hasown: 2.0.2
6305
+
jsx-ast-utils: 3.3.5
6306
+
language-tags: 1.0.9
6307
+
minimatch: 3.1.2
6308
+
object.fromentries: 2.0.8
6309
+
safe-regex-test: 1.1.0
6310
+
string.prototype.includes: 2.0.1
6311
+
6245
6312
eslint-plugin-only-warn@1.1.0: {}
6246
6313
6247
6314
eslint-plugin-react-dom@2.2.2(eslint@9.34.0(jiti@2.6.1))(typescript@5.9.2):
···
6912
6979
dependencies:
6913
6980
json-buffer: 3.0.1
6914
6981
6982
+
language-subtag-registry@0.3.23: {}
6983
+
6984
+
language-tags@1.0.9:
6985
+
dependencies:
6986
+
language-subtag-registry: 0.3.23
6987
+
6915
6988
levn@0.4.1:
6916
6989
dependencies:
6917
6990
prelude-ls: 1.2.1
···
7544
7617
emoji-regex: 10.5.0
7545
7618
get-east-asian-width: 1.4.0
7546
7619
strip-ansi: 7.1.2
7620
+
7621
+
string.prototype.includes@2.0.1:
7622
+
dependencies:
7623
+
call-bind: 1.0.8
7624
+
define-properties: 1.2.1
7625
+
es-abstract: 1.24.0
7547
7626
7548
7627
string.prototype.matchall@4.0.12:
7549
7628
dependencies: