Adding latest changelog.md to file-upload width branch

.github/ISSUE_TEMPLATE/tech-debt.yaml

@@ -0,0 +1,62 @@
+name: Tech debt
+description: For internal use only - Issue template for tracking technical debt
+labels: [tech debt, awaiting triage]
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        This is a template for creating issues that describe technical debt.
+
+        It is based off the [example in the GDS Way page on tracking technical debt](https://gds-way.cloudapps.digital/standards/technical-debt.html#example).
+
+  - type: textarea
+    attributes:
+      label: Cause
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Consequences
+    validations:
+      required: true
+
+  - type: dropdown
+    attributes:
+      label: Impact of debt
+      options: [Low, Medium, High]
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Reason (impact of debt)
+    validations:
+      required: false
+
+  - type: dropdown
+    attributes:
+      label: Effort to pay down
+      options: [Low, Medium, High]
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Reason (effort to pay down)
+    validations:
+      required: false
+
+  - type: dropdown
+    attributes:
+      label: Overall rating
+      options: [Low, Medium, High]
+    validations:
+      required: true
+
+  - type: textarea
+    attributes:
+      label: Reason (overall rating)
+    validations:
+      required: false

CHANGELOG.md

@@ -10,6 +10,9 @@ We’ve made fixes to GOV.UK Frontend in the following pull requests:
 - [#2265: Don’t remove focus outline from disabled link buttons in forced color mode](https://github.com/alphagov/govuk-frontend/pull/2265)
 - [#2273: Fix invisible footer OGL logo in forced color mode](https://github.com/alphagov/govuk-frontend/pull/2273) – thanks to [@oscarduignan](https://github.com/oscarduignan) for reporting this issue.
 - [#2277: Fix invisible start button chevron in forced color mode](https://github.com/alphagov/govuk-frontend/pull/2277)
+- [#2290: Improve support for IE11 with Windows High Contrast Mode](https://github.com/alphagov/govuk-frontend/pull/2290)
+- [#2312: Remove padding-right from details element](https://github.com/alphagov/govuk-frontend/pull/2312)
+- [#2306: Add max-width to file upload component](https://github.com/alphagov/govuk-frontend/pull/2306)
 
 ## 3.13.0 (Feature release)
 

docs/contributing/resize-text-in-browsers.md

@@ -0,0 +1,71 @@
+# Resize text in browsers
+
+When building components, you should check that the text:
+
+- resizes with the page and does not stay a fixed size
+- stays within its containers (for example, a box or banner)
+
+If text spills outside of its container, your component:
+
+- will look wrong
+- may not work, if the text blocks out an interactive element
+- may make some text hard for users to read
+
+Follow these instructions to test the effect of resizing text within different browsers and devices. Please note some browsers may work slightly differently, depending on their version.
+
+## Resize text in Firefox
+
+You can resize text in Firefox in 2 ways.
+
+### Use Zoom text only to resize text
+
+1. On the menu bar, select **Firefox**.
+2. Select **Preferences**.
+3. Under **Language and appearance - Zoom**, select **Zoom text only**. This option lets you zoom in or out only on the webpage text. It does not affect images or any other page elements.
+4. Press **Command** (Mac) or **Ctrl** (other operating systems), then **+** or **-** to increase or decrease the text size.
+
+### Use the Size dropdown to resize text
+
+1. On the menu bar, select **Firefox**.
+2. Select **Preferences**.
+3. Under **Language and appearance - Fonts and Colors**, select the **Size** dropdown to display font size options.
+
+## Resize text in Google Chrome
+
+1. On the URL bar, select the 3 dots icon.
+2. Select **Settings**.
+3. Select **Appearance**.
+4. Select **Customise fonts**. The screen displays the options for you to change the font size.
+
+## Resize text in Chrome or Firefox for Android
+
+1. Select **Settings**. 
+2. Select **Accessibility**.
+3. Drag the **Text scaling** slider until you're happy with the size of the example text.
+
+## Resize text in Internet Explorer versions 8 to 11
+
+1. Press **Alt** to display the menu bar. 
+2. On the menu bar, select **View**.
+3. Select **Text size** to display resizing options.
+
+## Resize text in Microsoft Edge
+
+1. On the URL bar, select the 3 dots icon.
+2. Select **Settings**.
+3. Select **Appearance**.
+4. Scroll down to **Fonts** and select the **Font size** dropdown to display font size options.
+
+## Resize text in Safari
+
+1. Press **Option**.
+2. While still pressing **Option**, select the **View** menu.
+3. Select **Make Text Bigger** or **Make Text Smaller**. To display the text in its original size again, select **Actual Size**.
+
+## Known issue: no text resizing in iOS
+
+You cannot resize the text for GOV.UK Design System styles in iOS. 
+
+Due to iOS constraints, our styles do not support adjusting the base font size on iOS devices.
+
+For more details, see our [GitHub issue #882: Investigate Dynamic Type to improve accessibility for iOS users](https://github.com/alphagov/govuk-frontend/issues/882).

docs/contributing/testing.md

@@ -59,7 +59,7 @@ If you've created a new component, create a new `src/govuk/<COMPONENT>/<COMPONEN
 You should test that your contribution works:
 
 - in [Internet Explorer 8](https://frontend.design-system.service.gov.uk/supporting-ie8/), 9 and 10 - components do not need to look perfect
-- in [recommended browsers](https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in)
+- in [recommended browsers](https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in), including when you [resize text](/docs/contributing/resize-text-in-browsers.md)
 - when your users [override colours in Windows, Firefox and Chrome](https://accessibility.blog.gov.uk/2018/08/01/supporting-users-who-change-colours-on-gov-uk/)
 - with [recommended assistive technologies](https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies#what-to-test)
 

package.json

@@ -52,7 +52,7 @@
     "gulp-uglify": "^3.0.2",
     "html5shiv": "^3.7.3",
     "jest": "^26.4.2",
-    "jest-axe": "^3.5.0",
+    "jest-axe": "^5.0.1",
     "jest-puppeteer": "^5.0.4",
     "jest-serializer-html": "^7.0.0",
     "jquery": "1.12.4",

src/govuk/components/accordion/accordion.test.js

@@ -38,6 +38,11 @@ describe('/components/accordion', () => {
     })
 
     describe('when JavaScript is available', () => {
+      afterEach(async () => {
+        // clear accordion state
+        await page.evaluate(() => window.sessionStorage.clear())
+      })
+
       it('should indicate that the sections are not expanded', async () => {
         await page.goto(baseUrl + '/components/accordion/preview', { waitUntil: 'load' })
 

src/govuk/components/checkboxes/_index.scss

@@ -132,7 +132,7 @@
 
     // When in an explicit forced-color mode, we can use the Highlight system
     // color for the outline to better match focus states of native controls
-    @media screen and (forced-colors: active) {
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
       outline-color: Highlight;
     }
 

src/govuk/components/details/_index.scss

@@ -71,7 +71,8 @@
   }
 
   .govuk-details__text {
-    padding: govuk-spacing(3);
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
     padding-left: govuk-spacing(4);
     border-left: $govuk-border-width solid $govuk-border-colour;
   }

src/govuk/components/radios/_index.scss

@@ -130,7 +130,7 @@
 
     // When in an explicit forced-color mode, we can use the Highlight system
     // color for the outline to better match focus states of native controls
-    @media screen and (forced-colors: active) {
+    @media screen and (forced-colors: active), (-ms-high-contrast: active) {
       outline-color: Highlight;
     }
 

src/govuk/helpers/_colour.scss

@@ -75,7 +75,7 @@
 /// Make a colour darker by mixing it with black
 ///
 /// @param {Colour} $colour - colour to shade
-/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @param {Number} $percentage - percentage of `$colour` in returned colour
 /// @return {Colour}
 /// @access public
 
@@ -86,7 +86,7 @@
 /// Make a colour lighter by mixing it with white
 ///
 /// @param {Colour} $colour - colour to tint
-/// @param {Number} $percentage - percentage of `$colour` in returned color
+/// @param {Number} $percentage - percentage of `$colour` in returned colour
 /// @return {Colour}
 /// @access public