Repository navigation
Search plugin: replace image and use button tag #528
Description
Activity
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.
👍
Added to 5.x because it could be a breaking change for someone.
Reacted by John Hildenbiddle- added a commit that references this issue
on Jun 21, 2024 This issue has been addressed by PR #2469. The changes will be available when Docsify v5 is released.
The search plugin would benefit from two minor updates:
<svg>for one that is properly sized to avoid sizing via CSStransform.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
Use a
<button>element for the close button to allow the element to receive focus. Another option is to addtabindex="0"to the clear buttondiv, but abuttontag 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: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.