✨(frontend) unify tab focus style for better visual consistency

CHANGELOG.md

@@ -8,7 +8,10 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Added 
+- ⚡️(frontend) improve accessibility:
+ - #1341
+
+### Added
 
 - ✨(api) add API route to fetch document content #1206
 

src/frontend/apps/impress/src/components/DropButton.tsx

@@ -28,17 +28,18 @@ const StyledButton = styled(Button)<StyledButtonProps>`
  border: none;
  background: none;
  outline: none;
- transition: all 0.2s ease-in-out;
  font-weight: 500;
  font-size: 0.938rem;
  padding: 0;
  ${({ $css }) => $css};
-
+ &:hover {
+ background-color: var(
+ --c--components--button--primary-text--background--color-hover
+ );
+ }
  &:focus-visible {
- outline: 2px solid var(--c--theme--colors--primary-500);
- outline-offset: 2px;
+ box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400);
  border-radius: 4px;
- transition: none;
  }
 `;
 

src/frontend/apps/impress/src/components/dropdown-menu/DropdownMenu.tsx

@@ -207,14 +207,13 @@ export const DropdownMenu = ({
  }
 
  &:focus-visible {
- outline: 2px solid var(--c--theme--colors--primary-500);
+ outline: 2px solid var(--c--theme--colors--primary-400);
  outline-offset: -2px;
  background-color: var(--c--theme--colors--greyscale-050);
  }
 
  ${isFocused &&
  css`
- outline: 2px solid var(--c--theme--colors--primary-500);
  outline-offset: -2px;
  background-color: var(--c--theme--colors--greyscale-050);
  `}

src/frontend/apps/impress/src/features/auth/components/ButtonLogin.tsx

@@ -2,7 +2,8 @@ import { Button } from '@openfun/cunningham-react';
 import { useTranslation } from 'react-i18next';
 import { css } from 'styled-components';
 
-import { BoxButton } from '@/components';
+import { Box, BoxButton } from '@/components';
+import { useCunninghamTheme } from '@/cunningham';
 
 import ProConnectImg from '../assets/button-proconnect.svg';
 import { useAuth } from '../hooks';
@@ -11,6 +12,7 @@ import { gotoLogin, gotoLogout } from '../utils';
 export const ButtonLogin = () => {
  const { t } = useTranslation();
  const { authenticated } = useAuth();
+ const { colorsTokens } = useCunninghamTheme();
 
  if (!authenticated) {
  return (
@@ -26,14 +28,23 @@ export const ButtonLogin = () => {
  }
 
  return (
- <Button
- onClick={gotoLogout}
- color="primary-text"
- aria-label={t('Logout')}
- className="--docs--button-logout"
+ <Box
+ $css={css`
+ .--docs--button-logout:focus-visible {
+ box-shadow: 0 0 0 2px ${colorsTokens['primary-400']} !important;
+ border-radius: 4px;
+ }
+ `}
  >
- {t('Logout')}
- </Button>
+ <Button
+ onClick={gotoLogout}
+ color="primary-text"
+ aria-label={t('Logout')}
+ className="--docs--button-logout"
+ >
+ {t('Logout')}
+ </Button>
+ </Box>
  );
 };
 

src/frontend/apps/impress/src/features/header/components/Header.tsx

@@ -43,6 +43,13 @@ export const Header = () => {
  href="/"
  data-testid="header-logo-link"
  aria-label={t('Back to homepage')}
+ $css={css`
+ outline: none;
+ &:focus-visible {
+ box-shadow: 0 0 0 2px var(--c--theme--colors--primary-400) !important;
+ border-radius: 4px;
+ }
+ `}
  >
  <Box
  $align="center"

src/frontend/apps/impress/src/features/language/components/LanguagePicker.tsx

@@ -41,15 +41,7 @@ export const LanguagePicker = () => {
  showArrow
  label={t('Select language')}
  buttonCss={css`
- &:hover {
- background-color: var(
- --c--components--button--primary-text--background--color-hover
- );
- }
- &:focus-visible {
- outline: 2px solid var(--c--theme--colors--primary-500);
- outline-offset: 2px;
- }
+ transition: all 0.15s ease-in-out !important;
  border-radius: 4px;
  padding: 0.5rem 0.6rem;
  & > div {

src/frontend/apps/impress/src/features/left-panel/components/LefPanelTargetFilters.tsx

@@ -85,8 +85,9 @@ export const LeftPanelTargetFilters = () => {
  background-color: ${colorsTokens['greyscale-100']};
  }
  &:focus-visible {
- outline: 2px solid ${colorsTokens['primary-500']};
- outline-offset: 2px;
+ outline: none !important;
+ box-shadow: 0 0 0 2px ${colorsTokens['primary-500']} !important;
+ border-radius: 4px;
  }
  `}
  >

src/frontend/apps/impress/src/features/left-panel/components/LeftPanelFavoriteItem.tsx

@@ -31,27 +31,26 @@ export const LeftPanelFavoriteItem = ({ doc }: LeftPanelFavoriteItemProps) => {
  .pinned-actions {
  opacity: ${isDesktop ? 0 : 1};
  }
- &:hover,
+ &:hover {
+ background-color: ${colorsTokens['greyscale-100']};
+ }
  &:focus-within {
  cursor: pointer;
-
- background-color: var(--c--theme--colors--greyscale-100);
+ box-shadow: 0 0 0 2px ${colorsTokens['primary-500']} !important;
  .pinned-actions {
  opacity: 1;
  }
  }
- &:focus-visible {
- outline: 2px solid ${colorsTokens['primary-500']};
- outline-offset: 2px;
- border-radius: ${spacingsTokens['3xs']};
- }
  `}
  key={doc.id}
  className="--docs--left-panel-favorite-item"
  >
  <StyledLink
  href={`/docs/${doc.id}`}
- $css="overflow: auto;"
+ $css={css`
+ overflow: auto;
+ outline: none !important;
+ `}
  aria-label={`${doc.title}, ${t('Updated')} ${DateTime.fromISO(doc.updated_at).toRelative()}`}
  >
  <SimpleDocItem showAccesses doc={doc} />