@fmidev/smartmet-alert-client 4.2.7 → 4.7.0-alpha.0

package/src/components/Region.vue

@@ -1,44 +1,47 @@
 <template>
-  <b-card no-body class="mb-1 current-warning-panel" :class="theme">
-    <b-card-header header-tag="header" class="p-1">
+  <h3>
+    <button
+      :id="`accordion-${code}`"
+      type="button"
+      :aria-expanded="open"
+      :class="['accordion-trigger', 'focus-ring', open ? '' : 'collapsed']"
+      :aria-controls="`accordion-section-${code}`"
+      :aria-label="ariaButton"
+      @click="onRegionToggle">
       <div class="region-header">
+        <span class="region-item-text">
+          {{ regionName }}
+        </span>
         <div>
           <RegionWarning
             v-for="warning in warningsSummary"
             :key="warning.key"
-            :input="warning"></RegionWarning>
+            :input="warning"
+            :language="language">
+          </RegionWarning>
         </div>
-        <span class="region-item-text">
-          {{ regionName }}
-        </span>
       </div>
-      <b-button
-        block
-        :class="['current-warning-toggle', visible ? '' : 'collapsed']"
-        :aria-label="ariaButton"
-        @click="onRegionToggle" />
-    </b-card-header>
-    <b-collapse
-      :id="identifier"
-      v-model="visible"
-      class="accordion-item-region focus-ring"
-      :accordion="`accordion-${type}`"
-      tabindex="0"
-      :aria-label="ariaInfo">
-      <b-card-body body-class="p-0">
-        <div class="current-description">
-          <div class="current-description-table">
-            <DescriptionWarning
-              v-for="warning in reducedWarnings"
-              :key="warning.identification"
-              :input="warning"
-              :theme="theme"
-              :language="language" />
-          </div>
-        </div>
-      </b-card-body>
-    </b-collapse>
-  </b-card>
+      <div block :class="['current-warning-toggle', open ? '' : 'collapsed']" />
+    </button>
+  </h3>
+  <div
+    :id="`accordion-section-${code}`"
+    role="region"
+    :aria-labelledby="`accordion-${code}`"
+    :aria-expanded="open"
+    class="accordion-panel"
+    :hidden="open ? null : ''">
+    <div class="current-description">
+      <div class="current-description-table">
+        <DescriptionWarning
+          v-for="warning in reducedWarnings"
+          :key="warning.identification"
+          :input="warning"
+          :theme="theme"
+          :language="language" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
@@ -55,10 +58,6 @@ export default {
     type: {
       type: String,
     },
-    shown: {
-      type: Boolean,
-      default: false,
-    },
     code: {
       type: String,
     },
@@ -83,7 +82,7 @@ export default {
   },
   data() {
     return {
-      visible: this.shown,
+      open: false,
     }
   },
   computed: {
@@ -131,7 +130,7 @@ export default {
     },
     ariaButton() {
       return `${
-        this.visible
+        this.open
           ? this.t('infoButtonAriaLabelCloseRegion')
           : this.t('infoButtonAriaLabelShowRegion')
       } ${this.regionName} ${this.t('infoButtonAriaLabelValidWarnings')}`
@@ -145,17 +144,9 @@ export default {
       )
     },
   },
-  watch: {
-    shown(isShown) {
-      this.visible = isShown
-    },
-  },
   methods: {
     onRegionToggle() {
-      this.$emit('regionToggled', {
-        code: this.code,
-        shown: !this.visible,
-      })
+      this.open = !this.open
     },
   },
 }
