@seamly/web-ui 21.0.2-beta.4 → 21.0.2-beta.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seamly/web-ui",
-  "version": "21.0.2-beta.4",
+  "version": "21.0.2-beta.5",
   "main": "build/dist/lib/index.js",
   "types": "build/src/javascripts/index.d.ts",
   "module": "",
@@ -58,22 +58,23 @@
     "babel-loader": "^9.0.1",
     "babel-plugin-react-remove-properties": "^0.3.0",
     "copy-webpack-plugin": "^11.0.0",
+    "cypress": "^10.11.0",
     "cypress-file-upload": "^5.0.8",
+    "cypress-plugin-tab": "^1.0.5",
     "cypress-wait-until": "^1.7.2",
-    "cypress": "^10.11.0",
     "debug": "^4.3.4",
+    "eslint": "^8.27.0",
     "eslint-import-resolver-alias": "^1.1.2",
     "eslint-import-resolver-typescript": "^3.5.2",
     "eslint-plugin-cypress": "^2.12.1",
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jest": "^27.1.3",
-    "eslint": "^8.27.0",
     "file-loader": "^6.2.0",
     "glob": "^8.0.3",
     "husky": "^8.0.1",
     "ignore-loader": "^0.1.2",
-    "jest-environment-jsdom": "^27.5.1",
     "jest": "^27.5.1",
+    "jest-environment-jsdom": "^27.5.1",
     "mini-css-extract-plugin": "^2.6.1",
     "postcss": "8",
     "preact": "^10.11.2",
@@ -86,11 +87,11 @@
     "ts-loader": "^9.4.1",
     "typescript": "^4.8.4",
     "url-loader": "^4.1.1",
+    "webpack": "^5.74.0",
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^4.10.0",
     "webpack-dev-server": "^4.11.1",
-    "webpack-merge": "^5.8.0",
-    "webpack": "^5.74.0"
+    "webpack-merge": "^5.8.0"
   },
   "peerDependencies": {
     "preact": "^10.11.2"

package/src/javascripts/domains/translations/components/options-dialog/translation-option.tsx

@@ -16,27 +16,28 @@ const TranslationOption: FC<TranslationOptionProps> = ({
   description,
   onChange,
   id,
-}) => (
-  <li
-    className={className('translation-options__item', {
-      'translation-options__item--checked': checked,
-    })}
-  >
-    <input
-      id={id}
-      type="radio"
-      value={label}
-      checked={checked}
-      className={className('visually-hidden')}
-      onChange={onChange}
-      name="language"
-    />
+}) => {
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.code === 'Space' || e.code === 'Enter') {
+      e.preventDefault()
+      onChange()
+    }
+  }
 
-    <label htmlFor={id}>
+  return (
+    <li
+      className={className('translation-options__item')}
+      aria-selected={checked}
+      role="option"
+      tabIndex={0}
+      onClick={onChange}
+      onKeyDown={onKeyDown}
+      id={id}
+    >
       <Icon alt="" name="check" size="16" />
       {label} {description && <span>({description})</span>}
-    </label>
-  </li>
-)
+    </li>
+  )
+}
 
 export default TranslationOption

package/src/javascripts/domains/translations/components/options-dialog/translation-options.tsx

@@ -55,6 +55,8 @@ const TranslationOptions: FC<TranslationOptionsProps> = ({
   return (
     <ul
       aria-describedby={describedById}
+      role="listbox"
+      tabIndex={-1}
       className={className('translation-options')}
     >
       {sortedLanguages.map((language, idx) => {

package/src/javascripts/style-guide/components/view.js

@@ -1,7 +1,7 @@
+import { View } from '@seamly/web-ui'
 import { useEffect, useState } from 'preact/hooks'
-import View from 'ui/components/view'
 import { timeout } from 'ui/hooks/focus-helper-hooks'
-import StyleGuideStaticCore from './static-core'
+import StyleGuideStaticCore from 'style-guide/components/static-core'
 
 const StyleGuideView = ({
   state,

package/src/stylesheets/5-components/_translation-options.scss

@@ -2,44 +2,27 @@
   width: 100%;
   margin: 0;
 
-  // 1px needed for the outline focus ring
-  padding: 1px 0 0;
+  // Top padding needed for the outline focus ring
+  padding: $spacer * 0.05 0 0;
   list-style: none;
+}
 
-  &__item {
-    color: $brand3;
-    font-size: $fontsize-small;
-
-    > label {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: calc($spacer * 0.25) 0;
-      font-weight: $fontweight-bold;
-
-      &:hover {
-        cursor: pointer;
-      }
-
-      // Only show a ring when we have focused via keyboard
-      &:focus-within:has(input:focus-visible) {
-        outline: -webkit-focus-ring-color auto 1px;
-      }
-
-      > span {
-        margin-left: 0.5em;
-      }
-    }
-
-    .#{$n}-icon {
-      opacity: 0;
-    }
+.#{$n}-translation-options__item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: calc($spacer * 0.25) 0;
+  color: $brand3;
+  font-size: $fontsize-small;
+  font-weight: $fontweight-bold;
+  cursor: pointer;
+
+  &:focus-visible {
+    outline: -webkit-focus-ring-color auto 1px;
+  }
 
-    &--checked {
-      .#{$n}-icon {
-        opacity: 1;
-      }
-    }
+  > span {
+    margin-left: 0.5em;
   }
 
   .#{$n}-icon {
@@ -47,5 +30,10 @@
     width: $iconsize-small;
     height: $iconsize-small;
     margin-right: calc($spacer / 2);
+    opacity: 0;
+  }
+
+  &[aria-selected='true'] .#{$n}-icon {
+    opacity: 1;
   }
 }

package/src/stylesheets/6-default-implementation/_hover.scss

@@ -161,5 +161,9 @@
         border-color: $interaction-dark;
       }
     }
+
+    .#{$n}-translation-options__item:hover {
+      color: $interaction-dark;
+    }
   }
 }