Skip to content

Commit 3180355

Browse files
DottenpixelDottenpixel
authored
fix(panel): Fix a11y Panel toggle button (#4681)
* add aria-pressed to panel toggle button * make test for Panel as a drawer to capture attribute * refactor Panel and PanelPlayground to function components
1 parent 446bc71 commit 3180355

File tree

6 files changed

+246
-224
lines changed

6 files changed

+246
-224
lines changed

‎RELEASENOTES.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
<!-- Release notes authoring guidelines: http://keepachangelog.com/ -->
22
<!-- !!! THIS FILE IS AUTO-GENERATED !!! DO NOT EDIT THIS FILE MANUALLY !!! -->
33

4+
## Release 2.15.7 - May 12, 2021
5+
6+
## Components
7+
### [Panels](https://www.lightningdesignsystem.com/components/panels)
8+
#### Added
9+
- Added `aria-pressed` attribute to Panel toggle button
10+
411
## Release 2.15.6 - May 7, 2021
512

613
## Components

‎ui/components/panels/RELEASENOTES.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,12 @@
44

55
<!-- ## [Unreleased] -->
66

7+
## 2.15.7
8+
9+
### Added
10+
11+
- Added `aria-pressed` attribute to Panel toggle button
12+
713
## 2.15.0
814

915
### Added

‎ui/components/panels/__tests__/__snapshots__/snapshot.spec.js.snap

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -596,6 +596,105 @@ exports[`render Panel component render Base Panel x-large size 1`] = `
596596
</div>
597597
`;
598598

599+
exports[`render Panel component renders Base Panel open as a drawer 1`] = `
600+
Array [
601+
<header
602+
className="demo-only-element slds-theme_default slds-border_bottom slds-p-around_small"
603+
style={
604+
Object {
605+
"zIndex": "1",
606+
}
607+
}
608+
>
609+
<button
610+
aria-controls="example-unique-id-1"
611+
aria-expanded={true}
612+
aria-pressed={true}
613+
className="slds-button slds-button_icon slds-is-selected slds-button_icon-border-filled slds-button_icon-border"
614+
onClick={[Function]}
615+
title="Toggle panel"
616+
>
617+
<svg
618+
aria-hidden={true}
619+
className="slds-button__icon"
620+
>
621+
<use
622+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#toggle_panel_left"
623+
/>
624+
</svg>
625+
<span
626+
className="slds-assistive-text"
627+
>
628+
Provide description of action
629+
</span>
630+
</button>
631+
</header>,
632+
<div
633+
className="demo-only-element"
634+
style={
635+
Object {
636+
"backgroundColor": "#fafaf9",
637+
"display": "flex",
638+
"flexDirection": false,
639+
"height": "600px",
640+
"overflow": "hidden",
641+
"position": "relative",
642+
}
643+
}
644+
>
645+
<div
646+
aria-hidden={false}
647+
className="slds-panel slds-size_medium slds-panel_docked slds-panel_docked-left slds-panel_drawer slds-is-open"
648+
id="example-unique-id-1"
649+
>
650+
<div
651+
className="slds-panel__header"
652+
>
653+
<h2
654+
className="slds-panel__header-title slds-text-heading_small slds-truncate"
655+
title="Panel Header"
656+
>
657+
Panel Header
658+
</h2>
659+
<div
660+
className="slds-panel__header-actions"
661+
>
662+
<button
663+
className="slds-button slds-button_icon slds-button_icon-small slds-panel__close"
664+
onClick={[Function]}
665+
title="Collapse Panel Header"
666+
>
667+
<svg
668+
aria-hidden={true}
669+
className="slds-button__icon"
670+
>
671+
<use
672+
xlinkHref="/assets/icons/utility-sprite/svg/symbols.svg#close"
673+
/>
674+
</svg>
675+
<span
676+
className="slds-assistive-text"
677+
>
678+
Collapse Panel Header
679+
</span>
680+
</button>
681+
</div>
682+
</div>
683+
<div
684+
className="slds-panel__body"
685+
>
686+
A panel body accepts any layout or component
687+
</div>
688+
</div>
689+
<div
690+
className="demo-only-content slds-col slds-p-around_medium"
691+
>
692+
This section is demo-only content representing a custom layout in conjunction with the panel. It is not a part of the blueprint.
693+
</div>
694+
</div>,
695+
]
696+
`;
697+
599698
exports[`render Panel component renders Base Panel with centered title text 1`] = `
600699
<div
601700
style={

‎ui/components/panels/__tests__/snapshot.spec.js

Lines changed: 20 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,25 @@ import { getDisplayElementById } from '../../../shared/helpers';
66
import { examples } from '../base/example';
77

88
const { matchesMarkup } = createHelpers(__dirname);
9+
const testContainerStyles = {
10+
backgroundColor: '#fafaf9',
11+
position: 'relative',
12+
height: '600px',
13+
overflow: 'hidden'
14+
};
915

1016
describe('render Panel component', () => {
1117
it('render Base Panel', () =>
1218
matchesMarkup(
13-
<div
14-
style={{
15-
backgroundColor: '#fafaf9',
16-
position: 'relative',
17-
height: '600px',
18-
overflow: 'hidden'
19-
}}
20-
>
19+
<div style={testContainerStyles}>
2120
<Panel size="medium" title="Panel Header" docked="left" invoke="toggle">
2221
A panel body accepts any layout or component
2322
</Panel>
2423
</div>
2524
));
2625
it('render Base Panel with left position drill in', () =>
2726
matchesMarkup(
28-
<div
29-
style={{
30-
backgroundColor: '#fafaf9',
31-
position: 'relative',
32-
height: '600px',
33-
overflow: 'hidden'
34-
}}
35-
>
27+
<div style={testContainerStyles}>
3628
<Panel
3729
size="medium"
3830
title="Panel Header"
@@ -45,14 +37,7 @@ describe('render Panel component', () => {
4537
));
4638
it('render Base Panel with right position drill in', () =>
4739
matchesMarkup(
48-
<div
49-
style={{
50-
backgroundColor: '#fafaf9',
51-
position: 'relative',
52-
height: '600px',
53-
overflow: 'hidden'
54-
}}
55-
>
40+
<div style={testContainerStyles}>
5641
<Panel
5742
size="medium"
5843
title="Panel Header"
@@ -65,14 +50,7 @@ describe('render Panel component', () => {
6550
));
6651
it('render Base Panel drawer', () =>
6752
matchesMarkup(
68-
<div
69-
style={{
70-
backgroundColor: '#fafaf9',
71-
position: 'relative',
72-
height: '600px',
73-
overflow: 'hidden'
74-
}}
75-
>
53+
<div style={testContainerStyles}>
7654
<Panel
7755
size="medium"
7856
title="Panel Header"
@@ -86,59 +64,31 @@ describe('render Panel component', () => {
8664
));
8765
it('render Base Panel small size', () =>
8866
matchesMarkup(
89-
<div
90-
style={{
91-
backgroundColor: '#fafaf9',
92-
position: 'relative',
93-
height: '600px',
94-
overflow: 'hidden'
95-
}}
96-
>
67+
<div style={testContainerStyles}>
9768
<Panel size="small" title="Panel Header" docked="left" invoke="toggle">
9869
A panel body accepts any layout or component
9970
</Panel>
10071
</div>
10172
));
10273
it('render Base Panel medium size', () =>
10374
matchesMarkup(
104-
<div
105-
style={{
106-
backgroundColor: '#fafaf9',
107-
position: 'relative',
108-
height: '600px',
109-
overflow: 'hidden'
110-
}}
111-
>
75+
<div style={testContainerStyles}>
11276
<Panel size="medium" title="Panel Header" docked="left" invoke="toggle">
11377
A panel body accepts any layout or component
11478
</Panel>
11579
</div>
11680
));
11781
it('render Base Panel large size', () =>
11882
matchesMarkup(
119-
<div
120-
style={{
121-
backgroundColor: '#fafaf9',
122-
position: 'relative',
123-
height: '600px',
124-
overflow: 'hidden'
125-
}}
126-
>
83+
<div style={testContainerStyles}>
12784
<Panel size="large" title="Panel Header" docked="left" invoke="toggle">
12885
A panel body accepts any layout or component
12986
</Panel>
13087
</div>
13188
));
13289
it('render Base Panel x-large size', () =>
13390
matchesMarkup(
134-
<div
135-
style={{
136-
backgroundColor: '#fafaf9',
137-
position: 'relative',
138-
height: '600px',
139-
overflow: 'hidden'
140-
}}
141-
>
91+
<div style={testContainerStyles}>
14292
<Panel
14393
size="x-large"
14494
title="Panel Header"
@@ -151,44 +101,23 @@ describe('render Panel component', () => {
151101
));
152102
it('render Base Panel full size', () =>
153103
matchesMarkup(
154-
<div
155-
style={{
156-
backgroundColor: '#fafaf9',
157-
position: 'relative',
158-
height: '600px',
159-
overflow: 'hidden'
160-
}}
161-
>
104+
<div style={testContainerStyles}>
162105
<Panel size="full" title="Panel Header" docked="left" invoke="toggle">
163106
A panel body accepts any layout or component
164107
</Panel>
165108
</div>
166109
));
167110
it('render Base Panel animated', () =>
168111
matchesMarkup(
169-
<div
170-
style={{
171-
backgroundColor: '#fafaf9',
172-
position: 'relative',
173-
height: '600px',
174-
overflow: 'hidden'
175-
}}
176-
>
112+
<div style={testContainerStyles}>
177113
<Panel isAnimated title="Panel Header" docked="left" invoke="toggle">
178114
A panel body accepts any layout or component
179115
</Panel>
180116
</div>
181117
));
182118
it('renders Base Panel with centered title text', () =>
183119
matchesMarkup(
184-
<div
185-
style={{
186-
backgroundColor: '#fafaf9',
187-
position: 'relative',
188-
height: '600px',
189-
overflow: 'hidden'
190-
}}
191-
>
120+
<div style={testContainerStyles}>
192121
<Panel
193122
isAnimated
194123
title="Panel Header"
@@ -202,14 +131,7 @@ describe('render Panel component', () => {
202131
));
203132
it('renders Base Panel with long header title', () =>
204133
matchesMarkup(
205-
<div
206-
style={{
207-
backgroundColor: '#fafaf9',
208-
position: 'relative',
209-
height: '600px',
210-
overflow: 'hidden'
211-
}}
212-
>
134+
<div style={testContainerStyles}>
213135
<Panel
214136
isAnimated
215137
title="Panel Header with a really, really long title name"
@@ -222,6 +144,8 @@ describe('render Panel component', () => {
222144
));
223145
it('renders Base Panel with secondary actions', () =>
224146
matchesMarkup(getDisplayElementById(examples, 'with-secondary-actions')));
147+
it('renders Base Panel open as a drawer', () =>
148+
matchesMarkup(getDisplayElementById(examples, 'drawer')));
225149
it('renders Base Panel with the deprecated header', () =>
226150
matchesMarkup(getDisplayElementById(examples, 'deprecated-panel-header')));
227151
});

‎ui/components/panels/base/example.jsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,11 @@ export let examples = [
8383
</Panel>
8484
)
8585
},
86+
{
87+
id: 'drawer',
88+
label: 'Open as a drawer',
89+
element: <PanelPlayground drawer />
90+
},
8691
{
8792
id: 'deprecated-panel-header',
8893
label: 'DEPRECATED - Panel Header',

0 commit comments

Comments
 (0)