jprdonnelly/docs
1
0
Fork 0
mirror of synced 2025-12-25 02:17:36 -05:00
Code Issues Projects Releases Wiki Activity

A11y: switch rest underlinenav to tabnav (#41152)

Browse Source
This commit is contained in:
Kevin Heis
2023-08-21 10:34:37 -07:00
committed by GitHub
parent bfd3c09343
commit 91fe04fcf0
1 changed files with 29 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
src/rest/components/RestCodeSamples.tsx
View File

@@ -1,5 +1,5 @@
import { useState, useEffect, useRef, FormEvent } from 'react'
import { FormControl, Select, Tooltip, UnderlineNav } from '@primer/react'
import { FormControl, Select, Tooltip, TabNav } from '@primer/react'
import { CheckIcon, CopyIcon } from '@primer/octicons-react'
import Cookies from 'components/lib/cookies'
import cx from 'classnames'
@@ -246,13 +246,15 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
<div className="my-0 p-3">
<RestMethod verb={operation.verb} requestPath={operation.requestPath} />
</div>
<div className="border-top d-inline-flex flex-justify-between width-full flex-items-center">
<div className="border-top d-inline-flex flex-justify-between width-full flex-items-center pt-2">
<div className="d-inline-flex ml-2">
<UnderlineNav aria-label="Example language selector">
<TabNav aria-label="Example language selector">
{languageSelectOptions.map((optionKey) => (
<UnderlineNav.Link
<TabNav.Link
key={optionKey}
onClick={() => {
selected={optionKey === selectedLanguage}
onClick={(e) => {
e.preventDefault()
handleLanguageSelection(optionKey)
}}
onKeyDown={(event) => {
@@ -260,17 +262,12 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
handleLanguageSelection(optionKey)
}
}}
tabIndex={0}
aria-current={optionKey === selectedLanguage}
className={cx('pr-3 mr-0', optionKey === selectedLanguage && 'PRC-selected')}
sx={{
cursor: 'pointer',
}}
href="#"
>
{t(`rest.reference.code_sample_options.${optionKey}`)}
</UnderlineNav.Link>
</TabNav.Link>
))}
</UnderlineNav>
</TabNav>
</div>
<div className="mr-2">
<Tooltip
@@ -309,36 +306,28 @@ export function RestCodeSamples({ operation, slug, heading }: Props) {
__html: displayedExample.response.description || t('rest.reference.response'),
}}
></h4>
<div className="border rounded-1">
{displayedExample.response.schema ? (
<UnderlineNav aria-label="Example response format selector">
{responseSelectOptions.map((optionKey) => {
if (!displayedExample.response.schema) return null
return (
<UnderlineNav.Link
key={optionKey}
onClick={() => {
<TabNav className="pt-2 mx-2" aria-label="Example response format selector">
{responseSelectOptions.map((optionKey) => (
<TabNav.Link
key={optionKey}
selected={optionKey === selectedResponse}
onClick={(e) => {
e.preventDefault()
handleResponseSelection(optionKey)
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
handleResponseSelection(optionKey)
}}
onKeyDown={(event) => {
if (event.key === 'Enter') {
handleResponseSelection(optionKey)
}
}}
tabIndex={0}
aria-current={optionKey === selectedResponse}
className={cx('pr-3 mr-0 ml-2', optionKey === selectedResponse && 'PRC-selected')}
sx={{
cursor: 'pointer',
}}
>
{t(`rest.reference.response_options.${optionKey}`)}
</UnderlineNav.Link>
)
})}
</UnderlineNav>
}
}}
href="#"
>
{t(`rest.reference.response_options.${optionKey}`)}
</TabNav.Link>
))}
</TabNav>
) : null}
<div className="">
{/* Status code */}