Accessibility fixes

- Aria landmarks
 - Title attributes to all icon only buttons
 - <Multibutton/> now internally a radio group
 - Replaced 1 'skip navigation link' with UI group links
 - Added map specific shortcuts to the shortcut menu
 - Hidden layer list actions from tab index

src/styles/_filtereditor.scss

@@ -78,3 +78,19 @@
   width: 92.5%;
 }
 
+.maputnik-radio-as-button {
+  @extend .maputnik-button;
+
+  border: solid 1px transparent;
+
+  &:focus-within {
+    border: solid 1px $color-white;
+  }
+
+  input {
+    width: 0;
+    overflow: hidden;
+    opacity: 0;
+    margin: 0;
+  }
+}

src/styles/_layer.scss

@@ -36,6 +36,7 @@
   &-item-handle {
     flex: 1;
     display: flex;
+    cursor: grab;
 
     svg {
       margin-right: 4px;
@@ -43,12 +44,11 @@
   }
 
   &-item {
+    border: solid 1px transparent;
     font-weight: 400;
     color: $color-lowgray;
     font-size: $font-size-6;
-    border-width: 0 0 1px;
-    border-style: solid;
-    border-color: lighten($color-black, 0.1);
+    border-bottom-color: lighten($color-black, 0.1);
     user-select: none;
     list-style: none;
     z-index: 2000;
@@ -61,6 +61,10 @@
     -webkit-transition: opacity 600ms, visibility 600ms;
     transition: opacity 600ms, visibility 600ms;
 
+    &:focus-within {
+      border: solid 1px $color-lowgray;
+    }
+
     @media screen and (prefers-reduced-motion: reduce) {
       transition-duration: 0;
     }
@@ -131,22 +135,33 @@
   }
 
   &-item-id {
+    all: inherit;
     width: 115px;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
     color: inherit;
     text-decoration: none;
+    cursor: pointer;
   }
 
   &-group-header {
+    border: solid 1px transparent;
     font-size: $font-size-6;
     color: $color-lowgray;
     background-color: lighten($color-black, 2);
-    cursor: pointer;
     user-select: none;
     padding: $margin-2;
 
+    &:focus-within {
+      border: solid 1px $color-lowgray;
+    }
+
+    button {
+      all: unset;
+      cursor: pointer;
+    }
+
     @include flex-row;
 
     svg {

src/styles/_modal.scss

@@ -256,17 +256,33 @@
 }
 
 .maputnik-modal-shortcuts {
-  code {
+  position: relative;
+  overflow: hidden;
+  max-width: 30em;
+
+  kbd {
     color: white;
     background: #3c3c3c;
     padding: 2px 6px;
     display: inline-block;
     text-align: center;
     border-radius: 2px;
-    margin-right: 4px;
     font-family: monospace;
   }
 
+  &__shortcut {
+    margin-bottom: $margin-2;
+  }
+
+  dt {
+    display: inline;
+    margin-right: $margin-2;
+  }
+
+  dd {
+    display: inline;
+  }
+
   li {
     margin-bottom: 4px;
   }

src/styles/_toolbar.scss

@@ -132,6 +132,8 @@
 }
 
 .maputnik-toolbar-skip {
+  all: unset;
+  border: solid 1px transparent;
   position: absolute;
   overflow: hidden;
   width: 0px;
@@ -147,6 +149,7 @@
   &:active,
   &:focus {
     width: 100%;
+    border-color: $color-lowgray;
   }
 }