Skip to content

Commit

Permalink
fix(controls): Add aria-expanded to sidebar toggle button (#1407)
Browse files Browse the repository at this point in the history
  • Loading branch information
matiaslionel authored Jul 7, 2021
1 parent 2c53a76 commit 9187577
Show file tree
Hide file tree
Showing 4 changed files with 16 additions and 2 deletions.
4 changes: 3 additions & 1 deletion src/lib/viewers/controls/sidebar/ThumbnailsToggle.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,18 @@ import IconThumbnailsToggle24 from '../icons/IconThumbnailsToggle24';
import './ThumbnailsToggle.scss';

export type Props = {
isThumbnailsOpen?: boolean;
onThumbnailsToggle?: () => void;
};

export default function ThumbnailsToggle({ onThumbnailsToggle }: Props): JSX.Element | null {
export default function ThumbnailsToggle({ onThumbnailsToggle, isThumbnailsOpen }: Props): JSX.Element | null {
if (!onThumbnailsToggle) {
return null;
}

return (
<button
aria-expanded={isThumbnailsOpen}
className="bp-ThumbnailsToggle"
onClick={onThumbnailsToggle}
title={__('toggle_thumbnails')}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,5 +30,15 @@ describe('ThumbnailsToggle', () => {

expect(wrapper.isEmptyRender()).toBe(true);
});

test('should have a property aria-expanded setted to false', () => {
const wrapper = getWrapper({ onThumbnailsToggle: jest.fn(), isThumbnailsOpen: false });
expect(wrapper.prop('aria-expanded')).toBe(false);
});

test('should have a property aria-expanded setted to true', () => {
const wrapper = getWrapper({ onThumbnailsToggle: jest.fn(), isThumbnailsOpen: true });
expect(wrapper.prop('aria-expanded')).toBe(true);
});
});
});
1 change: 1 addition & 0 deletions src/lib/viewers/doc/DocBaseViewer.js
Original file line number Diff line number Diff line change
Expand Up @@ -1082,6 +1082,7 @@ class DocBaseViewer extends BaseViewer {
hasDrawing={canAnnotate && showAnnotationsDrawingCreate}
hasHighlight={canAnnotate && canDownload}
hasRegion={canAnnotate}
isThumbnailsOpen={this.thumbnailsSidebar && this.thumbnailsSidebar.isOpen}
maxScale={MAX_SCALE}
minScale={MIN_SCALE}
onAnnotationColorChange={this.handleAnnotationColorChange}
Expand Down
3 changes: 2 additions & 1 deletion src/lib/viewers/doc/DocControls.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export default function DocControls({
hasDrawing,
hasHighlight,
hasRegion,
isThumbnailsOpen,
maxScale,
minScale,
onAnnotationColorChange,
Expand All @@ -45,7 +46,7 @@ export default function DocControls({
<ExperiencesProvider experiences={experiences}>
<ControlsBar>
<ControlsBarGroup>
<ThumbnailsToggle onThumbnailsToggle={onThumbnailsToggle} />
<ThumbnailsToggle isThumbnailsOpen={isThumbnailsOpen} onThumbnailsToggle={onThumbnailsToggle} />
<FindBarToggle onFindBarToggle={onFindBarToggle} />
</ControlsBarGroup>
<ControlsBarGroup isDistinct>
Expand Down

0 comments on commit 9187577

Please sign in to comment.