Skip to content

Commit e94d5e7

Browse files
peterbepeterbe
authored
hide some navigational elements from search text (github#31607)
1 parent 7a0b8dd commit e94d5e7

File tree

4 files changed

+71
-59
lines changed

4 files changed

+71
-59
lines changed

‎components/guides/ArticleCards.tsx

+64-59
Original file line numberDiff line numberDiff line change
@@ -63,69 +63,73 @@ export const ArticleCards = () => {
6363

6464
return (
6565
<div>
66-
<label htmlFor="guide-filter-form">{t('filter_instructions')}</label>
67-
<form name="guide-filter-form" className="mt-2 mb-5 d-flex d-flex">
68-
<div data-testid="card-filter-types">
69-
<div
70-
onClick={() => clickDropdown(typesRef)}
71-
onKeyDown={() => clickDropdown(typesRef)}
72-
role="button"
73-
tabIndex={-1}
74-
className="text-uppercase f6 color-fg-muted d-block"
75-
>
76-
{t('filters.type')}
66+
<div data-search="hide">
67+
<label htmlFor="guide-filter-form">{t('filter_instructions')}</label>
68+
<form name="guide-filter-form" className="mt-2 mb-5 d-flex d-flex">
69+
<div data-testid="card-filter-types">
70+
<div
71+
onClick={() => clickDropdown(typesRef)}
72+
onKeyDown={() => clickDropdown(typesRef)}
73+
role="button"
74+
tabIndex={-1}
75+
className="text-uppercase f6 color-fg-muted d-block"
76+
>
77+
{t('filters.type')}
78+
</div>
79+
<ActionMenu anchorRef={typesRef}>
80+
<ActionMenu.Button>
81+
{typeFilter ? typeFilter.text : t('filters.all')}
82+
</ActionMenu.Button>
83+
<ActionMenu.Overlay aria-label="types" data-testid="types-dropdown">
84+
<ActionList selectionVariant="single">
85+
{types.map((type) => {
86+
return (
87+
<ActionList.Item onSelect={() => setTypeFilter(type)} key={type.text}>
88+
{type.text}
89+
</ActionList.Item>
90+
)
91+
})}
92+
</ActionList>
93+
</ActionMenu.Overlay>
94+
</ActionMenu>
7795
</div>
78-
<ActionMenu anchorRef={typesRef}>
79-
<ActionMenu.Button>{typeFilter ? typeFilter.text : t('filters.all')}</ActionMenu.Button>
80-
<ActionMenu.Overlay aria-label="types" data-testid="types-dropdown">
81-
<ActionList selectionVariant="single">
82-
{types.map((type) => {
83-
return (
84-
<ActionList.Item onSelect={() => setTypeFilter(type)} key={type.text}>
85-
{type.text}
86-
</ActionList.Item>
87-
)
88-
})}
89-
</ActionList>
90-
</ActionMenu.Overlay>
91-
</ActionMenu>
92-
</div>
9396

94-
<div data-testid="card-filter-topics" className="mx-4">
95-
<div
96-
onClick={() => clickDropdown(topicsRef)}
97-
onKeyDown={() => clickDropdown(topicsRef)}
98-
role="button"
99-
tabIndex={-1}
100-
className="text-uppercase f6 color-fg-muted d-block"
101-
>
102-
{t('filters.topic')}
97+
<div data-testid="card-filter-topics" className="mx-4">
98+
<div
99+
onClick={() => clickDropdown(topicsRef)}
100+
onKeyDown={() => clickDropdown(topicsRef)}
101+
role="button"
102+
tabIndex={-1}
103+
className="text-uppercase f6 color-fg-muted d-block"
104+
>
105+
{t('filters.topic')}
106+
</div>
107+
<ActionMenu anchorRef={topicsRef}>
108+
<ActionMenu.Button>
109+
{topicFilter ? topicFilter.text : t('filters.all')}
110+
</ActionMenu.Button>
111+
<ActionMenu.Overlay aria-label="topics" data-testid="topics-dropdown">
112+
<ActionList selectionVariant="single">
113+
{topics.map((topic) => {
114+
return (
115+
<ActionList.Item onSelect={() => setTopicFilter(topic)} key={topic.text}>
116+
{topic.text}
117+
</ActionList.Item>
118+
)
119+
})}
120+
</ActionList>
121+
</ActionMenu.Overlay>
122+
</ActionMenu>
103123
</div>
104-
<ActionMenu anchorRef={topicsRef}>
105-
<ActionMenu.Button>
106-
{topicFilter ? topicFilter.text : t('filters.all')}
107-
</ActionMenu.Button>
108-
<ActionMenu.Overlay aria-label="topics" data-testid="topics-dropdown">
109-
<ActionList selectionVariant="single">
110-
{topics.map((topic) => {
111-
return (
112-
<ActionList.Item onSelect={() => setTopicFilter(topic)} key={topic.text}>
113-
{topic.text}
114-
</ActionList.Item>
115-
)
116-
})}
117-
</ActionList>
118-
</ActionMenu.Overlay>
119-
</ActionMenu>
124+
</form>
125+
126+
<div role="status" className="color-fg-muted">
127+
{guides.length === 0
128+
? t('guides_found.none')
129+
: guides.length === 1
130+
? t('guides_found.one')
131+
: t('guides_found.multiple').replace('{n}', guides.length)}
120132
</div>
121-
</form>
122-
123-
<div role="status" className="color-fg-muted">
124-
{guides.length === 0
125-
? t('guides_found.none')
126-
: guides.length === 1
127-
? t('guides_found.one')
128-
: t('guides_found.multiple').replace('{n}', guides.length)}
129133
</div>
130134

131135
<ul ref={articleCardRef} className="d-flex flex-wrap mr-0 mr-md-n6 mr-lg-n8">
@@ -144,6 +148,7 @@ export const ArticleCards = () => {
144148
{guides.length > numVisible && (
145149
<button
146150
className="col-12 mt-5 text-center text-bold color-fg-accent btn-link"
151+
data-search="hide"
147152
onClick={loadMore}
148153
>
149154
{t('load_more')}

‎components/guides/LearningTrack.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ export const LearningTrack = ({ track }: Props) => {
102102
)}
103103
{
104104
<button
105+
data-search="hide"
105106
className={
106107
'Box-footer btn-link border-top-0 position-relative text-center text-bold color-fg-accent pt-1 pb-3 col-12 ' +
107108
((track?.guides?.length || 0) <= numVisible && cx(styles.removeHoverEvents))

‎components/landing/CodeExamples.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ export const CodeExamples = () => {
3333
return (
3434
<div>
3535
<form
36+
data-search="hide"
3637
className="pr-lg-3 mb-5 mt-3"
3738
onSubmit={(event) => {
3839
event.preventDefault()

‎script/search/parse-page-sections-into-records.js

+5
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,11 @@ export default function parsePageSectionsIntoRecords(page) {
1919
.get()
2020
.slice(0, -1)
2121

22+
// Like in printing from DOM, some elements should not be included in
23+
// the records for search. This might be navigational elements of the
24+
// page that don't make much sense to find in a site search.
25+
$('[data-search=hide]').remove()
26+
2227
const breadcrumbs = breadcrumbsArray.join(' / ') || ''
2328
const metaKeywords = $('meta[name="keywords"]').attr('content')
2429
const topics = (metaKeywords ? metaKeywords.split(',') : [])

0 commit comments

Comments
 (0)