iOS - telephone numbers have the default link colour

On iOS telephone numbers are detected and formatted into a link automatically, because this link does not have a govuk-link class it is not styled correctly.

In our service we use a bit of custom CSS to fix the issue (below), maybe this should be added to the govuk-frontend

a[href^="tel"] {
  @extend %govuk-link;
}

[malcolmhire]

As a note, probably against user needs so I think we would not do it, but you can disabled this with a meta tag:

<meta name="format-detection" content="telephone=no">

Accordion to this, at least in emails, when Apple injects these links there’s additional attributes on it:

https://litmus.com/blog/update-banning-blue-links-on-ios-devices

Which may mean we could do a safer selector like

a[x-apple-data-detectors][href^="tel:"] {

I’ve just tested that and it doesn’t work, guessing it only adds x-apple-data-detectors in Apple Mail. In Safari the anchor tag looks like this: <a href="tel:[phone]">00000 000 000</a>

[NickColley]

In terms of where this feature would go, we already have a concept of global styles that we recommend mainly for prototyping.

This is technically a global style but would be used when global styles are turned off, so perhaps alongside links? Hmmm, It’s risky to add global styles…