fix: Issue 2129 - Chnges added to fix CSS and ARIA issue (#2230)

components/vf-dropdown/CHANGELOG.md

+### 1.0.4
+
+* Fix: Corrected CSS and added ARIA attribute - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2129).
+
 ### 1.0.3
 
 * Updated status to live - [Tracking issue](https://github.com/visual-framework/vf-core/issues/2170).

components/vf-dropdown/vf-dropdown.njk

@@ -18,9 +18,9 @@
   </div>
   <div class="vf-dropdown__menu-container">
     <div class="vf-dropdown-overlay"></div>
-    <div class="vf-dropdown__menu">
+    <div class="vf-dropdown__menu" role="menu">
       {% for item in menuItems %}
-        <div class="vf-dropdown__menu-item">
+        <div class="vf-dropdown__menu-item" role="menuitem">
           <a class="vf-dropdown__menu-item-link" href="{{item.link_href}}">{{item.text}}</a>
         </div>
       {% endfor %}

components/vf-dropdown/vf-dropdown.scss

@@ -23,6 +23,7 @@
 // @import 'vf-dropdown/vf-dropdown.scss';
 
 .vf-dropdown {
+  background-color: var(--vf-color--neutral--0);
   display: inline-block;
 }
 .vf-dropdown__label-container {
@@ -41,10 +42,10 @@
 }
 .vf-dropdown__menu-container {
   display: none;
+  box-shadow: 2px 3px 4px 0px neutral(600);
 }
 .vf-dropdown__menu {
   border-top: 1px solid neutral(200);
-  box-shadow: 0px 3px 6px 1px neutral(100);
   padding: .5rem 0;
   position: relative;
   z-index: set-layer(vf-z-index--overlay-top-content);