Skip to content

Commit 4f37119

Browse files
pimterrypimterry
committed
Include aria essentials on collapsible content buttons
1 parent 8c4594e commit 4f37119

File tree

8 files changed

+77
-47
lines changed

8 files changed

+77
-47
lines changed

‎src/components/common/collapsible-section.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ interface CollapsibleSectionProps {
1212
className?: string;
1313
withinGrid?: boolean;
1414
prefixTrigger?: boolean;
15+
contentName: string;
1516
}
1617

1718
const CollapsibleSectionWrapper = styled.section`
@@ -95,6 +96,7 @@ export class CollapsibleSection extends React.Component<CollapsibleSectionProps>
9596
canOpen={hasBody}
9697
withinGrid={withinGrid}
9798
onClick={this.toggleOpen}
99+
targetName={this.props.contentName}
98100
/>;
99101

100102
const summary = React.cloneElement(
@@ -150,12 +152,18 @@ const OPEN_ICON: IconProp = ['fas', 'minus'];
150152
const CLOSED_ICON: IconProp = ['fas', 'plus'];
151153

152154
const CollapsibleTrigger = styled((p: {
155+
targetName: string,
153156
open: boolean,
154157
canOpen: boolean,
155158
withinGrid: boolean,
156159
onClick: (e: React.SyntheticEvent) => void
157160
}) =>
158-
<button {..._.omit(p, ['open', 'canOpen', 'withinGrid'])}>
161+
<button
162+
aria-hidden={!p.canOpen}
163+
aria-label={`${p.open ? 'Hide' : 'Show'} ${p.targetName}`}
164+
aria-expanded={p.open}
165+
{..._.omit(p, ['open', 'canOpen', 'withinGrid'])}
166+
>
159167
<Icon icon={p.open ? OPEN_ICON : CLOSED_ICON} />
160168
</button>
161169
)`

‎src/components/view/http/header-details.tsx‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -203,7 +203,10 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
203203

