Skip to content
This repository has been archived by the owner on Jun 1, 2023. It is now read-only.

カードのサマリ部分の集計日等の日付がtime要素でマークアップされていない #6408

Open
yosukedoke opened this issue Jun 8, 2021 · 8 comments
Labels
accessibility アクセシビリティ関連 bug バグ。本来あるべき動作をしていないもの pending 対応を保留するもの

Comments

@yosukedoke
Copy link

yosukedoke commented Jun 8, 2021

起こっている問題 / The Problem

  • カードのサマリ部分の集計日等の日付がtime要素でマークアップされていない

該当箇所一覧(日本語のみ)

※ 各言語においても同様

スクリーンショット / Screenshot

スクリーンショット 2021-06-08 22 06 57

期待する見せ方・挙動 / Expected Behavior

  • time要素でマークアップする

起こっている問題の再現手段 / Steps to Reproduce

  1. デベロッパーツールでマークアップを確認する

動作環境・ブラウザ / Environment

  • すべての環境
@yosukedoke yosukedoke added the bug バグ。本来あるべき動作をしていないもの label Jun 8, 2021
@kaizumaki kaizumaki added accessibility アクセシビリティ関連 help-wanted 特に助けを必要としているもの labels Jun 8, 2021
@masuP9 masuP9 removed the help-wanted 特に助けを必要としているもの label Jun 8, 2021
@kaizumaki kaizumaki added the help-wanted 特に助けを必要としているもの label Jun 8, 2021
@yosukedoke
Copy link
Author

下部の注釈内の日付がtimeでマークアップされていない。
についても可能な範囲で対応したほうが良いと思われるが、文脈的に可能な範囲で検討ください。

@Meiryo7743
Copy link
Contributor

Meiryo7743 commented Jun 8, 2021

<time> でマークアップする際は,datetime 属性に(2021-01-01T00:00:00+0900のような書式で)日時を併記するとさらに良いと思われます。

cf. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time#usage_notes

@yamanoku
Copy link
Contributor

実際の表記箇所は以下のようにマークアップされている

<small class="DataView-DataSet-date">{{ sText }}</small>

components/index/CardsReference/PositiveNumberByDevelopedDate/Card.vue
props である sText は以下のように書かれているので

sText: `${formattedLastDay} ${this.$t('日別値')}${this.$t(
  '現在判明している人数であり、後日修正される場合がある'
)})`,

formattedLastDay<time> で分けられるように sText を渡したあとに分離するか
props で渡す時に formattedLastDay を別で渡すようにするかなどの対応が必要そう

@kaizumaki
Copy link
Collaborator

@Meiryo7743 @yamanoku フォローおよびご提案ありがとうございます!

たしかに、formattedLastDaycomponents/index/_shared/DataViewDataSetPanel.vue のpropsにするのがよいかもしれません。

@kaizumaki
Copy link
Collaborator

こちら対応しますね。

@kaizumaki kaizumaki self-assigned this Jul 5, 2021
@kaizumaki
Copy link
Collaborator

propsで渡す方法を考えていたのですが、多言語化のあたりでうまくいかないような気がしてきました。
例えば、この↓場合はうまくいきそうなのですが、

2021年7月19日 日別値

この↓場合は助詞を含むので、単純にtimeタグに渡すだけだと、翻訳時にうまくいきません(特に英語)。

2021年7月19日 の数値

類似してこの↓ようなパターンもあり、

2021年6月28日から2021年7月4日までの期間の数値

ちょっと一筋縄ではいかないようです。
無理矢理に v-html でhtmlをエスケープしない方法はありますが、やはりそれはあまりやりたくない気持ちもあり。

@magi1125 @masuP9 もしtimeマークアップを対応するなら、記述を変える(助詞を使わない表現にする)しかないかなと思うのですが、どう思われますか?

@magi1125
Copy link

@kaizumaki なるほどー。ここは無理にtime要素使わなくてもいいと思いますのでいったん保留でいいかと思います。

@kaizumaki kaizumaki added pending 対応を保留するもの and removed help-wanted 特に助けを必要としているもの labels Jul 21, 2021
@kaizumaki
Copy link
Collaborator

@magi1125 ありがとうございます。pendingラベル(いま作成しました)をつけておきました!

@kaizumaki kaizumaki removed their assignment Jul 21, 2021
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
accessibility アクセシビリティ関連 bug バグ。本来あるべき動作をしていないもの pending 対応を保留するもの
Projects
None yet
Development

No branches or pull requests

6 participants