Skip to content

Commit

Permalink
tidy up of examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@vickytnz
vickytnz committed Sep 3, 2024
1 parent 3389b55 commit f61f76c
Show file tree
Hide file tree
Showing 23 changed files with 386 additions and 710 deletions.
10 changes: 3 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,11 @@
This is a project to show common mistakes and improvements for forms designed using GOV.UK Frontend.

## Prototype
The current prototype is available with password protection while it is still under development.

http://xgov-accessibility.vickytnz.com/ or https://xgov-accessibility-7c602e50a75a.herokuapp.com/

username: ``accessibility``
password: ``accessibility``
The current prototype is available with password protection while it is still under development.

http://vickytnz.github.io/xgov-accessibility

The site has some known bugs with the passwords showing up so may need a few refreshes to get in.

## Contribute
This is available under a CC-4.0 International licence. You can create examples, or contact Vicky Teinaki for more information.
This is available under a CC-4.0 International licence. You can create examples, or contact Vicky Teinaki for more information.
14 changes: 13 additions & 1 deletion _site/assets/govuk.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7975,6 +7975,16 @@ pre > code.highlight {
background: linear-gradient(to right, rgba(45, 32, 6, 0.2) 70%, rgba(45, 32, 6, 0));
}

.old-frontend a:focus, .old-frontend govuk-link:focus {
background-color: #ffbf48;
}

.old-frontend .govuk-skip-link:focus {
outline: 3px solid #ffbf48;
outline-offset: 0;
background-color: #ffbf48;
}




Expand Down Expand Up @@ -8632,13 +8642,15 @@ pre > code.highlight {
background-color: #8822aa;
color: #ffffff;
display: flex;
padding-top: 0.1px;
}
@media (min-width: 40.0625em) {
.x-govuk-masthead {
padding-bottom: 20px;
}
}
.x-govuk-masthead > .govuk-width-container {
flex: 1;
}

.x-govuk-masthead__title {
font-family: system-ui, sans-serif;
Expand Down
82 changes: 11 additions & 71 deletions _site/examples/complex-question/improved/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,81 +44,21 @@



<h1 class="govuk-heading-l">
Gender of the goose
</h1>


<p>If you can tell the gender of the goose, this will help us monitor the gender mix of the goose population.</p>
<p>A male goose is normally larger than a female goose, has a deeper honk and may be more agressive.</p>








<div class="govuk-form-group">

<fieldset class="govuk-fieldset">

<legend class="govuk-fieldset__legend govuk-fieldset__legend--m">

Do you know the gender of the goose?

</legend>


<div class="govuk-radios" data-module="govuk-radios">







<div class="govuk-radios__item">
<input class="govuk-radios__input" id="higher-further-education" name="higher-further-education" type="radio" value="Yes">
<label class="govuk-label govuk-radios__label" for="higher-further-education">
Yes
</label>

</div>








<div class="govuk-radios__item">
<input class="govuk-radios__input" id="higher-further-education-2" name="higher-further-education" type="radio" value="No">
<label class="govuk-label govuk-radios__label" for="higher-further-education-2">
No
</label>

</div>

<h1 class="govuk-heading-l">Your Self Assessment Unique Taxpayer Reference (UTR)</h1>

<p class="govuk-body">You can find it in your Personal Tax Account, the HMRC app or on tax returns and other documents from HMRC. It might be called ‘reference’, ‘UTR’ or ‘official use’.</p>

<p class="govuk-body"><a class="govuk-link" rel="noreferrer noopener" target="_blank" href="https://www.gov.uk/find-utr-number">Get more help to find your UTR (opens in new tab)</a></p>

<div class="govuk-form-group">
<label class="govuk-label govuk-label--m" for="utr">
What is your Self Assessment UTR?
</label>
<div id="utr-hint" class="govuk-hint">
Your UTR can be 10 or 13 digits long.
</div>

</fieldset>

</div>










<input class="govuk-input govuk-input--width-10" id="utr" name="utr" type="text" aria-describedby="utr-hint">
</div>



Expand Down
12 changes: 7 additions & 5 deletions _site/examples/complex-question/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<link rel="alternate" type="application/atom+xml" href="feed.xml" >
<meta property="og:title" content="Make sure that answers are connected to a question">
<meta property="og:description" name="description" content="When a question is too complex to allow for a 1 paragraph description, other approaches are required.">
<meta property="og:description" name="description" content="Input fields separated too far from the initial question cause barriers.">
<meta property="og:image" content="https://raw.githubusercontent.com/x-govuk/logo/main/images/x-govuk-opengraph-image.png">
</head>
<body class="govuk-template__body">
Expand Down Expand Up @@ -106,7 +106,7 @@ <h1 class="app-document-header__title govuk-heading-xl">
</span></h1>

<p class="app-document-header__description govuk-body-l">
When a question is too complex to allow for a 1 paragraph description, other approaches are&nbsp;required.
Input fields separated too far from the initial question cause&nbsp;barriers.
</p>


Expand All @@ -125,9 +125,10 @@ <h1 class="app-document-header__title govuk-heading-xl">


<h2 id="typical-example" class="govuk-heading-l"><a class="app-link--heading govuk-link" href="#typical-example"><span>Typical examples that cause barriers </span></a></h2>
<p class="govuk-body">This example can happen when showing information about a user that they need to check.</p>

<h3 id="example-1" class="govuk-heading-m">Example 1</h3>
<p class="govuk-body">This example can happen when showing information about a user that they need to check.</p>


<div class="app-example-wrapper" id="character-count-example" data-module="app-tabs">
<div class="app-example app-example--tabs">
Expand All @@ -136,7 +137,7 @@ <h3 id="example-1" class="govuk-heading-m">Example 1</h3>
Full example <span class="govuk-visually-hidden">: asking information</span> (opens in new tab)
</a>
</div>
<iframe title="Original example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/examples/complex-question/mistake" loading="eager" id="iFrameResizer0" style="overflow: auto; width: 100%; max-width: 100%; height: 400px;"></iframe>
<iframe title="Original example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/examples/complex-question/mistake" loading="eager" id="iFrameResizer0" style="overflow: auto; width: 100%; max-width: 100%; height: 600px;"></iframe>
</div>

<!-- <div class="app-tabs" role="tablist">
Expand All @@ -161,9 +162,10 @@ <h3 id="example-1" class="govuk-heading-m">Example 1</h3>

<p class="govuk-body">A complex question must have a header, information and then the question - without this it is difficult for screen readers to show that there is context or for people with memory issues to remember what is being asked.</p>

<p class="govuk-body">This example can happen when showing information about a user that they need to check.</p>

<h3 id="example-2" class="govuk-heading-m">Example 2</h3>
<p class="govuk-body">This example can happen when showing information about a user that they need to check.</p>


<div class="app-example-wrapper" id="character-count-example" data-module="app-tabs">
<div class="app-example app-example--tabs">
Expand Down
Loading

0 comments on commit f61f76c

Please sign in to comment.