govuk-frontend
govuk-frontend copied to clipboard
alphagov
Investigate customised colours on details component in IE11
Some components relying on 'clip-path' may be displaying in a way that is not ideal in IE11 / Edge, which don't support clip-path.
This may also be a problem with the details component.
I think maybe our best bet is to change these icons to use inline SVGs with currentColor fills.
- https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/6519995-support-clip-path-property
- https://caniuse.com/#feat=css-clip-path
We observed this issue while testing Apply for teacher training at the Digital Accessibility Centre (DAC).
This is no longer relevant for the back link component, but still applies to the details component.
I can't reproduce this with the Design System details component in Edge or Chrome on Windows 10 (worth noting that the Windows High Contrast mode itself doesn’t work on Chrome on Windows 10, you’re asked to install the Chrome High Contrast extension instead so I tested with that).
This was reported as an issue on the Details component in IE11 by DAC when performing an assessment of the Vulnerable People Service.
I can't reproduce this with the Design System details component in Edge or Chrome on Windows 10 (worth noting that the Windows High Contrast mode itself doesn’t work on Chrome on Windows 10, you’re asked to install the Chrome High Contrast extension instead so I tested with that).
I suspect this affected Edge pre-Chromium, which never supported clip-path as far as I can tell.
Worth updating the title to remove the mention of Edge, do you reckon?
For the record, this is how the details component looks like in IE11 with Windows High Contrast mode:
From Frontend v5 we will no longer ship an interactive Details component for IE 11, as we've removed the polyfill for legacy browsers, including Internet Explorer. Details elements will always be shown as expanded in IE.
Going to close this off now as Frontend v5 has been released and all situations where clip-path'd elements are used are no longer present on IE11.
- Back Link no longer uses
clip-path. - Details is no longer expandable or collapsible as the polyfill has been removed. They always appear expanded.
- Headers with navigation items are no longer expandable or collapsible on narrow screens, as IE11 no longer executes JavaScript. Menus are always expanded.