The Australian Government coat of Arms

Communities of practice

Communities of practice

Link List


#1

Please provide any feedback for the Link List component.

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


#2

I believe links require a non-colour denominator (eg. underline) in both default and hover state in order to meet WCAG 2.0 guidelines. Looks like the links currently drop the underline styling on hover.

Love the work you guys are doing. Keep it up!


#3

Thanks @mbarwick!

Can you link to the WCAG documentation you’re referring to? It will help drastically in progressing your feedback. :slight_smile: (All i can think of is 1.4.1 Use of Color?)

I have just provided some of the rationale over in the body topic, but it’s a hard one to solve because the parameters don’t provide many viable options example :persevere:


#4

The outline property that is applied on :focus satisfies 2.4.7. And F73 seems to only refer to links in their default state. I could be wrong on that tho.
The thick purple outline is a bit on the overbearing side. I would have just left it with the default dotted outline on :focus. Leave it to the user do their own thing with user agent style-sheets and high contrast modes if is needed to stand out more.

I believe the removal of the underline on :hover is fine when it comes to A11y conformance. Plus the cursor change to a pointer helps reinforces the hover state of links.


#5

Why “Link List” as a component and not just “List”. The link styling is handled by the <a> anyway.

A “Link” component might offer itself to expansion in future iterations such as avatars/icons, actions and sub lists.

i.e:

Instead the markup might look more like:

<ul class="au-list">
  <li  class="au-list-item"><a href="#">Options</a></li>
  <li  class="au-list-item"><a href="#">Help</a></li>
  <li  class="au-list-item"><a href="#">Sign Out</a></li>
</ul>

And in the future

<ul class="au-list">
  <li  class="au-list-item">
    <div class="au-list-item-avatar">...<div>
    <div class="au-list-item-content">...<div>
    <div class="au-list-item-action">...<div>
  </li>
  <li  class="au-list-item">
    <div class="au-list-item-avatar">...<div>
    <div class="au-list-item-content">...<div>
    <div class="au-list-item-action">...<div>
  </li>
  <li  class="au-list-item">
    <div class="au-list-item-avatar">...<div>
    <div class="au-list-item-content">...<div>
    <div class="au-list-item-action">...<div>
  </li>
</ul>

Could make it a far more versatile component. Not sure if that offends your design spec but food for thought.


#6

Thanks @phil.klitscher great suggestion. This idea has been brought up in this issue: