jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-19 18:10:59 -05:00
Code Issues Projects Releases Wiki Activity

accessibility audit #4451 (#39631)

Browse Source
This commit is contained in:
Rachael Sewell
2023-07-25 14:37:55 -07:00
committed by GitHub
parent 0251a4f1ce
commit 2f94cd7074
4 changed files with 80 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
data/ui.yml
View File

@@ -84,6 +84,7 @@ contribution_cta:
to_guidelines: Learn how to contribute to_guidelines: Learn how to contribute
parameter_table: parameter_table:
body: Body parameters body: Body parameters
webhook-body: Webhook request body parameters
default: Default default: Default
description: Description description: Description
enum_description_title: Can be one of enum_description_title: Can be one of

140
src/automated-pipelines/components/parameter-table/ParameterTable.tsx
View File

@@ -16,6 +16,7 @@ type Props = {
bodyParameters: Array<BodyParameter> bodyParameters: Array<BodyParameter>
bodyParamExpandCallback?: KeyboardEventHandler<HTMLButtonElement> | undefined bodyParamExpandCallback?: KeyboardEventHandler<HTMLButtonElement> | undefined
clickedBodyParameterName?: string | undefined clickedBodyParameterName?: string | undefined
variant?: 'rest' | 'webhooks'
} }
export function ParameterTable({ export function ParameterTable({
@@ -27,6 +28,7 @@ export function ParameterTable({
bodyParameters, bodyParameters,
bodyParamExpandCallback = undefined, bodyParamExpandCallback = undefined,
clickedBodyParameterName = '', clickedBodyParameterName = '',
variant = 'rest',
}: Props) { }: Props) {
const { t } = useTranslation(['parameter_table', 'products']) const { t } = useTranslation(['parameter_table', 'products'])
const queryParams = parameters.filter((param) => param.in === 'query') const queryParams = parameters.filter((param) => param.in === 'query')
@@ -40,28 +42,21 @@ export function ParameterTable({
</h3> </h3>
)} )}
<table {headers.length > 0 && (
className={cx(styles.parameterTable)} <>
summary="Column one has the type of parameter and the other columns show the name, type, and description of the parameters" {/* <h4 id="headers-table-heading">{t('headers')}</h4> */}
> <table
<thead> className={cx(styles.parameterTable)}
<tr> 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."
<th aria-labelledby="headers-table-heading"
id="header" >
scope="col" <caption className="mt-3 mb-3 h5 float-left">{t('headers')}</caption>
className={cx(headers.length === 0 && 'visually-hidden', 'text-bold pl-0')} <thead className="visually-hidden">
> <tr>
{t('headers')} <th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
</th> </tr>
</tr> </thead>
<tr className="visually-hidden"> <tbody>
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
</tr>
</thead>
<tbody>
{headers.length > 0 && (
<>
{headers.map((header, index) => ( {headers.map((header, index) => (
<ParameterRow <ParameterRow
rowParams={header} rowParams={header}
@@ -70,19 +65,26 @@ export function ParameterTable({
key={`${index}-${header.name}`} key={`${index}-${header.name}`}
/> />
))} ))}
</> </tbody>
)} </table>
</>
)}
{pathParams.length > 0 && ( {pathParams.length > 0 && (
<> <>
<tr className="border-top-0"> {/* <h4 id="path-table-heading">{t('path')}</h4> */}
<th className="text-bold pl-0 border-top-0" scope="colgroup"> <table
{t('path')} className={cx(styles.parameterTable)}
</th> 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."
</tr> aria-labelledby="path-table-heading"
<tr className="visually-hidden"> >
<th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th> <caption className="mt-3 mb-3 h5 float-left">{t('path')}</caption>
<thead className="visually-hidden">
<tr>
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
</tr> </tr>
</thead>
<tbody>
{pathParams.map((param, index) => ( {pathParams.map((param, index) => (
<ParameterRow <ParameterRow
rowParams={{ rowParams={{
@@ -97,20 +99,26 @@ export function ParameterTable({
key={`${index}-${param}`} key={`${index}-${param}`}
/> />
))} ))}
</> </tbody>
)} </table>
</>
)}
{queryParams.length > 0 && ( {queryParams.length > 0 && (
<> <>
<tr className="border-top-0"> {/* <h4 id="query-table-heading">{t('query')}</h4> */}
<th className="text-bold pl-0" scope="colgroup"> <table
{t('query')} className={cx(styles.parameterTable)}
</th> 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."
aria-labelledby="query-table-heading"
>
<caption className="mt-3 mb-3 h5 float-left">{t('query')}</caption>
<thead className="visually-hidden">
<tr>
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
</tr> </tr>
<tr className="visually-hidden"> </thead>
<th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th> <tbody>
</tr>
{queryParams.map((param, index) => ( {queryParams.map((param, index) => (
<ParameterRow <ParameterRow
rowParams={{ rowParams={{
@@ -125,22 +133,28 @@ export function ParameterTable({
key={`${index}-${param}`} key={`${index}-${param}`}
/> />
))} ))}
</> </tbody>
)} </table>
</>
)}
{bodyParameters.length > 0 && ( {bodyParameters.length > 0 && (
<> <>
<tr className="border-top-0"> {/* <h4 id="body-table-heading">{variant === 'rest' ? t('body') : t('webhook-body')}</h4> */}
{/* webhooks don't have a 'Parameters' table heading text so <table
we adjust the size of the body params heading in that case */} className={cx(styles.parameterTable)}
<th scope="colgroup" className={cx(heading ? 'text-bold' : 'h4', 'pl-0')}> 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."
{t('body')} aria-labelledby="body-table-heading"
</th> >
<caption className="mt-3 mb-3 h5 float-left">
{variant === 'rest' ? t('body') : t('webhook-body')}
</caption>
<thead className="visually-hidden">
<tr>
<th scope="col">{`${t('name')}, ${t('type')}, ${t('description')}`}</th>
</tr> </tr>
<tr className="visually-hidden"> </thead>
<th scope="colgroup">{`${t('name')}, ${t('type')}, ${t('description')}`}</th> <tbody>
</tr>
{bodyParameters.map((param, index) => ( {bodyParameters.map((param, index) => (
<ParameterRow <ParameterRow
bodyParamExpandCallback={bodyParamExpandCallback} bodyParamExpandCallback={bodyParamExpandCallback}
@@ -150,10 +164,10 @@ export function ParameterTable({
key={`${index}-${param}`} key={`${index}-${param}`}
/> />
))} ))}
</> </tbody>
)} </table>
</tbody> </>
</table> )}
</> </>
) )
} }

1
src/webhooks/components/Webhook.tsx
View File

@@ -236,6 +236,7 @@ export function Webhook({ webhook }: Props) {
bodyParameters={currentWebhookAction.bodyParameters || []} bodyParameters={currentWebhookAction.bodyParameters || []}
bodyParamExpandCallback={handleBodyParamExpansion} bodyParamExpandCallback={handleBodyParamExpansion}
clickedBodyParameterName={clickedBodyParameterName} clickedBodyParameterName={clickedBodyParameterName}
variant="webhooks"
/> />
</div> </div>
</div> </div>

1
tests/fixtures/data/ui.yml vendored
View File

@@ -84,6 +84,7 @@ contribution_cta:
to_guidelines: Learn how to contribute to_guidelines: Learn how to contribute
parameter_table: parameter_table:
body: Body parameters body: Body parameters
webhook-body: Webhook request body parameters
default: Default default: Default
description: Description description: Description
enum_description_title: Can be one of enum_description_title: Can be one of