From 927727e44af57cb856901f103711dd885c373de2 Mon Sep 17 00:00:00 2001 From: blunteshwar Date: Tue, 27 Jun 2023 14:55:51 +0530 Subject: [PATCH 1/9] testing --- packages/accordion/src/AccordionItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts index 56c6246e694..f0fb74cb811 100644 --- a/packages/accordion/src/AccordionItem.ts +++ b/packages/accordion/src/AccordionItem.ts @@ -1,5 +1,5 @@ /* -Copyright 2020 Adobe. All rights reserved. +Copyright. 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 From e8a19e58e6f0c4453dfc8cafd8bcf048fdbd473c Mon Sep 17 00:00:00 2001 From: blunteshwar Date: Thu, 6 Jul 2023 15:03:57 +0530 Subject: [PATCH 2/9] fix(menu): menu-item with submenu lacks aria-haspopup and aria-expanded --- packages/menu/src/MenuItem.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index 139691234ec..afd00b414d4 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -330,6 +330,10 @@ export class MenuItem extends LikeAnchor(Focusable) { flatten: true, }); this.hasSubmenu = this.open || !!assignedElements.length; + if (this.hasSubmenu) { + this.setAttribute('aria-haspopup', 'true'); + this.setAttribute('aria-controls', this.children[0].id); + } } private handleRemoveActive(event: Event): void { @@ -415,6 +419,8 @@ export class MenuItem extends LikeAnchor(Focusable) { } this.open = true; this.active = true; + + this.setAttribute('aria-expanded', 'true'); const submenu = ( this.shadowRoot.querySelector( 'slot[name="submenu"]' @@ -443,9 +449,11 @@ export class MenuItem extends LikeAnchor(Focusable) { const closeOverlay = openOverlay(this, 'click', popover, { placement: this.isLTR ? 'right-start' : 'left-start', receivesFocus: 'auto', + root: this.menuData.focusRoot, }); const closeSubmenu = async (): Promise => { + this.setAttribute('aria-expanded', 'false'); delete this.closeOverlay; (await closeOverlay)(); }; From e1e62c36cc198ab8428320a20af7163da1781155 Mon Sep 17 00:00:00 2001 From: blunteshwar Date: Thu, 6 Jul 2023 15:47:05 +0530 Subject: [PATCH 3/9] fix(menu): added aria-expanded and aria-haspopup to menu-item --- packages/menu/src/MenuItem.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index afd00b414d4..6c6df79906c 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -332,7 +332,7 @@ export class MenuItem extends LikeAnchor(Focusable) { this.hasSubmenu = this.open || !!assignedElements.length; if (this.hasSubmenu) { this.setAttribute('aria-haspopup', 'true'); - this.setAttribute('aria-controls', this.children[0].id); + //this.setAttribute('aria-controls', this.children[0].id); } } From 28ac6855f8d12fc5f00df19e902b79ede6b30e1a Mon Sep 17 00:00:00 2001 From: blunteshwar Date: Fri, 7 Jul 2023 14:29:35 +0530 Subject: [PATCH 4/9] fix(menu): fixed the aria-controls attribute of menu-item --- packages/menu/src/Menu.ts | 1 + packages/menu/src/MenuItem.ts | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts index 152c331dcca..8d6c16b7793 100644 --- a/packages/menu/src/Menu.ts +++ b/packages/menu/src/Menu.ts @@ -631,6 +631,7 @@ export class Menu extends SpectrumElement { } item.focused = this.hasVisibleFocusInTree(); this.setAttribute('aria-activedescendant', item.id); + if ( item.menuData.selectionRoot && item.menuData.selectionRoot !== this diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index 6c6df79906c..cb4d2f59453 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -332,7 +332,6 @@ export class MenuItem extends LikeAnchor(Focusable) { this.hasSubmenu = this.open || !!assignedElements.length; if (this.hasSubmenu) { this.setAttribute('aria-haspopup', 'true'); - //this.setAttribute('aria-controls', this.children[0].id); } } @@ -419,8 +418,8 @@ export class MenuItem extends LikeAnchor(Focusable) { } this.open = true; this.active = true; - this.setAttribute('aria-expanded', 'true'); + const submenu = ( this.shadowRoot.querySelector( 'slot[name="submenu"]' @@ -431,7 +430,10 @@ export class MenuItem extends LikeAnchor(Focusable) { this.handleSubmenuPointerenter ); submenu.addEventListener('change', this.handleSubmenuChange); + submenu.setAttribute('id', `${this.id}-submenu`); + this.setAttribute('aria-controls', submenu.id); const popover = document.createElement('sp-popover'); + const returnSubmenu = reparentChildren([submenu], popover, { position: 'beforeend', prepareCallback: (el) => { @@ -446,6 +448,7 @@ export class MenuItem extends LikeAnchor(Focusable) { }; }, }); + const closeOverlay = openOverlay(this, 'click', popover, { placement: this.isLTR ? 'right-start' : 'left-start', receivesFocus: 'auto', From 5c2318b9261b1803df8c88ff1b0876d49b38d6fe Mon Sep 17 00:00:00 2001 From: blunteshwar Date: Wed, 12 Jul 2023 16:51:50 +0530 Subject: [PATCH 5/9] fix(menu): reviewed changes --- packages/accordion/src/AccordionItem.ts | 2 +- packages/menu/src/MenuItem.ts | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/accordion/src/AccordionItem.ts b/packages/accordion/src/AccordionItem.ts index f0fb74cb811..56c6246e694 100644 --- a/packages/accordion/src/AccordionItem.ts +++ b/packages/accordion/src/AccordionItem.ts @@ -1,5 +1,5 @@ /* -Copyright. 2020 Adobe. All rights reserved. +Copyright 2020 Adobe. All rights reserved. This file is licensed to you under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index cb4d2f59453..857ceaa73bd 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -329,7 +329,7 @@ export class MenuItem extends LikeAnchor(Focusable) { const assignedElements = event.target.assignedElements({ flatten: true, }); - this.hasSubmenu = this.open || !!assignedElements.length; + this.hasSubmenu = this.open || !!assignedElements; if (this.hasSubmenu) { this.setAttribute('aria-haspopup', 'true'); } @@ -430,7 +430,10 @@ export class MenuItem extends LikeAnchor(Focusable) { this.handleSubmenuPointerenter ); submenu.addEventListener('change', this.handleSubmenuChange); - submenu.setAttribute('id', `${this.id}-submenu`); + if (!submenu.id) { + // if the consumer has already applied an ID to this element then we won't explicitly aplly ID + submenu.setAttribute('id', `${this.id}-submenu`); + } this.setAttribute('aria-controls', submenu.id); const popover = document.createElement('sp-popover'); From f213ac824d5d9b88c4968ab6ac88647f8c3bb52b Mon Sep 17 00:00:00 2001 From: blunteshwar Date: Wed, 12 Jul 2023 16:58:05 +0530 Subject: [PATCH 6/9] fix(menu): reviewed changes-2 --- packages/menu/src/MenuItem.ts | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index 857ceaa73bd..45e0d1292c0 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -436,7 +436,6 @@ export class MenuItem extends LikeAnchor(Focusable) { } this.setAttribute('aria-controls', submenu.id); const popover = document.createElement('sp-popover'); - const returnSubmenu = reparentChildren([submenu], popover, { position: 'beforeend', prepareCallback: (el) => { @@ -451,11 +450,9 @@ export class MenuItem extends LikeAnchor(Focusable) { }; }, }); - const closeOverlay = openOverlay(this, 'click', popover, { placement: this.isLTR ? 'right-start' : 'left-start', receivesFocus: 'auto', - root: this.menuData.focusRoot, }); const closeSubmenu = async (): Promise => { From 91c9a1bc43572eafceeefa905396064676c521af Mon Sep 17 00:00:00 2001 From: Piyush Vashisht Date: Tue, 18 Jul 2023 11:38:24 +0530 Subject: [PATCH 7/9] fix(menu): removed the comment --- packages/menu/src/MenuItem.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index 45e0d1292c0..780eb657425 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -431,7 +431,6 @@ export class MenuItem extends LikeAnchor(Focusable) { ); submenu.addEventListener('change', this.handleSubmenuChange); if (!submenu.id) { - // if the consumer has already applied an ID to this element then we won't explicitly aplly ID submenu.setAttribute('id', `${this.id}-submenu`); } this.setAttribute('aria-controls', submenu.id); From edb8ad285f88ab2c6a20cc64b731034122c48e57 Mon Sep 17 00:00:00 2001 From: Piyush Vashisht Date: Tue, 18 Jul 2023 14:14:57 +0530 Subject: [PATCH 8/9] fix(menu): removed white space --- packages/menu/src/Menu.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/menu/src/Menu.ts b/packages/menu/src/Menu.ts index 8d6c16b7793..152c331dcca 100644 --- a/packages/menu/src/Menu.ts +++ b/packages/menu/src/Menu.ts @@ -631,7 +631,6 @@ export class Menu extends SpectrumElement { } item.focused = this.hasVisibleFocusInTree(); this.setAttribute('aria-activedescendant', item.id); - if ( item.menuData.selectionRoot && item.menuData.selectionRoot !== this From 7a4ebd4795dca1e5612d7ed69b3fc49c98d571f2 Mon Sep 17 00:00:00 2001 From: Piyush Vashisht Date: Tue, 18 Jul 2023 14:16:22 +0530 Subject: [PATCH 9/9] fix(menu): white space removed --- packages/menu/src/MenuItem.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/menu/src/MenuItem.ts b/packages/menu/src/MenuItem.ts index 780eb657425..34c1c95ded8 100644 --- a/packages/menu/src/MenuItem.ts +++ b/packages/menu/src/MenuItem.ts @@ -419,7 +419,6 @@ export class MenuItem extends LikeAnchor(Focusable) { this.open = true; this.active = true; this.setAttribute('aria-expanded', 'true'); - const submenu = ( this.shadowRoot.querySelector( 'slot[name="submenu"]'