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.

Sign up for GitHub

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

Jump to bottom

Layout to include lists for card elements #2328

Open
Tracked by #5185
chris-gds opened this issue Aug 26, 2021 · 0 comments
Open
Tracked by #5185

Layout to include lists for card elements #2328

chris-gds opened this issue Aug 26, 2021 · 0 comments
Labels
feature request User requests a new feature layout

Comments

@chris-gds
Copy link

chris-gds commented Aug 26, 2021 •
edited
Loading

Related component

https://design-system.service.gov.uk/styles/layout/

Context

While working on this PR to update a Design / Apply the Design system I came across an issue where I wanted the govuk-grid-column-one-quarter to be a list item as it made sense semantically.

Consider this "card" Design:

image

Consider the markup that was wanted so all items were grouped yet used the layout.

<ol>
  <div class="govuk-grid-row">
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
     <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
  </div>
  <div class="govuk-grid-row">
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
    <li class="govuk-grid-column-one-quarter">
      <p>govuk-grid-column-one-quarter</p>
    </li>
  </div>
</ol>

However this markup is invalid due to the wrapper being a div (ol > div > li)

Using the layout as it currently stands means that a list can't be used.

Alternatives

As a solution this has been used in it's place so the layout behaves like a list and is announced as expected.

<div role="list">
  <div class="govuk-grid-column-one-quarter" role="listitem">
  </div>
  <div class="govuk-grid-column-one-quarter" role="listitem">
  </div>
  <div class="govuk-grid-column-one-quarter" role="listitem">
  </div>
  <div class="govuk-grid-column-one-quarter" role="listitem">
  </div>
</div>

Pros: uses the Design System and works with AssistiveTech
Cons: not semantic markup, feels a way, typically use aria as a last resort

Another alternative is to use more than 4 govuk-grid-column-one-quarters within a row and add custom styles to adjust any impact

Pros: uses semantic markup, partially uses Design System, no aria required
Cons: Additional custom code need, any Design System changes might not pull through, heights are not factored in

Additional information (if applicable)

This pattern appears to exist in a few places on GOV.UK including this page:
https://www.gov.uk/government/organisations/department-for-environment-food-rural-affairs
This would also benefit from being marked-up as a list.

PR conversation around this issue is more in depth here
@chris-gds chris-gds added feature request User requests a new feature awaiting triage Needs triaging by team labels Aug 26, 2021
@chris-gds chris-gds mentioned this issue Aug 26, 2021
Closed
8 tasks
@vanitabarrett vanitabarrett added layout and removed awaiting triage Needs triaging by team labels Aug 27, 2021
@chris-gds chris-gds mentioned this issue Sep 6, 2021
Merged
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
dfe9fa3 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
402b63b 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
69b05f2 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
9fddfcf 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
59f0ba2 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
09bf5b6 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
@chris-gds chris-gds mentioned this issue Nov 15, 2021
Merged
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 15, 2021
Change "get-involved" Page
8825df1 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 16, 2021
Change "get-involved" Page
867b747 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
chris-gds pushed a commit to alphagov/government-frontend that referenced this issue Nov 16, 2021
Change "get-involved" Page
58e6783 
- Update Design of this page

- Use publishing_gem components and Design System and in turn improve consistency and on-going Accessibility 

- Adding inset-text component for use with pull out section that highlights to users a closing consultation

- Removing bespoke "get-involved" CSS

- Change load order of CSS.

The number within "Big number" component was pulling through an unexpected underline from 'govuk-link' on inspection this is coming through from 'component_support' - in this context it's due to the cascade, by moving the load order this resolve this issue as "big numbers" is being loaded after resolving the issue.

- Adjust layout for "take part" section that uses image_card component grid. As this is a list this uses an adjusted technique while a layout feature request on the Design System is outstanding,  This allows the Design system grid to be used but AT to interpret the section as a list [1]

[1] alphagov/govuk-frontend#2328
@romaricpascal romaricpascal mentioned this issue Jul 29, 2024
Open
9 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request User requests a new feature layout
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@vanitabarrett @chris-gds