ODS > Active Focus

[B3nz01d]

Active Focus

Requirement

As a user
I want to be able to use a keyboard arrow
So That I can select the various items in a page and that they are visually identified

DSM reference

General description

A selection sould hoghligh all avalable components to understand that they are currently selected

UI specifications

Anatomy

Component

• all focus items are using the following color:
  • white background: orange accessible
  • black background: brand orange
  • other background (using the supporting colors): black
• the focus outline is sitting 2px away from the edge of the texte or the contained item
• the focus line is 3px thikness
• on the drop down the opening arrow would stay in white (not use the black hoover state when selected)
• /!\ on the drop down selected items check if a white separator could be added in) - this could also be applied to the table selected row
• the focus should follow the form of the focus item
• the toggle switch is focusing on the entire item
• on the tag item the focus should be applied to the entire item and not specifically on the delete crosss
• the focus state should not resize the component itself
• the focus state can overlay on top of other items of the componants
• the focus state shouldn't be animated
• the focus state should appear on keyboard focus only

Link to the new wcag 2.2: https://www.w3.org/TR/WCAG22/

Variants

• Drop down: the selected item should alow to have a white outline between the black selected item and the focus line
  • propose focus inside the list
  • propose focus with the focus outside le list <- prefered option
• Stepper: is it possible to have the outline follow the exact step form or does it need to be a rectangle outline ???
• Lists: check the selected item gray background and the orange contrast, might need to use the white spacing here as well
• Images for carousel:
  • carourousel navigation: should use a white outline + an orange focus
  • pagination dots: the pill holding the dots would switch to full white background and the orange rounded focus is applyed to the size of the dot
• Global header icon with a badge: could the we make the focus go under the badge so that te notification number is still visible???

States

• NA

Internationalization

• NA

UX specifications

Interaction

• All:
  • The user is able to select a text using the default OS behavior
• Touch:
  • Nothing Specific
• Keyboard:
  • Nothing specific

Animations

• there should not be any animation of the focus with zoom effect - /!\ check if this has an impact from the bootstrap source

Accessibility

Visual Accessibility

• taken into account within the design creation process

Usage Accessibility

• (?) Focus order - NA
• (?) Focus loss expected behavior - NA
• (?) Screen Reader - default OS behavior

Technical specifications

Implementation tasks

• Focus support component identification #1190
• Apply visible focus design guidelines in all components #1237

[louismaximepiton]

Content

• Typography > Links : Link should stay black + outline width should be 3px
• Typography > Links > With chevron : Link should stay black + outline width should be 3px
• Tables > Responsive tables : Tables should have an outline orange + 3px Question for ODS : No example in ODS
• Tables > Rich content tables > Row selection : Focus should be on the entire line + be orange + 3px -> ODS question: maybe not feasible technically.

Forms

• Form control > Examples : Form input and textareas should have an orange outline + 3px
• Form control > Readonly : Focus should be the same as for a input not readonly
• Form control > File input : Add an orange outline + 3px
• Form control > Color picker : Add an orange outline + 3px
• Form control > Datalists : Add an orange outline + 3px
• Select : Add an orange outline + 3px
• Checks&Radios > Checks : Checkboxes should have an orange outline + 3px
• Checks&Radios > Radios : Radio buttons should have an orange outline + 3px
• Checks&Radios > Switches : The outline should be always orange + 3px
• Checks&Radios > Toggle buttons : The outline should be orange + 3px + the buttons shouldn't change their colors while focused.
• Checks&Radios > Toggle buttons > With icon : The outline should be orange + 3px + buttons appearance isn't good atm.
• Checks&Radios > Star rating : The outline should be orange + 3px + every star should have its own focus (not the entire bar)
• Range : The focus on the thumb should not outline the entire slider + should not color the the border of the thumb + should have an orange outline on the thumb + 3px
• Quantity selector : The focus on the input should have an orange outline of 3px + Focus on a button should trigger the hover state + An orange outline of 3px Question to ODS if this is normal (the hover state on focus)
• Validation : Every component in error should keep the red border and have an orange outline of 3px on focus.

Components

• Accordion when closed : the outline should be orange and of 3px
• Accordion when opened : the outline should be around all the content of the accordion (button + collapsed content) + 3px
• Back to top : Such as every button, the focus state should not trigger the hover state. Question for ODS : What should the entire button look like ? (here)
• Buttons > Examples : They shouldn't trigger the hover effect on focus + should have an orange outline of 3px
• Buttons > Icon only : They shouldn't trigger the hover effect on focus + should have an orange outline of 3px
• Buttons > Social buttons : They shouldn't trigger the hover effect on focus + should have an orange outline of 3px
• Button group > Checkbox and radio button groups : The outline should be orange of 3px ODS question: with box-shadow or not.
• Carousel : Tracked in ODS > Navigation > Carousel Navigation #1084
• Close button : Such as every button, the focus state should not trigger the hover state.
• Dropdown button : Such as every button, the focus state should not trigger the hover state.
• Dropdown menu : The outline should be orange, inside every item + 3px
• List-group > Links and buttons : Apply the brand on it : Orange outline of 3px + outline should be over the hover state of the other links + not well vertically centered + should not apply the hover state.
• List-group > Checkboxes and radios : Should be the same as tables IMO : Should outline the whole line in orange + 3px ODS question: maybe not feasible technically.
• Navs&Tabs : Every outline shouldn't trigger the hover state + have an orange outline of 3px
• Navbar > Dropdown : Should have an orange outline of 3px
• [ ] Navbar > Nav-links&Nav-icons : Should have a way smaller outline -> Maybe time to get to flex navbars => wii be adressed in a different PR related to issue #1187
• Orange navbar : Should be solved when the navbar will, but just a check here to be sure (see Improve the visible focus for some global headers #1194)
• Pagination : Should be solved with the buttons, but keep an eye on it to be sure that there is no trigger of hover state on focus + orange outline of 3px
• Stepped process : Should have an orange outline of 3px + Should follow as strictly as possible the lines of the component (Or at least be a Rectangle including all the surrounding arrows). ODS question: maybe not feasible technically.

Helpers

• Colored links : Should have an orange outline of 3px

Miscellaneous

• Question to ODS ? Should the outline be animated such as right now ?
• What for the first dropdown item since it is 38 px height ? -> How it is built ? Is the border part of the dropdown-item or the first one is smaller ? Or the first one goes under the border of dropdown menu ?

Thoughts while reading the doc

• IMO, the focus state should and could be handled in the root file (or reboot) since the rules seems to be very simple and the same for all the components
• Maybe divide the two parts of the focus state in two distinct classes or mixins such as @mixin focus-outline and @mixin focus-box. One to handle the outline and that should be present everywhere

[MewenLeHo]

Question to ODS ? Should the outline be animated such as right now ?
According to Franco, we have to remove the animation.

[MewenLeHo]

Checks&Radios > Switches: we need to find a better solution. The current one is a bit dirty because of the CSS filter on the component (turns the orange focus into a blue one because of the filter: unvert(1)).

[MewenLeHo]

Accordion when opened : only solution seems to change accordions-buttons background color to transparent, may bring side effects.

[louismaximepiton]

I got an issue with back to top component in docs, when I arrive on footer, the focus looks weird.
I can't remember why we had a box-shadow around the buttons, If you know, could you remind me ?

[louismaximepiton]

Sum up after a spec meeting:

• Agreement of the assembly to set the $outline-offset at 2px.
• The focus should appear when focused with keyboard only.

[MewenLeHo]

We will need to discuss about the back to top button with label, we can't set the focus on the label because it's in a before element which is not in the dom.