Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

A11Y: improves search-in-options filter accessibility (#11809)

This commit is contained in:
Joffrey JAFFEUX 2021-01-22 14:39:16 +01:00 committed by GitHub
parent 7521cb51c4
commit 314e7be2b1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 59 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
app/assets/javascripts/discourse/app/templates/components/search-advanced-options.hbs
View File

@ -60,59 +60,69 @@
<div class="container advanced-search-topics-posts-group"> <div class="container advanced-search-topics-posts-group">
<div class="control-group pull-left"> <div class="control-group pull-left">
<label class="control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</label>
<div class="controls"> <div class="controls">
{{#if currentUser}} <fieldset class="grouped-control">
<section class="field"> <legend class="grouped-control-label" for="search-in-options">{{i18n "search.advanced.filters.label"}}</legend>
<label>
{{#if currentUser}}
<div class="grouped-control-field">
{{input {{input
id="matching-title-only"
type="checkbox" type="checkbox"
class="in-title" class="in-title"
checked=searchedTerms.special.in.title checked=searchedTerms.special.in.title
click=(action "onChangeSearchTermForSpecialInTitle" value="target.checked") click=(action "onChangeSearchTermForSpecialInTitle" value="target.checked")
}} }}
{{i18n "search.advanced.filters.title"}} <label for="matching-title-only">
</label> {{i18n "search.advanced.filters.title"}}
<label> </label>
</div>
<div class="grouped-control-field">
{{input {{input
id="matching-liked"
type="checkbox" type="checkbox"
class="in-likes" class="in-likes"
checked=searchedTerms.special.in.likes checked=searchedTerms.special.in.likes
click=(action "onChangeSearchTermForSpecialInLikes" value="target.checked") click=(action "onChangeSearchTermForSpecialInLikes" value="target.checked")
}} }}
{{i18n "search.advanced.filters.likes"}} <label for="matching-liked">{{i18n "search.advanced.filters.likes"}}</label>
</label> </div>
<label>
<div class="grouped-control-field">
{{input {{input
id="matching-in-messages"
type="checkbox" type="checkbox"
class="in-private" class="in-private"
checked=searchedTerms.special.in.personal checked=searchedTerms.special.in.personal
click=(action "onChangeSearchTermForSpecialInPersonal" value="target.checked") click=(action "onChangeSearchTermForSpecialInPersonal" value="target.checked")
}} }}
{{i18n "search.advanced.filters.private"}} <label for="matching-in-messages">{{i18n "search.advanced.filters.private"}}</label>
</label> </div>
<label>
<div class="grouped-control-field">
{{input {{input
id="matching-seen"
type="checkbox" type="checkbox"
class="in-seen" class="in-seen"
checked=searchedTerms.special.in.seen checked=searchedTerms.special.in.seen
click=(action "onChangeSearchTermForSpecialInSeen" value="target.checked") click=(action "onChangeSearchTermForSpecialInSeen" value="target.checked")
}} }}
{{i18n "search.advanced.filters.seen"}} <label for="matching-seen">{{i18n "search.advanced.filters.seen"}}</label>
</label> </div>
</section> {{/if}}
{{/if}} {{combo-box
{{combo-box id="in"
id="in" valueProperty="value"
valueProperty="value" content=inOptions
content=inOptions value=searchedTerms.in
value=searchedTerms.in onChange=(action "onChangeSearchTermForIn")
onChange=(action "onChangeSearchTermForIn") options=(hash
options=(hash none="user.locale.any"
none="user.locale.any" clearable=true
clearable=true )
) }}
}} </fieldset>
</div> </div>
</div> </div>
<div class="control-group pull-left"> <div class="control-group pull-left">

21
app/assets/stylesheets/common/base/discourse.scss
View File

@ -859,3 +859,24 @@ table {
z-index: z("max"); z-index: z("max");
color: var(--secondary); color: var(--secondary);
} }
.controls {
.grouped-control {
display: flex;
flex-direction: column;
.grouped-control-label {
padding: 0.25em 0;
}
.grouped-control-field {
flex: 1 0 auto;
display: flex;
padding-bottom: 0.25em;
label {
margin: 0;
}
}
}
}