File tree Expand file tree Collapse file tree 5 files changed +4
-16
lines changed
today-i-learned/src/components/features/discussions Expand file tree Collapse file tree 5 files changed +4
-16
lines changed Original file line number Diff line number Diff line change 6565
6666## 実戦例:ログインフォームを作る
6767
68- <img src =" ../images/login-form.png " style =" max-width : 100% ; width : 300px " alt =" " />
68+ <img src =" ../../ images/login-form.png " style =" max-width : 100% ; width : 300px " alt =" " />
6969
7070実際によく使われるログインフォームのマークアップをしてみます。IDとパスワードの入力欄があり、送信できるログインボタンがあります。各入力欄には、値があるときだけ表示される削除ボタンがあります。
7171
Original file line number Diff line number Diff line change 44
55たとえば下のような構成でボタン名がすべて「選択」だと、どの項目を選ぶボタンなのか分かりにくいため、** 明確な文脈を合わせて提供する必要があります。**
66
7- ![ 重複するボタンの例] ( ../images/duplicate-interactive-element.png )
7+ ![ 重複するボタンの例] ( ../../ images/duplicate-interactive-element.png )
88
99## 問題:意味を読み取れないスクリーンリーダー
1010
Original file line number Diff line number Diff line change @@ -31,7 +31,7 @@ Buttonコンポーネントが`<a>`タグをレンダリングできるオプシ
3131
3232UIの構成上、ボタンのように見えるカードの中に別のボタンを置く必要がある場合があります。このとき構造を誤るとアクセシビリティの問題が発生します。
3333
34- ![ カードUIパターンの例] ( ../images/button-inside-button.png )
34+ ![ カードUIパターンの例] ( ../../ images/button-inside-button.png )
3535
3636### 誤った例
3737
Original file line number Diff line number Diff line change 1717
1818次の画像は、ブラウザでリンクを右クリックしたときに表示されるコンテキストメニューです。リンク要素を正しく使えば、ユーザーが期待するこうした基本機能をすべて提供できます。
1919
20- <img src =" ./images/browser-link.png " alt =" " style =" max-width : 100% ; width : 300px " />
20+ <img src =" .. /images/browser-link.png " alt =" " style =" max-width : 100% ; width : 300px " />
2121
2222このようにアクセシビリティは、障害のあるユーザーだけでなく、キーボード利用者、そして一般的なWeb体験を期待するすべての人に不便を与えないための基本原則です。アクセシビリティを考慮しないと、誰にでも起こり得る不便が生じます。
2323
Original file line number Diff line number Diff line change 11import { useNavigate } from "react-router-dom" ;
22import { Avatar } from "@/components/shared/ui/Avatar" ;
3- import { MarkdownRenderer } from "@/components/shared/ui/MarkdownRenderer" ;
43import { useWeeklyTopDiscussions } from "@/api/hooks/useDiscussions" ;
54import { css } from "@styled-system/css" ;
65
@@ -17,17 +16,6 @@ function getWeekLabel(): string {
1716 return `${ month } 월 ${ weekOfMonth } 째주 인기글` ;
1817}
1918
20- function truncateMarkdown ( content : string , maxLength : number ) : string {
21- const plainText = content
22- . replace ( / [ # * ` \[ \] ( ) ] / g, " " )
23- . replace ( / \s + / g, " " )
24- . trim ( ) ;
25- if ( plainText . length <= maxLength ) {
26- return plainText ;
27- }
28- return plainText . slice ( 0 , maxLength ) + "..." ;
29- }
30-
3119function PopularPostItem ( { post, rank } : { post : any ; rank : number } ) {
3220 const navigate = useNavigate ( ) ;
3321
You can’t perform that action at this time.
0 commit comments