Search plugin: replace image and use button tag

[jhildenbiddle]

The search plugin would benefit from two minor updates:

1. Swap the close button <svg> for one that is properly sized to avoid sizing via CSS transform.

https://github.com/QingWei-Li/docsify/blob/6c7ebc989dd1572f744fbe5fc8f5af710b790cce/src/plugins/search/component.js#L56-L58

https://github.com/QingWei-Li/docsify/blob/6c7ebc989dd1572f744fbe5fc8f5af710b790cce/src/plugins/search/component.js#L99-L103

2. Use a <button> element for the close button to allow the element to receive focus. Another option is to add tabindex="0" to the clear button div, but a button tag is the correct tag for this scenario. The <button> tag should also contain an aria-label for screen readers since it does not contain a text label:

   <button class="clear-button show" aria-label="Clear search">...</button>

https://github.com/QingWei-Li/docsify/blob/6c7ebc989dd1572f744fbe5fc8f5af710b790cce/src/plugins/search/component.js#L98

These two changes have been integrated into docsify-themeable via a plugin. It is preferable to have these changes integrated directly into docsify.

• https://github.com/jhildenbiddle/docsify-themeable/blob/master/src/js/plugin-fix-search-clear-button.js

[trusktr]

Swap the close button <svg>

Or in general for SVGs we can make sure that the SVG content takes up full width/height of the SVG, then we can size the SVG itself like any regular block element so as to rely on the CSS size to be intuitive (meaning the CSS size therefore dictates the size of the drawing).

In this case, the drawing is easy to accomplish with HTML/CSS instead of SVG.

Use a element for the close button to allow the element to receive focus.

👍

It is preferable to have these changes integrated directly into docsify.

👍

[trusktr]

Added to 5.x because it could be a breaking change for someone.

[jhildenbiddle]

This issue has been addressed by PR #2469. The changes will be available when Docsify v5 is released.