Set `type="search"` on input fields for SearchBoxByType and SearchBoxByClick

### Description

`SearchBoxByType` and `SearchBoxByClick` are search boxes, but we don't set the `type` HTML attribute to `"search"`. This means (among other things) that screenreaders interpret the box as a regular text field, not a search field.

Example:

![Screen_Shot_2021-11-12_at_3.03.59_pm](/uploads/a60d18bf1e8d81df2bbdc174c40ba3cd/Screen_Shot_2021-11-12_at_3.03.59_pm.png)

When this input field is focused, Apple Voiceover produces the following output:

| Current state | with type="search" |
| ------ | ------ |
| `Search or jump to..., edit text` | `Search or jump to..., search text field` |

`type="search"` yields better accessibility.
#### Concerns

When making this change, we must check all supported browsers. Each browser styles `type="search"` fields differently, and we need to ensure our gitlab-ui styles are not affected by the change.

### Checklist

Make sure the following are completed before closing the issue:

1. [ ] Assign the correct component label to this issue.
1. [ ] Create an MR with the additions or updates needed.
1. [ ] Be sure to get your MR reviewed by a [FE/UX Foundations designer][foundations-team].
1. [ ] When applicable, update `followsDesignSystem:` with the correct value inside the `[component].documentation.js` file.
1. [ ] When applicable, create an [MR in Pajamas][pajamas-mr] to update the demos. If you do not have capacity to complete the demos, [create an issue in Pajamas][pajamas-issue] and bring the issue to your team planning session for prioritization and scheduling. Mark the issue as related to this one.
1. [ ] When applicable, [create an MR in Pajamas][pajamas-mr] to update the component status.
1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Component Documentation"][pajamas-component-documentation-template] issue template to update guidelines. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
1. [ ] When applicable, [create an issue in Pajamas][pajamas-issue] using the ["Figma update"][pajamas-figma-update-template] issue template to update the Figma UI Kit. Ping a designer on your team for awareness and bring the issue to your team planning meeting for prioritization and scheduling.
1. [ ] When introducing a major or breaking change, communicate the changes within the [Engineering Week in Review][eng-week-in-review-doc].
1. [ ] 🎉 Congrats, you made it! You can now close this issue.

<!-- 
### Resources

* [Compontent Lifecycle][component-lifecycle]
* [Adding component][adding-components]
* [Adding CSS][adding-css]
* [Breaking changes][breaking-changes]
-->

[foundations-team]: https://about.gitlab.com/company/team/?department=fe-ux-foundations-team
[pajamas-mr]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/merge_requests/new
[pajamas-issue]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new
[pajamas-component-documentation-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Component%20documentation
[pajamas-figma-update-template]: https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/new?issuable_template=Figma%20update
[component-lifecycle]: https://design.gitlab.com/get-started/lifecycle
[adding-components]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_components.md
[adding-css]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/adding_css.md
[breaking-changes]: https://gitlab.com/gitlab-org/gitlab-ui/-/blob/main/doc/contributing/breaking_changes_to_components.md
[eng-week-in-review-doc]: https://docs.google.com/document/d/1GQbnOP_lr9KVMVaBQx19WwKITCmh7H3YlgO-XqVwv0M/edit

Story points: 1.0