The Australian Government coat of Arms

Communities of practice

Communities of practice

Body


#1

Please provide any feedback for the Body component.

You can also view the component page on our documentation site for the Body component.


#2

Moved from https://github.com/govau/design-system-components/issues/207

Steps to reproduce:

  1. Create heading
  2. Add a named anchor to the start of it
  3. Use the anchor via a link or in the URL

You’ll notice in Edge and Firefox that either a black line or narrow black box appear next to the heading.

<h2><a name="anchor></a>Heading</h2>

While this heading method may be a bit old school, it is still used by a number of WYSIWYG editors, including the one bundled with govCMS.

Credit to Josh D one of our Service Officers who initially reported the effect.

Options for fixes:

  1. add .au-body a[name]:target { outline: inherit; }, or
  2. change .au-body a {} to .au-body a:link {}
  3. add .au-body a:empty:target { outline: inherit; } (not even sure if this works)

We went with option 1.


#3

I’ve encountered an instance when mixing <p> with <ul> - there’s a max-width setting on paragraphs, but longer <li> within a <ol> or <ul> run to the maximum available width.

As both of these block elements regularly co-occur within body copy, I’m hoping to be able to apply a consistent max-width and avoid any unnecessary ‘rag’ on the right.


#4

Hey @gordon.grace :wave:

Yeah so you mean when we do something like this:

text text text text text text text text text text text text
text text text text text text text text text text text text
• text text text text text text text text text text text text text text text text
• text text text text text text text text text text text text text text
• text text text text text text text text text text text text
text text text text text text text text text text
text text text text text text text text text text text

The list is clearly going out of bounds here and I get that that’s not ideal.
Technically speaking I can’t see a way to help you from a auds perspective.
There could be a lot of things inside an li element not just text. If we apply max-width to all lis we will catch those too and that will break a bunch of things.

If we require everyone to use the p inside li we can detect when to apply max-width BUT now we got the issue to account for the indentation of the list. Is it a simple list or a nested one? Does each of the parent lists actually have indentation or are they overwritten for some reason?

So I don’t think there is a way to automatically fix this.

But here is a thought: How about we add a modifier class to a wrapping div of the list that will cap it’s size to a max-width? That way it doesn’t matter how you nest it?

I can’t think of a better solution. Happy for suggestions :slight_smile:


#5

@gordon.grace We supply $AU-maxwidth as a SCSS variable in Core. Which you could use if you’re using the SCSS.

.myselector ul,
.myselector ol,
.myselector etc { max-width: $AU-maxwidth }

We’ve actually talked internally about removing the max-width on .au-body p for this very reason but wanted to put it to the community before doing so. — Mostly because it would require people to use their own layouts using custom CSS or the grid to get nice line lengths.


#6

Thanks for the responses, @treb, @dominik - I don’t have a strong preference either way, but the fact that there’s a couple of options for workarounds is encouraging.


#7

Some links have an underline that disappears on hover, while other links have no underline until hovered on. Is there any rationale for the different hover effects?

Also, the focus state has a thick purple border. What is the rationale for that?

Thanks


#8

Hey @guiseppe :wave:

Link styles
Not 100% sure which links you mean? All normal links inside the au-body class should be action-color with an underline. (can you show us an example?)

Rationale for no underline on hover
We wanted something other than colour to indicate state, but the options for what you can do are pretty slim. We have a few experiments around improving this but are open to any accessibility advice people might have.

Rationale for why some links don’t have underline
Some of the elements on the design system website and in the UI-kit don’t have an underline because the function is implied by something else, like position, or shape see the main-nav on Vision Australia for another example of this.

Rationale for focus colour
We wanted something which met the WCAG 2.1 requirements for User Interface Components/state… But we also wanted a colour which stood out dramatically from the normal link colour, error state, and success colours. ref issue:306


I hope that shines some light on it, I’ll make a ticket to move some of this content into the actual rationale pages… But as always we’re open to input and feedback. :slight_smile: :+1:


Link List
#9

The current system font for linux is large and clunky. It is familiar to users of the system but is not a desirable web experience. Reading this great article about system fonts that github use they found through research that:

Interestingly enough, Linux users were the most upset at the change given Linux system fonts seem to be rather large and clunky, and their system fonts so inconsistent across distros.

It becomes really hard to read in body areas with large amounts of content.

Our current font stack is:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

I am suggesting we change to:

font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";

Here is an example what the current system font looks like on ubuntu:

The proposed new system font stack would look like:


#10

The example implementations of the Body component doesn’t appear to have default styling for <blockquote>, <q> or <cite>.

I’d anticipate a scenario where a Content Designer might want to add the au-pullout class to these tags, so perhaps another example ‘Callout’ scenario would assist.

Callouts are an excerpt of text or an article that has been pulled out…

This sounds a lot like <blockquote> or <aside>.


#11

@gordon.grace Yeah this has been known for a while. It will probably use callout and need some design love. Callout is meant to be slightly different.

We are also missing table styling in the body component.