204204
return <HeadersGrid>
205205
{
206-
pseudoHeaders.length > 0 && <CollapsibleSection withinGrid={true}>
206+
pseudoHeaders.length > 0 && <CollapsibleSection
207+
withinGrid={true}
208+
contentName='pseudo headers'
209+
>
207210
<CollapsibleSectionSummary>
208211
<PseudoHeadersHiddenMessage>
209212
HTTP/{props.httpVersion} pseudo-headers
@@ -227,7 +230,11 @@ export const HeaderDetails = inject('accountStore')(observer((props: {
227230
props.accountStore!.isPaidUser
228231
)
229232

230-
return <CollapsibleSection withinGrid={true} key={`${key}-${i}`}>
233+
return <CollapsibleSection
234+
contentName='header details'
235+
withinGrid={true}
236+
key={`${key}-${i}`}
237+
>
231238
<HeaderKeyValue headerKey={key} headerValue={value} />
232239

233240
{ description && <HeaderDescriptionContainer>
@@ -246,7 +253,10 @@ const PseudoHeaderDetails = observer((props: {
246253
}) => {
247254
return <HeadersGrid>
248255
{ _.flatMap(props.headers, ([key, value], i) => {
249-
return <CollapsibleSection withinGrid={true} key={`${key}-${i}`}>
256+
return <CollapsibleSection
257+
contentName='header details'
258+
withinGrid={true}
259+
key={`${key}-${i}`}>
250260
<HeaderKeyValue headerKey={key} headerValue={value} />
251261
</CollapsibleSection>;
252262
}) }

‎src/components/view/http/http-api-card.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -176,7 +176,7 @@ const ApiRequestDetails = (props: {
176176
const hasOperationDetails = !!operationDetails.length;
177177

178178
return <>
179-
<CollapsibleSection>
179+
<CollapsibleSection contentName='service description'>
180180
<CollapsibleSectionSummary>
181181
<ContentLabel>Service:</ContentLabel> { api.service.name }
182182
{ !api.service.description &&
@@ -195,7 +195,7 @@ const ApiRequestDetails = (props: {
195195
}
196196
</CollapsibleSection>
197197

198-
<CollapsibleSection>
198+
<CollapsibleSection contentName='operation description'>
199199
<CollapsibleSectionSummary>
200200
<ContentLabel>Operation:</ContentLabel> { api.operation.name }
201201
{ !hasOperationDetails &&
@@ -220,7 +220,11 @@ const ApiRequestDetails = (props: {
220220
</ContentLabelBlock>
221221
<ParametersGrid>
222222
{ relevantParameters.map((param) =>
223-
<CollapsibleSection withinGrid={true} key={param.name}>
223+
<CollapsibleSection
224+
contentName='parameter description'
225+
withinGrid={true}
226+
key={param.name}
227+
>
224228
<ParameterKeyValue>
225229
<ParamName>{ param.name }: </ParamName>
226230

‎src/components/view/http/http-performance-card.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -307,7 +307,11 @@ const CachingPerformance = observer((p: { exchange: HttpExchange }) => {
307307
Caching
308308
</ContentLabelBlock>
309309
{ cacheDetails.map((details, i) =>
310-
<CollapsibleSection prefixTrigger={true} key={i}>
310+
<CollapsibleSection
311+
contentName='detailed explanation'
312+
prefixTrigger={true}
313+
key={i}
314+
>
311315
<CollapsibleSectionSummary>
312316
{ details.summary }{' '}
313317
{ details.type === 'warning' && <WarningIcon /> }

‎src/components/view/http/http-request-card.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -104,7 +104,7 @@ const RawRequestDetails = (p: {
104104
].filter(d => !!d);
105105

106106
return <div>
107-
<CollapsibleSection>
107+
<CollapsibleSection contentName='method details'>
108108
<CollapsibleSectionSummary>
109109
<ContentLabel>Method:</ContentLabel> { p.request.method }
110110
</CollapsibleSectionSummary>
@@ -120,7 +120,10 @@ const RawRequestDetails = (p: {
120120

121121
<ContentLabelBlock>URL</ContentLabelBlock>
122122

123-
<CollapsibleSection prefixTrigger={true}>
123+
<CollapsibleSection
124+
contentName='URL components'
125+
prefixTrigger={true}
126+
>
124127
<CollapsibleSectionSummary>
125128
<ContentMonoValueInline>{
126129
p.request.parsedUrl.parseable

‎src/components/view/http/http-response-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ export const HttpResponseCard = observer((props: HttpResponseCardProps) => {
7171
</header>
7272

7373
<div>
74-
<CollapsibleSection>
74+
<CollapsibleSection contentName='status details'>
7575
<CollapsibleSectionSummary>
7676
<ContentLabel>Status:</ContentLabel>{' '}
7777
{response.statusCode} {response.statusMessage || getStatusMessage(response.statusCode)}

‎src/components/view/rtc/rtc-connection-card.tsx‎

Lines changed: 36 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@ import * as React from 'react';
88
import { computed } from 'mobx';
99
import { observer } from 'mobx-react';
1010

11+
import { styled } from '../../../styles';
12+
1113
import { UNKNOWN_SOURCE } from '../../../model/http/sources';
1214
import { RTCConnection } from '../../../model/webrtc/rtc-connection';
1315
import { getSummaryColor } from '../../../model/events/categorization';
@@ -37,6 +39,11 @@ interface RTCConnectionCardProps extends ExpandableCardProps {
3739
onCollapseToggled?: () => void;
3840
};
3941

42+
// Approx matches the spacing of collabsible sections:
43+
const ContentLabelPair = styled.div`
44+
padding: 3px 0 12px 0;
45+
`;
46+
4047
@observer
4148
export class RTCConnectionCard extends React.Component<RTCConnectionCardProps> {
4249

@@ -86,44 +93,38 @@ export class RTCConnectionCard extends React.Component<RTCConnectionCardProps> {
8693
</CollapsibleCardHeading>
8794
</header>
8895

89-
<CollapsibleSection>
90-
<CollapsibleSectionSummary>
91-
<ContentLabel>Connection type: </ContentLabel>
92-
<ContentValue>
93-
{
94-
connection.remoteCandidate.type === 'host'
95-
? 'Direct'
96-
: connection.remoteCandidate.type === 'relay'
97-
? 'TURN-relayed'
98-
: connection.remoteCandidate.type === 'srflx'
99-
? 'STUN-directed'
100-
: // === prflx
101-
'Peer-reflexive'
102-
} {
103-
connection.remoteCandidate.protocol.toUpperCase()
104-
}
105-
</ContentValue>
106-
</CollapsibleSectionSummary>
107-
</CollapsibleSection>
108-
109-
<CollapsibleSection>
110-
<CollapsibleSectionSummary>
111-
<ContentLabel>From: </ContentLabel>
112-
<ContentMonoValueInline>{ connection.clientURL }</ContentMonoValueInline>
113-
</CollapsibleSectionSummary>
114-
</CollapsibleSection>
115-
116-
<CollapsibleSection>
117-
<CollapsibleSectionSummary>
118-
<ContentLabel>To: </ContentLabel>
119-
<ContentMonoValueInline>{ connection.remoteURL }</ContentMonoValueInline>
120-
</CollapsibleSectionSummary>
121-
</CollapsibleSection>
96+
<ContentLabelPair>
97+
<ContentLabel>Connection type: </ContentLabel>
98+
<ContentValue>
99+
{
100+
connection.remoteCandidate.type === 'host'
101+
? 'Direct'
102+
: connection.remoteCandidate.type === 'relay'
103+
? 'TURN-relayed'
104+
: connection.remoteCandidate.type === 'srflx'
105+
? 'STUN-directed'
106+
: // === prflx
107+
'Peer-reflexive'
108+
} {
109+
connection.remoteCandidate.protocol.toUpperCase()
110+
}
111+
</ContentValue>
112+
</ContentLabelPair>
113+
114+
<ContentLabelPair>
115+
<ContentLabel>From: </ContentLabel>
116+
<ContentMonoValueInline>{ connection.clientURL }</ContentMonoValueInline>
117+
</ContentLabelPair>
118+
119+
<ContentLabelPair>
120+
<ContentLabel>To: </ContentLabel>
121+
<ContentMonoValueInline>{ connection.remoteURL }</ContentMonoValueInline>
122+
</ContentLabelPair>
122123

123124
{ connection.sourceURL && <>
124125
<ContentLabelBlock>Source page: </ContentLabelBlock>
125126

126-
<CollapsibleSection prefixTrigger={true}>
127+
<CollapsibleSection contentName='URL components' prefixTrigger={true}>
127128
<CollapsibleSectionSummary>
128129
<ContentMonoValueInline>
129130
{ connection.sourceURL.toString() }
@@ -139,7 +140,7 @@ export class RTCConnectionCard extends React.Component<RTCConnectionCardProps> {
139140
{ connection.source !== UNKNOWN_SOURCE && <>
140141
<ContentLabelBlock>Client: </ContentLabelBlock>
141142

142-
<CollapsibleSection prefixTrigger={true}>
143+
<CollapsibleSection contentName='source details' prefixTrigger={true}>
143144
<CollapsibleSectionSummary>
144145
<ContentMonoValueInline>
145146
{ connection.source.ua }

‎src/components/view/websocket-close-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export const WebSocketCloseCard = observer((props: WebSocketCloseCardProps) => {
7575
</CollapsibleCardHeading>
7676
</header>
7777

78-
<CollapsibleSection>
78+
<CollapsibleSection contentName='close code details'>
7979
<CollapsibleSectionSummary>
8080
<ContentLabel>Close code: </ContentLabel>
8181
{ closeCode

0 commit comments

Comments
 (0)