Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Hard-coded id for character count component #1766

Open
Tracked by #5185
Dawdre opened this issue Mar 16, 2020 · 1 comment
Open
Tracked by #5185

Hard-coded id for character count component #1766

Dawdre opened this issue Mar 16, 2020 · 1 comment

Comments

@Dawdre
Copy link

Dawdre commented Mar 16, 2020

this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')

Hey! Currently trying to implement your character count component. I am not using Nunjucks, so relying on copying the HTML from your examples (https://design-system.service.gov.uk/components/character-count/). On further investigation as to why it was not working, even though my DOM was identical (or at least I though it was). The above snippet hard-codes -info onto the end of the span id (from character-count.js).

Nowhere does this appear to be documented (if it is, and I have missed this, accept my apologies and close this immediately)? It does seem somewhat brittle? Your own govuk-frontend version here https://github.com/alphagov/govuk-frontend/blob/master/src/govuk/components/character-count/template.njk also manually adds -info onto the hint.

Now whilst calling the Nunjucks macro would always works and you don't need to care that this behaviour is happening behind the scenes. Anyone using raw HTML or implementing it into another templating language, is bound to run into this issue? The example code snippets on your component pages seem to be mostly contrived names/ids so one would quite easily rely on that not being a hard and fast rule to make the component work.

I have mine all working now, so not a major problem for me anymore but thought I would ask the question.

Thanks

@NickColley NickColley added the awaiting triage Needs triaging by team label Mar 16, 2020
@NickColley
Copy link
Contributor

NickColley commented Mar 16, 2020

Heya @Dawdre,

The important thing in the HTML is that the textarea is associated with the count message, we use the aria-describedby attribute which references the count message's id attribute.

We could consider changing the logic so that we take advantage of that relationship, which would allow you to use any id you want on the count message, as long as you also create the correct association with the textarea using aria-describedby.

I have created a pull request to demonstrate this, would be interested in your thoughts:

https://github.com/alphagov/govuk-frontend/pull/1767/files

Update: Looks like my proposal wouldnt work as I thought.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

4 participants