fix: set toolbar role on the toolbar buttons container (#6499) (#6501)

Co-authored-by: sujoykd <[email protected]>
vaadin · Sep 15, 2023 · 159209c · 159209c
1 parent 4dd6ee5
commit 159209c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 1 deletion.
diff --git a/packages/rich-text-editor/src/vaadin-rich-text-editor.js b/packages/rich-text-editor/src/vaadin-rich-text-editor.js
@@ -159,7 +159,7 @@ class RichTextEditor extends ElementMixin(ThemableMixin(PolymerElement)) {
 
       <div class="vaadin-rich-text-editor-container">
         <!-- Create toolbar container -->
-        <div part="toolbar">
+        <div part="toolbar" role="toolbar">
           <span part="toolbar-group toolbar-group-history">
             <!-- Undo and Redo -->
             <button id="btn-undo" type="button" part="toolbar-button toolbar-button-undo" on-click="_undo"></button>

diff --git a/packages/rich-text-editor/test/a11y.test.js b/packages/rich-text-editor/test/a11y.test.js
@@ -77,6 +77,11 @@ describe('accessibility', () => {
       });
       editor.setSelection(5, 1);
     });
+
+    it('should have role toolbar on the toolbar', () => {
+      const toolbar = rte.shadowRoot.querySelector('[part=toolbar]');
+      expect(toolbar.getAttribute('role')).to.be.equal('toolbar');
+    });
   });
 
   describe('keyboard navigation', () => {