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

Radios #19

Open
davidhunter08 opened this issue Feb 20, 2019 · 20 comments
Open

Radios #19

davidhunter08 opened this issue Feb 20, 2019 · 20 comments
Labels
component Goes in the 'Components' section of the service manual mobile app NHS.UK component on NHS website public-facing staff-facing

Comments

@davidhunter08
Copy link
Contributor

davidhunter08 commented Feb 20, 2019

Use this issue to discuss radios in the NHS digital service manual

@davidhunter08 davidhunter08 added the component Goes in the 'Components' section of the service manual label Feb 20, 2019
@nrogoff
Copy link

nrogoff commented Jun 4, 2019

What does nhsuk-radios class do? Not in version 2.0.0 of css

@StephenHill-NHSBSA
Copy link

Are there any plans to improve the radio component with conditional reveals? I'm thinking something similar to the Gov Design System:

https://design-system.service.gov.uk/components/radios#conditionally-revealing-content

Within the NHS BSA, we use this variant regularly across our range of services e.g.

image

@davidhunter08
Copy link
Contributor Author

The NHS App uses an override to keep the inline radios 'inline' on smaller devices. The current inline radios stack at breakpoint 640px.

Screenshot 2020-09-24 at 16 37 48

@davidhunter08
Copy link
Contributor Author

@sarawilcox
Copy link
Collaborator

@DouglasCaven
Copy link

image

image

image
image

image
image

image

@chrimesdev
Copy link

Hey @DouglasCaven what version of the frontend library are you using? This should be fixed in v5.2.0

@DouglasCaven
Copy link

DouglasCaven commented Oct 6, 2021 via email

@chrimesdev
Copy link

chrimesdev commented Oct 6, 2021

Thanks @DouglasCaven, when you find out, if you could feedback here rather than email so that others can benefit and also be able to answer (working in the open).

@DouglasCaven
Copy link

DouglasCaven commented Oct 7, 2021 via email

@chrimesdev
Copy link

Hi @DouglasCaven I'm not familiar with the Webjar version, is this something custom NHSBSA have made for Java projects? If so, its vital that this Webjar version is kept up to date and in sync with the core NHS.UK frontend library. Custom language specific ports are not supported by the core team here at NHS Digital.

Unfortunately I'm not familiar with this (and wasn't aware of it), so won't be best able to advise how to update it to use 5.2.0 of the NHS.UK frontend library - you may have to speak to the developers at NHSBSA about this.

@DouglasCaven
Copy link

DouglasCaven commented Oct 7, 2021 via email

@DouglasCaven
Copy link

I've since spoken with one of the F/E developers at the NHSBSA who advised.... if we point to the latest release: https://github.com/nhsuk/nhsuk-frontend/releases and download the js/css files and add them to the project, should solve the issue.

@lewisharveydeveloper
Copy link

Running version 5.1.0, I have the following code:

`

  <fieldset class="nhsuk-fieldset" aria-describedby="contact-hint">
    <legend class="nhsuk-fieldset__legend nhsuk-fieldset__legend--l">
      <h1 class="nhsuk-fieldset__heading">
        How would you prefer to be contacted?
      </h1>
    </legend>

    <div class="nhsuk-hint" id="contact-hint">
      Select one option
    </div>

    <div class="nhsuk-radios nhsuk-radios--conditional">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact-1" name="contact" type="radio" value="email" aria-controls="conditional-contact-1" aria-expanded="false">
        <label class="nhsuk-label nhsuk-radios__label" for="contact-1">
          Email
        </label>
      </div>

      <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-contact-1">

        <div class="nhsuk-radios">

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-1" name="example" type="radio" value="yes">
        <label class="nhsuk-label nhsuk-radios__label" for="example-1">
          Yes
        </label>
      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="example-2" name="example" type="radio" value="no">
        <label class="nhsuk-label nhsuk-radios__label" for="example-2">
          No
        </label>
      </div>

    </div>

      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact-2" name="contact" type="radio" value="phone" aria-controls="conditional-contact-2" aria-expanded="true">
        <label class="nhsuk-label nhsuk-radios__label" for="contact-2">
          Phone
        </label>
      </div>

      <div class="nhsuk-radios__conditional" id="conditional-contact-2">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="phone">
            Phone number
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="phone" name="phone" type="text">
        </div>

      </div>

      <div class="nhsuk-radios__item">
        <input class="nhsuk-radios__input" id="contact-3" name="contact" type="radio" value="text" aria-controls="conditional-contact-3" aria-expanded="false">
        <label class="nhsuk-label nhsuk-radios__label" for="contact-3">
          Text message
        </label>
      </div>

      <div class="nhsuk-radios__conditional nhsuk-radios__conditional--hidden" id="conditional-contact-3">

        <div class="nhsuk-form-group">
          <label class="nhsuk-label" for="mobile">
            Mobile phone number
          </label>
          <input class="nhsuk-input nhsuk-u-width-two-thirds" id="mobile" name="mobile" type="text">
        </div>

      </div>

    </div>
  </fieldset>

</div>`

the first radio button reveals two sub radio buttons. but when you click on one of the sub radio buttons, the revealed section disappears.

here is a recording to demonstrate:
https://gyazo.com/9b5c07b4e4b1edfc50fd01b3fb49cc43

@Kirsten-Hardern-Hippo-Digital

Hi Team,

As result from a DAC audit, we have received the following feedback on the radios within NHS login:

Reported issue: Some low vision users find it difficult to determine if an element can be activated if relying on a cursor change alone. A cursor change can be difficult to spot for low vision users, and some users find it helpful if additional highlighting is present.

Suggested solution: an additional highlight could be added to interactive elements on hover.
For example, radio buttons could show a thickened border on hover.

Is this something that is being considered for the radios?

@sarawilcox
Copy link
Collaborator

We've received a request to change the radios example with hint text in the design system. This one.

Screenshot 2023-03-09 at 13 51 01

it's breaking our login rules in terms of 'sign in with NHS login' (log in to login etc) and we don't know what a user ID is in this context.

I think our example was just taken from the GOV.UK one.
Screenshot 2023-03-09 at 13 45 15

We're also not sure we have any services that use Verify.

And Register with a GP uses buttons instead.

image (46)

I'm looking for another examples of radios with hint text. Can anyone help, please?

@sarawilcox
Copy link
Collaborator

sarawilcox commented Mar 9, 2023

A few other examples of radios with hint text.

From Register with a GP

Screenshot 2023-03-09 at 13 56 53

One from the Campaign Resource Centre

Screenshot 2023-03-09 at 13 59 53

@sarawilcox
Copy link
Collaborator

From NHS login
image - 2023-03-09T144236 903

From the Profiles team
image (47)

@LydiaTeebay
Copy link

Some comments from the NHS login Digital Accessibility Group (DAC) report re radios:
Screenshot 2023-04-20 at 14 58 39
Screenshot 2023-04-20 at 14 58 34

@sarawilcox
Copy link
Collaborator

We'll see if we get further comments about this issue. So far, we've only seen it reported by DAC. There is some concern that adding hover states to all questions could cause new, different problems for other users eg. neurodivergent people finding it distracting.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
component Goes in the 'Components' section of the service manual mobile app NHS.UK component on NHS website public-facing staff-facing
Development

No branches or pull requests

9 participants