@@ -197,18 +188,25 @@ export default {
 
 button {
   border: none;
+  cursor: pointer;
+  &:focus:not(:focus-visible) {
+    box-shadow: none;
+  }
 }
 
 .region-header {
   position: absolute;
   left: 0;
   right: 38px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  height: $current-warning-height;
 }
 
 .region-item-text {
   display: block;
   text-align: left;
-  line-height: $current-warning-height;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -303,22 +301,22 @@ button {
 }
 
 .light-theme .current-description {
-  border-top: 1px solid $light-description-border-color;
+  border-top: 0.5px solid $light-description-border-color;
   background-color: $light-description-background-color;
 }
 
 .dark-theme .current-description {
-  border-top: 1px solid $dark-description-border-color;
+  border-top: 0.5px solid $dark-description-border-color;
   background-color: $dark-description-background-color;
 }
 
 .light-gray-theme .current-description {
-  border-top: 1px solid $light-gray-description-border-color;
+  border-top: 0.5px solid $light-gray-description-border-color;
   background-color: $light-gray-description-background-color;
 }
 
 .dark-gray-theme .current-description {
-  border-top: 1px solid $dark-gray-description-border-color;
+  border-top: 0.5px solid $dark-gray-description-border-color;
   background-color: $dark-gray-description-background-color;
 }
 
@@ -333,4 +331,115 @@ div.accordion-item-region {
     padding: 0;
   }
 }
+
+h3 {
+  margin: 0;
+  padding: 0;
+}
+
+.accordion-trigger {
+  background: none;
+  color: hsl(0deg 0% 13%);
+  display: block;
+  font-size: $font-size;
+  font-weight: normal;
+  margin: 0;
+  padding: 0;
+  position: relative;
+  text-align: left;
+  width: 100%;
+  outline: none;
+}
+
+.accordion > div:first-child .accordion-trigger > .region-header {
+  border-radius: 0;
+}
+
+.accordion > div:last-child .accordion-trigger.collapsed > .region-header {
+  border-radius: 0;
+}
+
+.accordion > div:first-child:last-child .accordion-trigger > .region-header {
+  border-radius: 0;
+}
+
+.accordion
+  > div:first-child:last-child
+  .accordion-trigger.collapsed
+  > .region-header {
+  border-radius: 0;
+}
+
+.accordion > div:first-child > h3 > button,
+.accordion > div:first-child > h3 > button:hover {
+  border-radius: 0;
+}
+
+.accordion > div:last-child > h3 > button.collapsed,
+.accordion > div:last-child > h3 > button.collapsed:hover {
+  border-radius: 0;
+}
+
+.accordion > div:first-child:last-child > h3 > button,
+.accordion > div:first-child:last-child > h3 > button:hover {
+  border-radius: 0;
+}
+
+.accordion > div:first-child:last-child > h3 > button.collapsed,
+.accordion > div:first-child:last-child > h3 > button.collapsed:hover {
+  border-radius: 0;
+}
+
+.accordion > div:last-child .current-description {
+  border-radius: 0;
+}
+
+.accordion > div:first-child > div > h3 > button > div.current-warning-toggle {
+  border-radius: 0;
+}
+
+.accordion
+  > div:last-child
+  > div
+  > h3
+  > button
+  > div.current-warning-toggle.collapsed {
+  border-radius: 0;
+}
+
+.accordion
+  > div:first-child:last-child
+  > div
+  > h3
+  > button
+  > div.current-warning-toggle {
+  border-radius: 0;
+}
+
+.accordion
+  > div:first-child:last-child
+  > div
+  > h3
+  > button
+  > div.current-warning-toggle.collapsed {
+  border-radius: 0;
+}
+
+button {
+  border-style: none;
+}
+
+.accordion button::-moz-focus-inner {
+  border: 0;
+}
+
+.accordion-panel {
+  margin: 0;
+  padding: 0;
+}
+
+/* For Edge bug https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/4806035/ */
+.accordion-panel[hidden] {
+  display: none;
+}
 </style>

package/src/components/RegionWarning.vue

@@ -8,7 +8,9 @@
       `symbol-rotate-${rotation}`,
       `level-${input.severity}`,
       `${typeClass}`,
-    ]">
+    ]"
+    :aria-label="`${warningLevel} ${warningTypeText}${warningDetails}`"
+  >
     <span
       aria-hidden="true"
       :class="[
@@ -16,19 +18,43 @@
         'symbol-text',
         `transform-rotate-${invertedRotation}`,
       ]"
-      >{{ input.text }}</span
-    >
+    >{{ input.text }}</span>
   </div>
 </template>
 
 <script>
 import fields from '../mixins/fields'
+import i18n from '../mixins/i18n'
 import utils from '../mixins/utils'
 
 export default {
   name: 'RegionWarning',
-  mixins: [fields, utils],
-  props: ['input'],
+  mixins: [fields, i18n, utils],
+  props: {
+    input: {
+      type: Object,
+      default: null,
+    },
+    language: {
+      type: String,
+    },
+  },
+  computed: {
+    warningLevel() {
+      return this.t(`warningLevel${this.input.severity}`)
+    },
+    warningTypeText() {
+      return this.t(this.input.type).toLowerCase()
+    },
+    warningDetails() {
+      if (this.input.text == null || this.input.direction == null) {
+        return ''
+      }
+      return ` (${this.input.text} m/s ${this.t('fromDirection')} ${
+        this.input.direction + 180
+      }°)`
+    },
+  },
 }
 </script>
 
