アイコンのアクセシビリティ対応

mthaichi commented 7 months ago

チケットへのリンク / 変更の理由（元のissueがあればリンクを貼り付ければOK）

https://github.com/vektor-inc/vk-blocks-pro/issues/1795

どういう変更をしたか？

Font Awesomeのタグを見つけたら aria-hidden="true" の属性を付加するように修正（すでに付加されているものにはつけない）
テストを追加しました。

実装者はレビュワーに回す前に以下の事を確認してチェックをつけてください。

ソースコードについて

[x] 複数の意図の変更（機能の不具合修正 + 別の機能追加など）を含んでいないか？
[x] 関数名 / 変数名 / クラス名 / 保存値名はそれだけで内容が想像できるものになっているか？紛らわしい命名になっていないか？
[x] 関数名 / 変数名 / クラス名 / 保存値名は既存のコードの命名規則に沿ったものになっているか？

デザイン・UI

[x] 初見のユーザーが予備知識無しで使っても使いやすいようになっているか？
[x] 情報意味を考慮した意味グルーピング・余白になっているか？
[x] アラートの表示など追加した場合は他の同様の表示と同じデザインになっているか？

プログラムの変更の場合

テストを書かないのは普通ではありません。書けるテストは極力書くようにしてください。書いていない場合は書かない理由を記載してください。

[x] 書けそうなテストは書いたか？
[x] 表示要素が仕様通りに表示されない不具合の修正ではない or 表示要素に関する不具合修正の場合テストは書いたか？

その他

[x] readme.txt に変更内容は書いたか？
[x] Files changed (変更ファイル)の内容は目視でちゃんと確認したか？
[x] このチェック項目を機械的にチェックするのではなく本当にちゃんと確認をしたか？
[x] レビュワーが確認しないでリリースしてしまっても問題ないレベルまでちゃんと作りこみ・確認をしたか？

変更内容について何を確認したか、どういう方法で確認をしたかなど

本ブランチをビルドして、ExUnitの有効化画面でデフォルト有効になっていることを確認。
適当にfont awesomeアイコンを配置して、フロント側のソースを表示した時に、aria-hidden="true"がついていることを確認
元からaria-hidden=""があるタグは変換されないことを確かめる。カスタムHTMLで <i aria-hidden="true" class="fa fa-car"></i> と入れても <i class="fa fa-car"></i> と入れても、 aria-hidden="****" がフロントで出力されることを確認（trueをfalseにしても影響はないはずです）
その他コード目視で気になる点があればご指摘ください。

２人チェックでお願いしたいです。

確認URL

（　どこかのデモサイトかテストサーバーにデプロイ済みなどで確認できる場合はそのURL　）

レビュワーの確認方法・確認する内容など

レビュワーに回す前の確認事項

[ ] このテンプレートのチェック項目をちゃんと確認してチェックしたか？

レビュワー向け

確認して変更が反映されていない場合の確認事項

プルしたか？
ビルドしたか？
ビルドしたディレクトリは正しいか（別の開発環境のディレクトリを見ていないか）？
npm install したか？
composer install したか？

sysbird commented 7 months ago

@mthaichi 確認しました

すでに付加されているもの / 付加されてないもの
設定画面での ON/OFF

問題ないと思います、ありがとうございます Accessability → A11y っていうんですね、知りませんでした〜

もうお一人確認お願いします

kurudrive commented 7 months ago

@mthaichi @sysbird ありがとうございます。ジャ...ジャンピング土下座３回転半１回ひねりですみません（滝汗）改めて見ると the_content を通す方法だと本文以外のヘッダーやフッターのアイコンには aria-hidden="true" つかないので、元のブロック側での処理あるいは js などでの処理も必要かなと思ったりしますがど...どう...で...しょうか？（震え声）

kurudrive commented 7 months ago

https://gutenberg.10up.com/guides/html-tag-processor/

sysbird commented 7 months ago

気になったので確認しました js での処理もスクリーンリーダーに有効です

mthaichi commented 7 months ago

@kurudrive the_content だけではなく、render_block のフィルターフックにも引っ掛けるようにしましたが、いかがでしょう。クラシックテーマのヘッダーやフッターは引っかかりませんが、テーマファイルを変更していただくということで良いと思います。

大元の出力を弄る方法もありますが、 https://mycus-tom.com/posts/101

プラグインがそのレベルに介入すべきではないと考えますので、この方法が妥当と考えました。

@sysbird できるだけサーバーサイドで処理したいので、JSは最終手段ということで考えています。最終手段で使えることがわかりましたので、ありがとうございます！

kurudrive commented 6 months ago

@mthaichi ありがとうございましたーん！

vektor-inc / vk-all-in-one-expansion-unit