Add aria-controls and remove aria-pressed in sidebar toggle

src/annotator/components/Toolbar.tsx

@@ -72,6 +72,12 @@ export type ToolbarProps = {
   /** Is the sidebar currently open? */
   isSidebarOpen: boolean;
 
+  /**
+   * The id attribute for the sidebar container to reference from the sidebar
+   * toggle's aria-controls attribute
+   */
+  sidebarContainerId?: string;
+
   /**
    * Informs which icon to show on the "Create annotation" button and what type
    * of annotation should be created by the `createAnnotation` callback. The
@@ -117,6 +123,7 @@ export default function Toolbar({
   closeSidebar,
   createAnnotation,
   isSidebarOpen,
+  sidebarContainerId,
   newAnnotationType,
   showHighlights,
   toggleHighlights,
@@ -171,7 +178,7 @@ export default function Toolbar({
             elementRef={toggleSidebarRef}
             title="Annotation sidebar"
             expanded={isSidebarOpen}
-            pressed={isSidebarOpen}
+            aria-controls={sidebarContainerId}
             onClick={toggleSidebar}
             unstyled
           >

src/annotator/components/test/Toolbar-test.js

@@ -100,6 +100,15 @@ describe('Toolbar', () => {
     });
   });
 
+  it('sets aria-controls in sidebar toggle button', () => {
+    const wrapper = createToolbar({ sidebarContainerId: 'foo' });
+
+    assert.equal(
+      findButton(wrapper, 'Annotation sidebar').prop('aria-controls'),
+      'foo',
+    );
+  });
+
   it(
     'should pass a11y checks',
     checkAccessibility([

src/annotator/sidebar.tsx

@@ -174,6 +174,7 @@ export class Sidebar implements Destroyable {
       this.iframeContainer = document.createElement('div');
       this.iframeContainer.style.display = 'none';
       this.iframeContainer.className = 'sidebar-container';
+      this.iframeContainer.id = 'sidebar-container';
 
       if (config.theme === 'clean') {
         this.iframeContainer.classList.add('theme-clean');
@@ -260,6 +261,7 @@ export class Sidebar implements Destroyable {
     // Set up the toolbar on the left edge of the sidebar.
     const toolbarContainer = document.createElement('div');
     this.toolbar = new ToolbarController(toolbarContainer, {
+      sidebarContainerId: this.iframeContainer?.id,
       createAnnotation: () => {
         if (this._guestRPC.length === 0) {
           return;

src/annotator/toolbar.tsx

@@ -7,6 +7,7 @@ export type ToolbarOptions = {
   createAnnotation: () => void;
   setSidebarOpen: (open: boolean) => void;
   setHighlightsVisible: (visible: boolean) => void;
+  sidebarContainerId?: string;
 };
 
 /**
@@ -21,6 +22,7 @@ export class ToolbarController {
   private _useMinimalControls: boolean;
   private _highlightsVisible: boolean;
   private _sidebarOpen: boolean;
+  private _sidebarContainerId?: string;
   private _closeSidebar: () => void;
   private _toggleSidebar: () => void;
   private _toggleHighlights: () => void;
@@ -38,6 +40,7 @@ export class ToolbarController {
     this._newAnnotationType = 'note';
     this._highlightsVisible = false;
     this._sidebarOpen = false;
+    this._sidebarContainerId = options.sidebarContainerId;
 
     this._closeSidebar = () => setSidebarOpen(false);
     this._toggleSidebar = () => setSidebarOpen(!this._sidebarOpen);
@@ -124,6 +127,7 @@ export class ToolbarController {
         createAnnotation={this._createAnnotation}
         newAnnotationType={this._newAnnotationType}
         isSidebarOpen={this._sidebarOpen}
+        sidebarContainerId={this._sidebarContainerId}
         showHighlights={this._highlightsVisible}
         toggleHighlights={this._toggleHighlights}
         toggleSidebar={this._toggleSidebar}