Account for additional focus indicator types in SIA-R65

[kasperisager]

Currently, SIA-R65 accounts for focus indicators created using the outline and text-decoration-* properties and requires external input when determining that no automatically verifiable focus indicator is available. This issue will document additional techniques for creating focus indicators to be included in the rule and track progress on this work.

• The background-color property (Accept background color difference as a valid focus indicator in SIA-R65 #714)

  This property is often used as the single means of providing a focus indicator for widgets with a solid background, such as buttons and inputs:

  <style>
    button {
      background-color: #fff;
    }
  
    button:focus {
      outline: none;
      background-color: #ddd;
    }
  </style>
  
  <button>Hello world</button>

• The color property (Accept color difference as a valid focus indicator in SIA-R65 #713)

  Similar to the background-color property, the color property is often used as the single means of providing a focus indicator for widgets without a solid background, such as links. For widgets with a solid background, it is also often used complementary to the background-color property.

  <style>
    a {
      color: blue;
    }
  
    a:focus {
      outline: none;
      color: darkblue;
    }
  </style>
  
  <a href="https://example.com">Hello world</a>

• The box-shadow property (Accept box shadow as a valid focus indicator in SIA-R65 #715)

  This property is often used as an alternative to the outline property as it provides greater control over the appearance of the focus indicator and allows for transitions. Notably, it's used for the focus indicators of buttons and inputs in Bootstrap (https://getbootstrap.com/docs/5.0/components/buttons/ and https://getbootstrap.com/docs/5.0/forms/form-control/).

[mvy-siteimprove]

👏