Skip to content

Commit 2f94cd7

Browse files
rachmarirachmari
authored
accessibility audit #4451 (#39631)
1 parent 0251a4f commit 2f94cd7

File tree

4 files changed

+80
-63
lines changed

4 files changed

+80
-63
lines changed

‎data/ui.yml

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ contribution_cta:
8484
to_guidelines: Learn how to contribute
8585
parameter_table:
8686
body: Body parameters
87+
webhook-body: Webhook request body parameters
8788
default: Default
8889
description: Description
8990
enum_description_title: Can be one of

‎src/automated-pipelines/components/parameter-table/ParameterTable.tsx

+77-63
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ type Props = {
1616
bodyParameters: Array<BodyParameter>
1717
bodyParamExpandCallback?: KeyboardEventHandler<HTMLButtonElement> | undefined
1818
clickedBodyParameterName?: string | undefined
19+
variant?: 'rest' | 'webhooks'
1920
}
2021

2122
export function ParameterTable({
@@ -27,6 +28,7 @@ export function ParameterTable({
2728
bodyParameters,
2829
bodyParamExpandCallback = undefined,
2930
clickedBodyParameterName = '',
31+
variant = 'rest',
3032
}: Props) {
3133
const { t } = useTranslation(['parameter_table', 'products'])
3234
const queryParams = parameters.filter((param) => param.in === 'query')
@@ -40,28 +42,21 @@ export function ParameterTable({
4042
</h3>
4143
)}
4244

43-
<table
44-
className={cx(styles.parameterTable)}
45-
summary="Column one has the type of parameter and the other columns show the name, type, and description of the parameters"
46-
>
47-
<thead>
48-
<tr>
49-
<th
50-
id="header"
51-
scope="col"
52-
className={cx(headers.length === 0 && 'visually-hidden', 'text-bold pl-0')}
53-
>
54-
{t('headers')}
55-
</th>
56-
</tr>
57-
<tr className="visually-hidden">
58-
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
59-
</tr>
60-
</thead>
61-
62-
<tbody>
63-
{headers.length > 0 && (
64-
<>
45+
{headers.length > 0 && (
46+
<>
47+
{/* <h4 id="headers-table-heading">{t('headers')}</h4> */}
48+
<table
49+
className={cx(styles.parameterTable)}
50+
summary="Column one describes the parameter. The first line includes the name, type, and whether the parameter is required. The second line is a description of the parameter."
51+
aria-labelledby="headers-table-heading"
52+
>
53+
<caption className="mt-3 mb-3 h5 float-left">{t('headers')}</caption>
54+
<thead className="visually-hidden">
55+
<tr>
56+
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
57+
</tr>
58+
</thead>
59+
<tbody>
6560
{headers.map((header, index) => (
6661
<ParameterRow
6762
rowParams={header}
@@ -70,19 +65,26 @@ export function ParameterTable({
7065
key={`${index}-${header.name}`}
7166
/>
7267
))}
73-
</>
74-
)}
68+
</tbody>
69+
</table>
70+
</>
71+
)}
7572

76-
{pathParams.length > 0 && (
77-
<>
78-
<tr className="border-top-0">
79-
<th className="text-bold pl-0 border-top-0" scope="colgroup">
80-
{t('path')}
81-
</th>
82-
</tr>
83-
<tr className="visually-hidden">
84-
<th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
73+
{pathParams.length > 0 && (
74+
<>
75+
{/* <h4 id="path-table-heading">{t('path')}</h4> */}
76+
<table
77+
className={cx(styles.parameterTable)}
78+
summary="Column one describes the parameter. The first line includes the name, type, and whether the parameter is required. The second line is a description of the parameter."
79+
aria-labelledby="path-table-heading"
80+
>
81+
<caption className="mt-3 mb-3 h5 float-left">{t('path')}</caption>
82+
<thead className="visually-hidden">
83+
<tr>
84+
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
8585
</tr>
86+
</thead>
87+
<tbody>
8688
{pathParams.map((param, index) => (
8789
<ParameterRow
8890
rowParams={{
@@ -97,20 +99,26 @@ export function ParameterTable({
9799
key={`${index}-${param}`}
98100
/>
99101
))}
100-
</>
101-
)}
102+
</tbody>
103+
</table>
104+
</>
105+
)}
102106

103-
{queryParams.length > 0 && (
104-
<>
105-
<tr className="border-top-0">
106-
<th className="text-bold pl-0" scope="colgroup">
107-
{t('query')}
108-
</th>
109-
</tr>
110-
<tr className="visually-hidden">
111-
<th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
107+
{queryParams.length > 0 && (
108+
<>
109+
{/* <h4 id="query-table-heading">{t('query')}</h4> */}
110+
<table
111+
className={cx(styles.parameterTable)}
112+
summary="Column one describes the parameter. The first line includes the name, type, and whether the parameter is required. The second line is a description of the parameter."
113+
aria-labelledby="query-table-heading"
114+
>
115+
<caption className="mt-3 mb-3 h5 float-left">{t('query')}</caption>
116+
<thead className="visually-hidden">
117+
<tr>
118+
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
112119
</tr>
113-
120+
</thead>
121+
<tbody>
114122
{queryParams.map((param, index) => (
115123
<ParameterRow
116124
rowParams={{
@@ -125,22 +133,28 @@ export function ParameterTable({
125133
key={`${index}-${param}`}
126134
/>
127135
))}
128-
</>
129-
)}
136+
</tbody>
137+
</table>
138+
</>
139+
)}
130140

131-
{bodyParameters.length > 0 && (
132-
<>
133-
<tr className="border-top-0">
134-
{/* webhooks don't have a 'Parameters' table heading text so
135-
we adjust the size of the body params heading in that case */}
136-
<th scope="colgroup" className={cx(heading ? 'text-bold' : 'h4', 'pl-0')}>
137-
{t('body')}
138-
</th>
139-
</tr>
140-
<tr className="visually-hidden">
141-
<th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
141+
{bodyParameters.length > 0 && (
142+
<>
143+
{/* <h4 id="body-table-heading">{variant === 'rest' ? t('body') : t('webhook-body')}</h4> */}
144+
<table
145+
className={cx(styles.parameterTable)}
146+
summary="Column one describes the parameter. The first line includes the name, type, and whether the parameter is required. The second line is a description of the parameter."
147+
aria-labelledby="body-table-heading"
148+
>
149+
<caption className="mt-3 mb-3 h5 float-left">
150+
{variant === 'rest' ? t('body') : t('webhook-body')}
151+
</caption>
152+
<thead className="visually-hidden">
153+
<tr>
154+
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
142155
</tr>
143-
156+
</thead>
157+
<tbody>
144158
{bodyParameters.map((param, index) => (
145159
<ParameterRow
146160
bodyParamExpandCallback={bodyParamExpandCallback}
@@ -150,10 +164,10 @@ export function ParameterTable({
150164
key={`${index}-${param}`}
151165
/>
152166
))}
153-
</>
154-
)}
155-
</tbody>
156-
</table>
167+
</tbody>
168+
</table>
169+
</>
170+
)}
157171
</>
158172
)
159173
}

‎src/webhooks/components/Webhook.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -236,6 +236,7 @@ export function Webhook({ webhook }: Props) {
236236
bodyParameters={currentWebhookAction.bodyParameters || []}
237237
bodyParamExpandCallback={handleBodyParamExpansion}
238238
clickedBodyParameterName={clickedBodyParameterName}
239+
variant="webhooks"
239240
/>
240241
</div>
241242
</div>

‎tests/fixtures/data/ui.yml

+1
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,7 @@ contribution_cta:
8484
to_guidelines: Learn how to contribute
8585
parameter_table:
8686
body: Body parameters
87+
webhook-body: Webhook request body parameters
8788
default: Default
8889
description: Description
8990
enum_description_title: Can be one of

0 commit comments

Comments
 (0)