Skip to content

Commit

Permalink
fix(components-PostsSearchBar): rectify a11y error (#812)
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabertazimi
sabertazimi committed May 6, 2022
1 parent 38c46c8 commit c766041
Show file tree
Hide file tree
Showing 9 changed files with 233 additions and 237 deletions.
7 changes: 6 additions & 1 deletion .github/workflows/lighthouserc.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,12 @@
"collect": {
"settings": {
"preset": "desktop",
"skipAudits": ["is-crawlable", "color-contrast"]
"skipAudits": [
"is-crawlable",
"color-contrast",
"aria-required-attr",
"aria-valid-attr-value"
]
}
}
}
Expand Down
111 changes: 54 additions & 57 deletions components/Header/__snapshots__/Header.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,7 @@ exports[`Header should render correctly (snapshot) 1`] = `
class="flex-container h-full border-transparent transition transform-gpu"
>
<div
class="ant-select ant-select-auto-complete flex-container ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
Expand All @@ -196,72 +196,69 @@ exports[`Header should render correctly (snapshot) 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-input-affix-wrapper ant-select-selection-search-input"
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button ant-select-selection-search-input"
>
<span
class="ant-input-prefix"
class="ant-input-wrapper ant-input-group"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
class="ant-input-affix-wrapper"
>
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-input"
id="rc_select_TEST_OR_SSR"
placeholder="Search Posts ..."
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
/>
</svg>
<span
class="ant-input-clear-icon ant-input-clear-icon-hidden"
role="button"
tabindex="-1"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</span>
</span>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-input"
id="rc_select_TEST_OR_SSR"
placeholder="Search Posts ..."
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
<span
class="ant-input-clear-icon ant-input-clear-icon-hidden"
role="button"
tabindex="-1"
class="ant-input-group-addon"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
<button
class="ant-btn ant-btn-primary ant-input-search-button"
type="button"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Search
</span>
</button>
</span>
</span>
</span>
Expand Down
1 change: 0 additions & 1 deletion components/Icons/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ export {
HomeOutlined as Home,
InfoCircleOutlined as InfoCircle,
ReadOutlined as Read,
SearchOutlined as Search,
StarOutlined as Star,
UserOutlined as User,
} from '@ant-design/icons';
Expand Down
4 changes: 4 additions & 0 deletions components/PostsSearchBar/PostsSearchBar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
/* Remove redundant border hover styles */
.ant-menu .ant-select-selector {
@apply border-0 !important;
}
13 changes: 6 additions & 7 deletions components/PostsSearchBar/PostsSearchBar.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import AutoComplete from '@components/AutoComplete';
import { Search } from '@components/Icons';
import Input from '@components/Input';
import Link from '@components/Link';
import type { PostMeta } from '@types';
Expand Down Expand Up @@ -41,12 +40,12 @@ const PostsSearchBar = ({ posts }: Props): JSX.Element => {
);

return (
<AutoComplete
className="flex-container"
options={options}
onSearch={handleSearch}
>
<Input allowClear placeholder="Search Posts ..." prefix={<Search />} />
<AutoComplete options={options} onSearch={handleSearch}>
<Input.Search
allowClear
enterButton="Search"
placeholder="Search Posts ..."
/>
</AutoComplete>
);
};
Expand Down
111 changes: 54 additions & 57 deletions components/PostsSearchBar/__snapshots__/PostsSearchBar.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`PostsSearchBar should render correctly (snapshot) 1`] = `
<div>
<div
class="ant-select ant-select-auto-complete flex-container ant-select-single ant-select-customize-input ant-select-show-search"
class="ant-select ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
>
<div
class="ant-select-selector"
Expand All @@ -12,72 +12,69 @@ exports[`PostsSearchBar should render correctly (snapshot) 1`] = `
class="ant-select-selection-search"
>
<span
class="ant-input-affix-wrapper ant-select-selection-search-input"
class="ant-input-group-wrapper ant-input-search ant-input-search-with-button ant-select-selection-search-input"
>
<span
class="ant-input-prefix"
class="ant-input-wrapper ant-input-group"
>
<span
aria-label="search"
class="anticon anticon-search"
role="img"
class="ant-input-affix-wrapper"
>
<svg
aria-hidden="true"
data-icon="search"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-input"
id="rc_select_TEST_OR_SSR"
placeholder="Search Posts ..."
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
<path
d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"
/>
</svg>
<span
class="ant-input-clear-icon ant-input-clear-icon-hidden"
role="button"
tabindex="-1"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
</span>
</span>
</span>
</span>
<input
aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
aria-autocomplete="list"
aria-controls="rc_select_TEST_OR_SSR_list"
aria-haspopup="listbox"
aria-owns="rc_select_TEST_OR_SSR_list"
autocomplete="off"
class="ant-input"
id="rc_select_TEST_OR_SSR"
placeholder="Search Posts ..."
role="combobox"
type="search"
value=""
/>
<span
class="ant-input-suffix"
>
<span
class="ant-input-clear-icon ant-input-clear-icon-hidden"
role="button"
tabindex="-1"
class="ant-input-group-addon"
>
<span
aria-label="close-circle"
class="anticon anticon-close-circle"
role="img"
<button
class="ant-btn ant-btn-primary ant-input-search-button"
type="button"
>
<svg
aria-hidden="true"
data-icon="close-circle"
fill="currentColor"
focusable="false"
height="1em"
viewBox="64 64 896 896"
width="1em"
>
<path
d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
/>
</svg>
</span>
<span>
Search
</span>
</button>
</span>
</span>
</span>
Expand Down
Loading

1 comment on commit c766041

@vercel
Copy link

@vercel vercel bot commented on c766041 May 6, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

blog – ./

blog-sabertaz.vercel.app
blog-git-main-sabertaz.vercel.app
blog.tazimi.dev

Please sign in to comment.