Bugfix to option menu (#145)

* Bugfix to option menu

* Add button role

app/assets/stylesheets/sage/system/patterns/objects/_live_option_menu.scss

@@ -13,6 +13,10 @@ $-live-option-menu-width: rem(224px);
 .sage-live-option-menu-anchor {
   position: relative;
 
+  &:focus {
+    outline: none;
+  }
+
   // Fill the window to create active space to click off of to turn off menu
   &[aria-expanded="true"]::before {
     content: "";
@@ -48,7 +52,7 @@ $-live-option-menu-width: rem(224px);
 .sage-live-option-menu {
   position: absolute;
   top: $-live-option-menu-offset-block;
-  z-index: sage-z-index(modal);
+  z-index: sage-z-index(default, -1);
   transform: rotate3d(1, 0, 0, -90deg);
   transform-origin: top center;
   min-width: min-content;
@@ -57,14 +61,15 @@ $-live-option-menu-width: rem(224px);
   background-color: sage-color(white);
   box-shadow: sage-shadow(md);
   transition: $sage-transition;
-  transition-property: transform;
+  transition-property: transform, z-index;
 
   &:not(.sage-live-option-menu--anchored-left) {
     right: $-live-option-menu-offset-inline;
   }
 
   [aria-expanded="true"] & {
     transform: rotate3d(0, 0, 0, 0);
+    z-index: sage-z-index(modal);
   }
 }
 

app/views/sage/examples/objects/live_option_menu/_preview.html.erb

@@ -1,4 +1,4 @@
-<div class="sage-live-option-menu-anchor" aria-has-popup="true" aria-expanded="false">
+<div class="sage-live-option-menu-anchor" aria-has-popup="true" aria-expanded="false" tabindex="0" role="button">
   <ul class="sage-live-option-menu" role="menu" aria-label="Participant options">
     <li role="none" class="sage-live-option-menu__item">
       <button role="menuitem" class="sage-live-option-menu__command">