Skip to content

Commit 53d66b7

Browse files
bartvenemanbartveneman
authored
Adds analysis for accessibility related selectors (#40)
* Adds analysis for accessibility related selectors * Updates readme
1 parent 06e1b68 commit 53d66b7

File tree

6 files changed

+214
-145
lines changed

6 files changed

+214
-145
lines changed

‎readme.md‎

Lines changed: 149 additions & 142 deletions
Original file line numberDiff line numberDiff line change
@@ -24,152 +24,159 @@ $ yarn add projectwallace/css-analyzer
2424
```js
2525
const analyze = require('css-analyzer');
2626

27-
async function (css) {
28-
const result = await analyze('foo {}')
29-
console.log(result)
27+
analyze('foo {}')
28+
.then(result => console.log(result))
29+
.catch(err => console.error(err))
3030
}
3131

3232
//=>
3333
// {
34-
// atrules: {
35-
// charsets: {
36-
// total: 0,
37-
// totalUnique: 0,
38-
// unique: []
39-
// },
40-
// documents: {
41-
// total: 0,
42-
// totalUnique: 0,
43-
// unique: []
44-
// },
45-
// fontfaces: {
46-
// total: 0
47-
// },
48-
// imports: {
49-
// total: 0,
50-
// totalUnique: 0,
51-
// unique: []
52-
// },
53-
// keyframes: {
54-
// total: 0,
55-
// totalUnique: 0,
56-
// unique: []
57-
// },
58-
// mediaqueries: {
59-
// total: 0,
60-
// totalUnique: 0,
61-
// unique: []
62-
// },
63-
// namespaces: {
64-
// total: 0,
65-
// totalUnique: 0,
66-
// unique: []
67-
// },
68-
// pages: {
69-
// total: 0,
70-
// totalUnique: 0,
71-
// unique: []
72-
// },
73-
// supports: {
74-
// total: 0,
75-
// totalUnique: 0,
76-
// unique: []
77-
// }
78-
// },
79-
// declarations: {
80-
// importants: {
81-
// share: 0,
82-
// total: 0
83-
// },
84-
// total: 0,
85-
// totalUnique: 0
86-
// },
87-
// properties: {
88-
// prefixed: {
89-
// share: 0,
90-
// total: 0,
91-
// totalUnique: 0,
92-
// unique: []
93-
// },
94-
// total: 0,
95-
// totalUnique: 0,
96-
// unique: []
97-
// },
98-
// rules: {
99-
// total: 1
100-
// },
101-
// selectors: {
102-
// id: {
103-
// total: 0,
104-
// totalUnique: 0,
105-
// unique: []
106-
// },
107-
// identifiers: {
108-
// average: 1,
109-
// top: [
110-
// {
111-
// identifiers: 1,
112-
// selector: 'foo'
113-
// }
114-
// ]
115-
// },
116-
// js: {
117-
// total: 0,
118-
// totalUnique: 0,
119-
// unique: []
120-
// },
121-
// specificity: {
122-
// top: [
123-
// {
124-
// selector: 'foo',
125-
// specificity: {
126-
// a: 0,
127-
// b: 0,
128-
// c: 0,
129-
// d: 1
130-
// }
131-
// }
132-
// ]
133-
// },
134-
// total: 1,
135-
// totalUnique: 1,
136-
// universal: {
137-
// total: 0,
138-
// totalUnique: 0,
139-
// unique: []
140-
// }
141-
// },
142-
// stylesheets: {
143-
// cohesion: {
144-
// average: 0
145-
// },
146-
// simplicity: 1,
147-
// size: 5
148-
// },
149-
// values: {
150-
// colors: {
151-
// total: 0,
152-
// totalUnique: 0,
153-
// unique: []
154-
// },
155-
// fontfamilies: {
156-
// total: 0,
157-
// totalUnique: 0,
158-
// unique: []
159-
// },
160-
// fontsizes: {
161-
// total: 0,
162-
// totalUnique: 0,
163-
// unique: []
164-
// },
165-
// prefixed: {
166-
// share: 0,
167-
// total: 0,
168-
// totalUnique: 0,
169-
// unique: []
170-
// },
171-
// total: 0
172-
// }
34+
// atrules: {
35+
// charsets: {
36+
// total: 0,
37+
// totalUnique: 0,
38+
// unique: []
39+
// },
40+
// documents: {
41+
// total: 0,
42+
// totalUnique: 0,
43+
// unique: []
44+
// },
45+
// fontfaces: {
46+
// total: 0,
47+
// totalUnique: 0,
48+
// unique: []
49+
// },
50+
// imports: {
51+
// total: 0,
52+
// totalUnique: 0,
53+
// unique: []
54+
// },
55+
// keyframes: {
56+
// total: 0,
57+
// totalUnique: 0,
58+
// unique: []
59+
// },
60+
// mediaqueries: {
61+
// total: 0,
62+
// totalUnique: 0,
63+
// unique: []
64+
// },
65+
// namespaces: {
66+
// total: 0,
67+
// totalUnique: 0,
68+
// unique: []
69+
// },
70+
// pages: {
71+
// total: 0,
72+
// totalUnique: 0,
73+
// unique: []
74+
// },
75+
// supports: {
76+
// total: 0,
77+
// totalUnique: 0,
78+
// unique: []
79+
// }
80+
// },
81+
// declarations: {
82+
// importants: {
83+
// share: 0,
84+
// total: 0
85+
// },
86+
// total: 0,
87+
// totalUnique: 0
88+
// },
89+
// properties: {
90+
// prefixed: {
91+
// share: 0,
92+
// total: 0,
93+
// totalUnique: 0,
94+
// unique: []
95+
// },
96+
// total: 0,
97+
// totalUnique: 0,
98+
// unique: []
99+
// },
100+
// rules: {
101+
// total: 1
102+
// },
103+
// selectors: {
104+
// accessibility: {
105+
// total: 0,
106+
// totalUnique: 0,
107+
// unique: []
108+
// },
109+
// id: {
110+
// total: 0,
111+
// totalUnique: 0,
112+
// unique: []
113+
// },
114+
// identifiers: {
115+
// average: 1,
116+
// top: [
117+
// {
118+
// identifiers: 1,
119+
// selector: 'foo'
120+
// }
121+
// ]
122+
// },
123+
// js: {
124+
// total: 0,
125+
// totalUnique: 0,
126+
// unique: []
127+
// },
128+
// specificity: {
129+
// top: [
130+
// {
131+
// selector: 'foo',
132+
// specificity: {
133+
// a: 0,
134+
// b: 0,
135+
// c: 0,
136+
// d: 1
137+
// }
138+
// }
139+
// ]
140+
// },
141+
// total: 1,
142+
// totalUnique: 1,
143+
// universal: {
144+
// total: 0,
145+
// totalUnique: 0,
146+
// unique: []
147+
// }
148+
// },
149+
// stylesheets: {
150+
// cohesion: {
151+
// average: 0
152+
// },
153+
// simplicity: 1,
154+
// size: 5
155+
// },
156+
// values: {
157+
// colors: {
158+
// total: 0,
159+
// totalUnique: 0,
160+
// unique: []
161+
// },
162+
// fontfamilies: {
163+
// total: 0,
164+
// totalUnique: 0,
165+
// unique: []
166+
// },
167+
// fontsizes: {
168+
// total: 0,
169+
// totalUnique: 0,
170+
// unique: []
171+
// },
172+
// prefixed: {
173+
// share: 0,
174+
// total: 0,
175+
// totalUnique: 0,
176+
// unique: []
177+
// },
178+
// total: 0
179+
// }
173180
// }
174181
```
175182

‎src/analyzer/selectors/accessibility.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const uniquer = require('../../utils/uniquer')
2+
3+
function isA11ySelector(selector) {
4+
return selector.includes('[aria-') || selector.includes('[role=')
5+
}
6+
7+
module.exports = selectors => {
8+
const all = selectors.filter(isA11ySelector)
9+
10+
return {
11+
total: all.length,
12+
...uniquer(all)
13+
}
14+
}

‎src/analyzer/selectors/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ module.exports = selectors => {
44
const js = require('./js')(all)
55
const id = require('./id')(all)
66
const universal = require('./universal')(all)
7+
const accessibility = require('./accessibility')(all)
78
const specificity = require('./specificity')(all)
89
const identifiers = require('./identifiers')(all)
910

@@ -13,6 +14,7 @@ module.exports = selectors => {
1314
js,
1415
id,
1516
universal,
17+
accessibility,
1618
specificity,
1719
identifiers
1820
}

‎test/analyzer/index.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,11 @@ test('Returns the correct analysis object structure', async t => {
8282
total: 1
8383
},
8484
selectors: {
85+
accessibility: {
86+
total: 0,
87+
totalUnique: 0,
88+
unique: []
89+
},
8590
id: {
8691
total: 0,
8792
totalUnique: 0,

‎test/analyzer/selectors/input.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,17 @@
4848
color: #f00;
4949
}
5050

51+
/**
52+
* Accessibility-related selectors
53+
* Examples from https://inclusive-components.design
54+
*/
55+
[role="tablist"],
56+
[aria-selected],
57+
[aria-selected]::after,
58+
[role="menu"] a,
59+
:checked ~ [role="menu"],
60+
[role="menuitem"][aria-checked="true"]::before {}
61+
5162
/**
5263
* CSS Hacks
5364
* Contains universal selectors

0 commit comments

Comments
 (0)