Browse Source

Amélioration de la mise en évidence au focus sur les menus (accessibilité clavier)

master
RealET 6 months ago
parent
commit
75ef8aa50b
  1. 3
      css/inc_stylessoyezcreateurs.css.html
  2. 5
      noisettes/header/header.html
  3. 8
      noisettes/plan/inc_antichrono_grid.html
  4. 2
      noisettes/sommaire/sommaire_modeportailcognac.html
  5. 32
      noisettes/sommaire/sommaire_modeportailcognac_quoideneuf.html
  6. 5
      stylesportailagence.css.html
  7. 12
      stylesportailcognac.css.html
  8. 23
      stylessoyezcreateurs.css.html

3
css/inc_stylessoyezcreateurs.css.html

@ -781,7 +781,8 @@ a.button.triadeC:focus,
border-bottom: 3px solid transparent;
}
.portailcognac #menuhaut #menuh strong a,
.portailcognac #menuhaut #menuh a:hover {
.portailcognac #menuhaut #menuh a:hover,
.portailcognac #menuhaut #menuh a:focus {
border-bottom: 3px solid [(#GET{c_header_bk}|couleur_extreme|=={000000}|?{#GET{c_header_bk},#GET{c_header}})];;
}
.portailcognac #menuhaut #menuh ul li {

5
noisettes/header/header.html

@ -48,13 +48,8 @@
1. Base CSS http://tinytypo.tetue.net/ ]
[<link rel="stylesheet" href="(#CHEMIN{css/reset.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/clear.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/font.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/links.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/typo.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/media.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/form.css}|direction_css|timestamp)" type="text/css" />]
[<link rel="stylesheet" href="(#CHEMIN{css/grid.css}|direction_css|timestamp)" type="text/css" />]
[(#REM)[<link rel="stylesheet" href="(#CHEMIN{css/layout.css}|direction_css|timestamp)" type="text/css" />]]
[(#REM) 2. Style SPIP et ses plugins ]
[<link rel="stylesheet" href="(#CHEMIN{css/spip.css}|direction_css|timestamp)" type="text/css" />]

8
noisettes/plan/inc_antichrono_grid.html

@ -61,13 +61,13 @@
{!par date}
>
<div class="grid-item masonry-brick[ (#CLASS)]">
<div class="content-actus alaune[ (#COULEURRUBRIQUE)]">
<a href="#URL"[ title="(#DESCRIPTIF|attribut_html)"]>
<a href="#URL"[ title="(#DESCRIPTIF|attribut_html)"]>
<div class="content-actus alaune[ (#COULEURRUBRIQUE)]">
[<img src="(#LOGO|image_focus{308,#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="308" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
<div class="h2"><span class="titre-actus">#TITRE[ <span class="secondary-information">((#TYPE))</span>]</span>
<span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
</a>
</div>
</div>
</a>
</div>
</BOUCLE_ObjetsDuMois>

2
noisettes/sommaire/sommaire_modeportailcognac.html

@ -66,7 +66,7 @@
dots: false,
slidesToShow: [(#GET{LargeurContaineur}|div{304}|intval)],
slidesToScroll: 3,
infinite: true,
infinite: false,
variableWidth: true,
responsive: [
{

32
noisettes/sommaire/sommaire_modeportailcognac_quoideneuf.html

@ -12,13 +12,13 @@
[(#FORMATQUOI2NEUF|=={2}|?{#SET{facteur,2}#SET{largeur,638}})]
[(#FORMATQUOI2NEUF|=={3}|?{#SET{facteur,3}#SET{largeur,969}})]
<div class="grid-item[ grid-item-x(#GET{facteur})]">
<div class="content-actus alaune #EDIT{titre}<BOUCLE_RubriqueColoreealaune(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriquealaune(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriquealaune></BOUCLE_RubriqueColoreealaune>">
<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
<div class="content-actus alaune #EDIT{titre}<BOUCLE_RubriqueColoreealaune(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriquealaune(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriquealaune></BOUCLE_RubriqueColoreealaune>">
[<img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
<div class="h2"><span class="titre-actus">#TITRE</span>
<span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
</a>
</div>
</div>
</a>
</div>
</BOUCLE_articles_recentsAlaUne>
<BOUCLE_Breves(BREVES){!par date}{age<120}{lang}>
@ -35,13 +35,13 @@
[(#FORMATQUOI2NEUF|=={2}|?{#SET{facteur,2}#SET{largeur,638}})]
[(#FORMATQUOI2NEUF|=={3}|?{#SET{facteur,3}#SET{largeur,969}})]
<div class="grid-item[ grid-item-x(#GET{facteur})]">
<div class="content-actus alaune #EDIT{titre}<BOUCLE_RubriqueColoreeBreve(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriqueBreve(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriqueBreve></BOUCLE_RubriqueColoreeBreve>">
<a href="#URL_BREVE"[ title="(#DESCRIPTIF|attribut_html)"]>
<a href="#URL_BREVE"[ title="(#DESCRIPTIF|attribut_html)"]>
<div class="content-actus alaune #EDIT{titre}<BOUCLE_RubriqueColoreeBreve(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriqueBreve(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriqueBreve></BOUCLE_RubriqueColoreeBreve>">
[<img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
<div class="h2"><span class="titre-actus">#TITRE</span>
<span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
</a>
</div>
</div>
</a>
</div>
</BOUCLE_Breves>
<B_AgendaDerniersAjouts>
@ -55,8 +55,8 @@
{lang}
>
<BOUCLE_DernierEvenementArticle(ARTICLES){id_article}>
<div class="content-actus #EDIT{titre}<BOUCLE_RubriqueColoreeactus(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriqueactus(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriqueactus></BOUCLE_RubriqueColoreeactus>">
<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|attribut_html)"]>
<div class="content-actus #EDIT{titre}<BOUCLE_RubriqueColoreeactus(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubriqueactus(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubriqueactus></BOUCLE_RubriqueColoreeactus>">
[<img src="(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{#LOGO_RUBRIQUE_NORMAL}|sinon{#CHEMIN{images/placeholder.jpg}}|image_focus{308,[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1}|?{#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340},108})]}|extraire_attribut{src})" alt="" width="308" height="[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1}|?{#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340},108})]" />]
<div class="agenda flexbox-flex">
<div class="date debutfin[(#CONFIG{soyezcreateurs/agenda_date_format,complete}|=={complete}|oui)[ (#HORAIRE|=={oui}|?{horaires,[(#_AgendaDerniersAjouts:DATE_DEBUT|affdate{Ymd}|!={#_AgendaDerniersAjouts:DATE_FIN|affdate{Ymd}}|oui|?{journees,journee})]})]][(#CONFIG{soyezcreateurs/agenda_date_format,complete}|=={complete}|non)journee]">
@ -76,8 +76,8 @@
<div class="h2"><span class="titre-actus">[ (#_DernierEvenementArticle:TITRE|!={#_AgendaDerniersAjouts:TITRE}|?{#TITRE[&nbsp;: (#_AgendaDerniersAjouts:TITRE)],#TITRE})]</span>
<span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
</div>
</a>
</div>
</div>
</a>
</BOUCLE_DernierEvenementArticle>
[(#COMPTEUR_BOUCLE|!={#TOTAL_BOUCLE}|oui)
[(#COMPTEUR_BOUCLE|alterner{[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|match{^1}|?{[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1demie}|?{'</div><div class="grid-item grid-item-demie">','</div><div class="grid-item">'})],''})],[(#CONFIG{soyezcreateurs/nombres_agenda_par_bloc,2}|=={1demie}|?{'</div><div class="grid-item grid-item-demie">','</div><div class="grid-item">'})]})]
@ -103,13 +103,13 @@
[(#FORMATQUOI2NEUF|=={2}|?{#SET{facteur,2}#SET{largeur,638}})]
[(#FORMATQUOI2NEUF|=={3}|?{#SET{facteur,3}#SET{largeur,969}})]
<div class="grid-item[ grid-item-x(#GET{facteur})]">
<div class="content-actus quoideneuf #EDIT{titre}<BOUCLE_RubriqueColoree(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubrique(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubrique></BOUCLE_RubriqueColoree>">
<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
<a href="#URL_ARTICLE"[ title="(#DESCRIPTIF|supprimer_tags|attribut_html)"]>
<div class="content-actus quoideneuf #EDIT{titre}<BOUCLE_RubriqueColoree(HIERARCHIE){id_rubrique}{tout}{type_mot=_CouleurRubrique}{inverse} {0,1}><BOUCLE_CouleurRubrique(MOTS){id_rubrique}{type=_CouleurRubrique}{0,1}> couleurrubrique#ID_MOT</BOUCLE_CouleurRubrique></BOUCLE_RubriqueColoree>">
[<img src="(#GET{logo}|image_focus{#GET{largeur},#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}}|extraire_attribut{src})" alt="" width="#GET{largeur}" height="#CONFIG{soyezcreateurs/hauteur_quoi2neuf,340}" />]
<div class="h2"><span class="titre-actus">#TITRE</span>
<span class="icon icon-arrow-right2 icon-lg">&#10140;</span></div>
</a>
</div>
</div>
</a>
</div>
</BOUCLE_articles_QuoideNeuf>
<BOUCLE_Article_VideoALaUne(ARTICLES)

5
stylesportailagence.css.html

@ -40,11 +40,6 @@ div#content { width: 100%; }
#content, #navigation, #extra { padding-bottom:0; margin-bottom:0; }
#miettesdepain, .boutonstexte {display: none; }
{
/* clearfix */
/* ---- grid ---- */
/* ---- grid-item ---- */
}
iframe {
width: 100%;
}

12
stylesportailcognac.css.html

@ -47,12 +47,6 @@ div#content { width: 100%; }
right: 0;
}
{
/* clearfix */
/* ---- grid ---- */
/* ---- grid-item ---- */
}
iframe {
width: 100%;
}
@ -573,12 +567,6 @@ select {
margin-top: 6.5em;
margin-bottom: 4em;
}
.clearfix:after,
.grid:after {
content: '';
display: block;
clear: both;
}
.VideoALaUne figcaption { display: none; }
.VideoALaUne .spip_documents.spip_documents_center { margin-bottom: 0; }
.VideoALaUne .spip_documents .oembed {

23
stylessoyezcreateurs.css.html

@ -816,7 +816,7 @@ a#logo { display: block; clear: right; margin-left: 80px; }
#menu ul ul li a { padding: 2px 0 2px 20px; padding-right:0; padding-left:20px; background-color: #[(#GET{c_menu_a_bk}|couleur_inverserluminosite{10,true})]; font-size: 1em; text-decoration: none; }
#menu strong li a { background: #GET{c_menu_a_strong_bk}; color: #GET{c_menu_a_strong}; }
#menu li strong a:visited, #menu li strong a:link {
margin-left: 2px; background: #GET{c_menu_a_strong_bk}; color: #GET{c_menu_a_strong};
background: #GET{c_menu_a_strong_bk}; color: #GET{c_menu_a_strong};
}
#menu li a:hover, #menu li a:focus, #cadre_outils li a:hover, #cadre_outils li a:focus, #artrecents a:hover, #artrecents a:focus, #artrecents .odd a:hover, #artrecents .odd a:focus { background-color: #GET{c_menu_a_hover_bk}; color: #GET{c_menu_a_hover}; text-decoration: none; }
#menu li a:active, #cadre_outils li a:active { background-color: #GET{c_menu_a_active_bk}; color: #GET{c_menu_a_active}; }
@ -1043,14 +1043,23 @@ table.programmation caption { text-align: left; }
#menuh > li > a { background: #GET{c_menuhaut_bk}; color: #GET{c_menuhaut}; font-weight: bold; }
#menuh ul a { color: #GET{c_menuhaut}; }
#menuh a { display: block; font-size: #CONFIG{soyezcreateurs_couleurs/fontsizemenuhaut,1.2}rem; padding: 8px 16px; position: relative; text-decoration: none; }
#menuh li.hover > a { background: #GET{c_menuhaut}; color: #GET{c_menuhaut_bk}; }
#menuh li.hover > a, #menuh li > a:focus, #menuh a:hover, #menuh a:focus { background: #GET{c_menuhaut}; color: #GET{c_menuhaut_bk}; }
#menuh li.hover > a,
#menuh li.focus > a
{ background: #GET{c_menuhaut}; color: #GET{c_menuhaut_bk}; }
#menuh li.hover > a,
#menuh li > a:focus,
#menuh a:hover,
#menuh a:focus { background: #GET{c_menuhaut}; color: #GET{c_menuhaut_bk}; }
#menuh .active > a, #menuh a:active, #menuh li > a:active { background: #GET{c_menuhaut_bk}; color: #GET{c_menuhaut}; }
#menuh.drop { padding: 0 1%; }
#menuh.drop ul, .hasJS #menuh ul { position: absolute; z-index: 999; }
#menuh.drop ul ul { left: 200px; top: 0; }
#menuh.drop li a { padding-left: 16px; }
#menuh.drop li.hover > ul, #menuh.drop li > a:focus + ul { margin-top: 0; }
#menuh.drop li.hover > ul,
#menuh.drop li.focus > ul,
#menuh.drop li > a:hover + ul,
#menuh.drop li > a:focus + ul
{ margin-top: 0; }
#menuh.drop a.sf-with-ul { padding-right: 24px; }
#menuhaut li.cadre_recherche { float: right; }
@ -1081,8 +1090,10 @@ table.programmation caption { text-align: left; }
#menuh.drop li li li li .menuarticles { background-position: 29px 50% !important; }
#menuh.drop li li li li li a { padding-left: 48px; }
#menuh.drop li li li li li .menuarticles { background-position: 41px 50% !important; }
#menuh.drop li.hover > a { background:#GET{c_menu_a_hover_bk}; color: #GET{c_menu_a_hover}; }
#menuh.drop > li.hover > a { background: #GET{c_menu_a_active_bk}; color: #GET{c_menu_a_active}; }
#menuh.drop li.hover > a,
#menuh.drop li.focus > a { background:#GET{c_menu_a_hover_bk}; color: #GET{c_menu_a_hover}; }
#menuh.drop > li.hover > a,
#menuh.drop > li.focus > a { background: #GET{c_menu_a_active_bk}; color: #GET{c_menu_a_active}; }
#menuh.drop li a:hover,
#menuh.drop li a:focus { background:#GET{c_menu_a_hover_bk}; color: #GET{c_menu_a_hover}; }
#menuh.drop li li li {display:none;} /* n'afficher que le premier niveau du menu déroulant */

Loading…
Cancel
Save