カスタムアコーディオンの要素を使用してページの検索に関する考え.

Twitterのタイムラインをスクロールしている間、私は、ユーザーがページ・アクションで発見を誘発するとき、デ折りたたみアコーディオンができることになっているインターネット上でかなり面白い問題に取り組んでいるGoogle Chrome Engineerのうちの1人によってこの面白いつぶやきにつまずきます.



ジョーイアーハル
ジョセフハル

私の最新の機能は、自動展開の詳細要素は、安定クロム97で起動している!これで、閉じられた詳細要素の内容を検索するページを見つけることができます.
午後18時48分
開発者として、我々は時々、これらの小さな詳細を逃しているが、これらの問題をちりばめた後、これらの小さなものは、より良いアクセシビリティ、発見の可能性とWebアプリケーションのユーザビリティのためにどれだけ影響を与えることを実現します.

問題
一般的な問題は理解しやすい.
あなたがページで何かを捜したいかもしれないと言います、しかし、あなたが捜している内容が崩壊したアコーディオンの中にあるので、あなたはそうすることができませんでした.
私は多くのアコーディオンコンポーネントを構築して、見ました、しかし、各々の、そして、彼らの一人は、この特徴を欠いていました.

ユーザランドの研究と実施
Radix、Chakrauiのようなよく知られているコンポーネントライブラリのいくつかを試した後.
私は、「何でも、ちょうどこれを実行しましょう」
ああBoi、私は50 +のブラウザのタブの興味深い乗り物のためのソリューションを探していた.
それで、ユーザランドでこれを実行するために、我々はいくつかのことをする必要があります

Ctrl + Fのキーを検出することにより、ページモードで検索するユーザーを検出します

ユーザーの検索キーワードを記録する

すべてのアコーディオンの内容に対して、そのキーワードに一致するデ崩壊のものにマッチします.

かなり簡単な右?まあ!
ユーザーがページモードで検索しているか、ユーザーが検索モードを閉じた場合でも、検出してもトリッキーです.
イベントを適切に検出するために、我々はAで起こっているすべてのイベントを記録して、保存しなければなりませんeventQueueユーザーがCtrl + Fを最初に押すと、ウィンドウがフォーカスから出てくるか、あるいはぼやけたイベントが発生します.これにより、CTRL+F イベントとBLUR その後イベントが起こった.
コードをすばやく見ましょう.

const usePageFind = () => {
  const [isFinding, setIsFinding] = React.useState(false);
  const [eventQueue, setEventQueue] = React.useState<string[]>([]);

  React.useEffect(() => {
    window.addEventListener("keydown", (e) => {
      // detect CTRL+F if it passes then push to events queue.
      if (e.key.toLowerCase() === "f" && e.ctrlKey) {
        setEventQueue((p) => [...p, "CTRL+F"]);
      }
    });
    window.addEventListener("blur", () => {
      // push blur event to queue
      setEventQueue((p) => [...p, "BLUR"]);
    });
    window.addEventListener("focus", (e) => {
      // push blur event to queue
      setEventQueue((p) => [...p, "FOCUS"]);
    });
  }, []);

  React.useEffect(() => {
    const openSlice = eventQueue.slice(-2);
    const closeSlice = eventQueue.slice(-3);
    // if eventQueue's last 2 elements are CTRL+F & BLUR then we know the find modal is open
    if (arrayCompare(openSlice, ["CTRL+F", "BLUR"])) {
      setIsFinding(true);
      console.log("Finding open");
    }
    // if eventQueue's last 3 elements are CTRL+F, BLUR & FOCUS then we know the find modal is closed
    // We are checking for FOCUS because if user closes the find modal the page will be refocused again.
    if (arrayCompare(closeSlice, ["CTRL+F", "BLUR", "FOCUS"])) {
      setEventQueue([]);
      setIsFinding(false);
      console.log("Finding closed");
    }
  }, [eventQueue]);

  return { isFinding };
};

そして、これは完全な解決心でもありません.

検索キーワードの取得
しかし、ここでの本当の挑戦はユーザが検索フィールドでタイプされたものを見つけることです、ユーザーが捜している間、窓がぼやけているので、我々はonkeydownまたはどんなユーザーが入力しているかについて、どんなイベントハンドラでもフックすることができません.
しかし、非常に非常に非常に非常に多彩なトリックは、我々はこのトピックについて研究中に見つけたこれを検出するために使用することができます.
ミランLaslopからのこの記事は、この方法が実装とうまく機能する方法を説明しました
https://www.milanlaslop.dev/post/2020-01-11-javascript-detecting-what-the-user-searches-on-the-page/
このコードを実行して、最終コードがどのように見えるかを確認します.

NOTE: THIS IS VERY VERY BUGGY, AND ONLY A POC. DO NOT TRY THIS AT HOME.
Open this URL https://u8rtx.csb.app on a newtab for better experience

思考
今私が作成した上記の実装は、私が生産で使用するために作成されたものではない、それは素晴らしい解決策ではない、それは、壊れやすい、壊れやすい、壊れやすいです.
私は、それが適切なプラットホームAPIなしでこれを構築することがどれくらい不可能であるかについて、あなたに示す例を単に作成しました.

より良い解決
次に、この問題を解決し、解決するために、HTML Specで何が新しい機能を使用するかについて、この問題についての可能性の高い解決策について話します.

解決1:ページ崩壊で発見するすべてのアコーディオンのデ崩壊
我々が我々の以前に議論されたusepagefindフックでページ・イベントを見つけるのを発見するとき、単純であるが、エレガントな解決はページのすべてのアコーディオンを崩壊させることになっています.

ソリューション2 :プラットフォームの使用
元のつぶやきに記載されてJoey Arhar クローム97の作業は自動的に使用できる要素の拡大をサポートしています.
ライブデモを参照してくださいhttps://auto-expanding-details.glitch.me/#target

新しいAPIで
これをサポートしているので、ここではカスタムアコーディオンの要素について話しています.

hidden=until-found HTML属性

とbeforematch イベント

これらの2つは一緒に私たちが崩壊したアイテムのテキスト検索の同じ機能を持つカスタムアコーディオンを構築することができます.
読めるhidden content spec それがどのように働くかについてわかっているために.

結論
そして、この興味深い問題に関する私の今日の研究を終えます.
Userを改善するためにこれらのタイプの機能に取り組んでいるブラウザを見て、我々が一般によりアクセス可能なウェブサイトを構築している全体的な経験を見るのは驚くべきことです.
希望この土地のような機能を参照してください.
新しいなしでhidden content このようなビルドはほとんど不可能です.
一般的に、すべての近代的なコンポーネントライブラリは、コンポーネントを改善するために、これらの新しいプラットフォームの特許を採用してください.
リンクと手袋

https://www.milanlaslop.dev/post/2020-01-11-javascript-detecting-what-the-user-searches-on-the-page/

https://github.com/WICG/display-locking/blob/main/explainers/hidden-content-explainer.md