Display a custom ABBR title which also works on mobiles
#265
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
On mobiles, there's no way to display the ABBR title attribute. So let's create one way. Heavily inspired by this https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ and a bit by this https://stackoverflow.com/a/69353021/10537872 The relevant changes are that the title is read from the `data-title` attribute, which is created on mouseover from the regular `title` attribute which is then removed and added back on mouseout. Trying to keep the original attribute there for screen readers etc. On mouseout, the `blur()` method is also called which "cancels" the focus state, in which the element is when it was clicked on. Without this, if you clicked the ABBR tag on desktop, the title would be visible until you've clicked again somewhere. JS is also used to add `tabindex=0` because the attribute tag is created by Texy and it would require some more work to add it to HTML. The attribute makes the element reachable by using a keyboard.
spaze
added a commit
that referenced
this pull request
Nov 17, 2024
Because Safari 15.8 doesn't support it and while newer ones do, this is easy to change. Introduced in #265
spaze
added a commit
that referenced
this pull request
Nov 17, 2024
Because Safari 15.8 doesn't support it and while newer ones do, this is easy to change. Introduced in #265
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
On mobiles, there's no way to display the
ABBRtitleattribute. So let's create one way.Heavily inspired by this https://bitsofco.de/making-abbr-work-for-touchscreen-keyboard-mouse/ and a bit by this https://stackoverflow.com/a/69353021/10537872
The relevant changes are that the title is read from the
data-titleattribute, which is created on mouseover from the regulartitleattribute which is then removed and added back on mouseout. Trying to keep the original attribute there for screen readers etc.On mouseout, the
blur()method is also called which "cancels" the focus state, in which the element is when it was clicked on. Without this, if you clicked the ABBR tag on desktop, the title would be visible until you've clicked again somewhere.JS is also used to add
tabindex=0because the attribute tag is created by Texy and it would require some more work to add it to HTML. The attribute makes the element reachable by using a keyboard.