@@ -47,15 +73,11 @@ div.warning-image {
 }
 
 .current-warning-image {
-  background-size: 28px 28px;
+  background-size: $current-warning-image-height $current-warning-image-height;
   height: $current-warning-image-height;
   width: $current-warning-image-height;
-  margin-top: calc(
-    ($current-warning-height - $current-warning-image-height) / 2
-  );
+  margin: 0 5px;
   float: right;
-  margin-left: 5px;
-  margin-right: 5px;
 }
 
 span.warning-symbol-text {

package/src/components/Regions.vue

@@ -1,53 +1,82 @@
 <template>
-  <div id="region-warnings" class="row">
-    <div v-if="anyLandWarnings" class="region-type-container">
-      <h3 id="header-land" class="header-region">{{ landText }}</h3>
+  <div
+    id="region-warnings"
+    class="row"
+  >
+    <div
+      v-if="anyLandWarnings"
+      class="region-type-container"
+    >
+      <h3
+        id="header-land"
+        class="header-region"
+      >
+        {{ landText }}
+      </h3>
       <a
         id="fmi-warnings-region-content"
         :href="fromLandToNextContentHref"
         tabindex="0"
         class="fmi-warnings-to-next-content visually-hidden-focusable focus-ring"
         @click="fromLandToNextContentClicked"
-        >{{ fromLandToNextContentText }}</a
+      >{{ fromLandToNextContentText }}</a>
+      <div
+        id="accordion-group-land"
+        class="accordion"
       >
-      <div id="accordion-land" class="accordion-region" role="tablist">
-        <div v-for="region in regions.land" :key="region.key">
+        <div
+          v-for="region in regions.land"
+          :key="region.key"
+        >
           <Region
             v-if="region.warnings.length"
             type="land"
-            :shown="shownRegion === region.key"
             :code="region.key"
             :name="region.name"
             :input="region.warnings"
             :warnings="warnings"
+            :theme="theme"
             :language="language"
-            @regionToggled="onRegionToggled" />
+          />
         </div>
       </div>
     </div>
-    <div v-if="anySeaWarnings" class="region-type-container">
-      <h3 id="header-sea" class="header-region">{{ seaText }}</h3>
+
+    <div
+      v-if="anySeaWarnings"
+      class="region-type-container"
+    >
+      <h3
+        id="header-sea"
+        class="header-region"
+      >
+        {{ seaText }}
+      </h3>
       <a
         :id="fromSeaToNextContentId"
         href="#fmi-warnings-end-of-regions"
         tabindex="0"
         class="fmi-warnings-to-next-content visually-hidden-focusable focus-ring"
         @click="fromSeaToNextContentClicked"
-        >{{ fromSeaToNextContentText }}</a
+      >{{ fromSeaToNextContentText }}</a>
+      <div
+        id="accordion-group-sea"
+        class="accordion"
       >
-      <div id="accordion-sea" class="accordion-region" role="tablist">
-        <div v-for="region in regions.sea" :key="region.key">
+        <div
+          v-for="region in regions.sea"
+          :key="region.key"
+        >
           <Region
             v-if="region.warnings.length"
             type="sea"
-            :shown="shownRegion === region.key"
             :code="region.key"
             :name="region.name"
             :input="region.warnings"
             :warnings="warnings"
             :theme="theme"
             :language="language"
-            @regionToggled="onRegionToggled" />
+          />
         </div>
       </div>
     </div>
@@ -77,11 +106,6 @@ export default {
     theme: String,
     language: String,
   },
-  data() {
-    return {
-      shownRegion: null,
-    }
-  },
   computed: {
     landText() {
       return this.t('regionLand')
@@ -90,14 +114,14 @@ export default {
       return this.t('regionSea')
     },
     fromLandToNextContentText() {
-      return `${this.t('warningsInAreaStart')} ${
-        this.regions.land.length
-      } ${this.t('warningsInAreaEnd')} ${this.t('toNextContent')}`
+      return `${this.t('warningsInAreasStart')} ${this.t(
+        `in${this.regions.land.length}Areas`
+      )}. ${this.t('toNextContent')}`
     },
     fromSeaToNextContentText() {
-      return `${this.t('warningsInAreaStart')} ${
-        this.regions.sea.length
-      } ${this.t('warningsInAreaEnd')} ${this.t('toNextContent')}`
+      return `${this.t('warningsInAreasStart')} ${this.t(
+        `in${this.regions.sea.length}Areas`
+      )}. ${this.t('toNextContent')}`
     },
     fromLandToNextContentHref() {
       return this.anySeaWarnings
@@ -155,9 +179,6 @@ export default {
         this.regions[regionType].length > 0
       )
     },
-    onRegionToggled({ code, shown }) {
-      this.shownRegion = shown ? code : null
-    },
     fromLandToNextContentClicked() {
       const nextContent = this.$el.querySelector(this.fromLandToNextContentHref)
       nextContent.scrollIntoView()
@@ -209,4 +230,13 @@ div.region-type-container {
   width: 100%;
   padding: 0;
 }
+
+div.accordion {
+  margin: 0;
+  border: 0.5px solid $variant-gray-darker;
+  border-radius: 0;
+  > * + * {
+    border-top: 0.5px solid $variant-gray-darker;
+  }
+}
 </style>

package/src/components/Warning.vue

@@ -1,13 +1,21 @@
 <template>
-  <div class="symbol-list-table" :class="theme">
+  <div
+    class="symbol-list-table"
+    :class="theme"
+  >
     <div class="symbol-list-cell symbol-list-cell-image">
       <div
-        :class="`level-${severity} ${typeClass} symbol-list-image-column symbol-list-image warning-image`"></div>
+        :class="`level-${severity} ${typeClass} symbol-list-image-column symbol-list-image warning-image`"
+        :aria-label="`${warningLevelText} ${title.toLowerCase()}`"
+      ></div>
     </div>
     <div class="symbol-list-cell symbol-list-cell-text">
       <div class="symbol-list-text-select">
         <!-- eslint-disable-next-line vue/no-v-html -->
-        <div class="item-text symbol-list-text" v-html="title"></div>
+        <div
+          class="item-text symbol-list-text"
+          v-html="title"
+        ></div>
         <div class="symbol-list-select-container d-none d-md-table-cell">
           <div
             :id="id"
@@ -18,11 +26,19 @@
               'focus-ring',
               'd-none',
             ]"
+            role="button"
             tabindex="0"
+            :aria-pressed="input.visible ? 'true' : 'false'"
+            :aria-label="title.replace(/&[^;]*;/g, '')"
             @mousedown="preventEvents"
             @click="toggle"
             @keydown.enter="toggle"
-            @keydown.space="toggle" />
+            @keydown.space="toggle"
+          >
+            <span>
+              {{ toggleText }}
+            </span>
+          </div>
         </div>
       </div>
       <hr />
@@ -46,6 +62,12 @@ export default {
     title() {
       return this.t(this.input.type)
     },
+    warningLevelText() {
+      return this.t(`warningLevel${this.severity}`)
+    },
+    toggleText() {
+      return this.input.visible ? this.t('toggleOn') : this.t('toggleOff')
+    },
   },
   methods: {
     toggle(event) {
@@ -151,7 +173,6 @@ hr {
 
 div#fmi-warnings-list div.symbol-list-cell-text {
   padding-right: 0;
-
   hr {
     margin-right: 0;
   }
@@ -172,70 +193,53 @@ div.symbol-list-text {
   display: table-cell;
   height: $symbol-list-line-height;
   max-width: 141px;
-  padding-right: 5px;
+  padding-right: 10px;
+  word-break: break-word;
   hyphens: auto;
 }
 
 .symbol-list-select-container {
-  width: 30px;
+  width: 55px;
   height: $symbol-list-line-height;
   display: table-cell;
   vertical-align: middle;
 }
 
-.symbol-list-select {
+.symbol-list-select.d-md-block {
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
   width: 100%;
   height: $symbol-list-select-height;
+  cursor: pointer;
   margin: 0;
   background-repeat: no-repeat;
   background-position: center;
-}
-
-.flag-selected {
-  cursor: pointer;
-}
-
-.light-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-blue' + $image-extension);
-}
-
-.dark-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.light-gray-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-dark' + $image-extension);
-}
-
-.dark-gray-theme .flag-selected {
-  background-image: url($ui-image-path + 'toggle-selected-light' + $image-extension);
-}
-
-.flag-unselected {
-  cursor: pointer;
-}
-
-.light-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
-}
-
-.light-gray-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-light' + $image-extension);
-}
-
-.dark-gray-theme .flag-unselected {
-  background-image: url($ui-image-path + 'toggle-unselected-dark' + $image-extension);
+  &.flag-selected {
+    padding-right: 18px;
+    background-image: url($ui-image-path + 'toggle-selected' + $image-extension);
+    span {
+      color: $toggle-on-text;
+    }
+  }
+  &.flag-unselected {
+    padding-left: 18px;
+    background-image: url($ui-image-path + 'toggle-unselected' + $image-extension);
+    span {
+      color: $toggle-off-text;
+    }
+  }
+  span {
+    font-family: 'Noto Sans', sans-serif;
+    font-size: $font-size;
+    forced-color-adjust: none;
+  }
 }
 
 @media (max-width: 767px) {
   div.symbol-list-table {
     div.symbol-list-cell.symbol-list-cell-text {
       padding-right: 0;
-
       hr {
         margin-right: 0;
       }