desktop-options.html - Issue 29584714: Issue 5874 - Sync strings with the agencies translations

Delta Between Two Patch Sets: desktop-options.html

Issue 29584714: Issue 5874 - Sync strings with the agencies translations (Closed)

Left Patch Set: Created Oct. 20, 2017, 9:10 p.m.

Right Patch Set: Updated Fanboy's list tooltip description Created Oct. 23, 2017, 4:30 p.m.

Left:
Right:

Use n/p to move between diff chunks; N/P to move between comments.

Jump to:

Left: Side by side diff | Download
Right: Side by side diff | Download

LEFT	RIGHT
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <!--	2 <!--

3 - This file is part of Adblock Plus <https://adblockplus.org/>,	3 - This file is part of Adblock Plus <https://adblockplus.org/>,

4 - Copyright (C) 2006-present eyeo GmbH	4 - Copyright (C) 2006-present eyeo GmbH

5 -	5 -

6 - Adblock Plus is free software: you can redistribute it and/or modify	6 - Adblock Plus is free software: you can redistribute it and/or modify

7 - it under the terms of the GNU General Public License version 3 as	7 - it under the terms of the GNU General Public License version 3 as

8 - published by the Free Software Foundation.	8 - published by the Free Software Foundation.

9 -	9 -

10 - Adblock Plus is distributed in the hope that it will be useful,	10 - Adblock Plus is distributed in the hope that it will be useful,

(...skipping 79 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
90 <span data-tooltip="options_protection_%value%_tooltip"></span>	90 <span data-tooltip="options_protection_%value%_tooltip"></span>

91 </template>	91 </template>

92 </ul>	92 </ul>

93 </section>	93 </section>

94 <section class="cols">	94 <section class="cols">

95 <header>	95 <header>

96 <h2 class="i18n_options_acceptableAds_header"></h2>	96 <h2 class="i18n_options_acceptableAds_header"></h2>

97 <p class="i18n_options_acceptableAds_description"></p>	97 <p class="i18n_options_acceptableAds_description"></p>

98 </header>	98 </header>

99 <form id="acceptable-ads">	99 <form id="acceptable-ads">

100 <div>	100 <ul>

101 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="ads">	101 <li>

102 <label class="i18n_options_acceptableAds_ads_label"></label>	102 <button id="acceptable-ads-allow" data-action="switch-acceptable -ads" type="button" role="checkbox" name="acceptable-ads" value="ads"></button>

103 <p id="enable-aa-description" class="i18n_options_acceptableAds_ad s_description_1"></p>	103 <label for="acceptable-ads-allow" class="i18n_options_acceptable Ads_ads_label"></label>

104 <p class="i18n_options_acceptableAds_ads_description_2"></p>	104 <p id="enable-acceptable-ads-description" class="i18n_options_ac ceptableAds_ads_description_1"></p>

105 </div>	105 <p class="i18n_options_acceptableAds_ads_description_2"></p>

106 <div>	106 </li>

107 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="privacy">	107 <ul>

108 <label class="i18n_options_acceptableAds_privacy_label"></label>	108 <li>

109 <p class="i18n_options_acceptableAds_privacy_description"></p>	109 <button id="acceptable-ads-privacy-allow" data-action="switch- acceptable-ads" type="button" role="checkbox" name="acceptable-ads" value="priva cy"></button>

110 <p id="dnt" class="i18n_options_acceptableAds_dnt_notification"></ p>	110 <label for="acceptable-ads-privacy-allow" class="i18n_options_ acceptableAds_privacy_label"></label>

111 </div>	111 <p>

112 <div>	112 <a id="enable-acceptable-ads-privacy-description" class="i18 n_options_acceptableAds_privacy_description"></a>

113 <input data-action="switch-acceptable-ads" type="radio" name="acce ptable-ads" value="none">	113 </p>

114 <label class="i18n_options_acceptableAds_none_label"></label>	114 <p id="dnt" class="i18n_options_acceptableAds_dnt_notification "></p>

115 </div>	115 </li>

	116 </ul>

	117 </ul>

116 </form>	118 </form>

117 </section>	119 </section>

118 <section class="cols">	120 <section class="cols">

119 <header>	121 <header>

120 <h2 class="i18n_options_language_header"></h2>	122 <h2 class="i18n_options_language_header"></h2>

121 <p class="i18n_options_language_description"></p>	123 <p class="i18n_options_language_description"></p>

122 </header>	124 </header>

123 <div id="blocking-languages">	125 <div id="blocking-languages">

124 <ul id="blocking-languages-table" class="table list">	126 <ul id="blocking-languages-table" class="table list">

125 <template>	127 <template>

(...skipping 20 matching lines...) Expand all Loading...
146 </ul>	148 </ul>

147 <p class="i18n_options_more_filters_note"></p>	149 <p class="i18n_options_more_filters_note"></p>

148 </div>	150 </div>

149 </section>	151 </section>

150 </div>	152 </div>

151	153

152 <!-- Whitelist tab content -->	154 <!-- Whitelist tab content -->

153 <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist ">	155 <div id="content-whitelist" role="tabpanel" aria-labelledby="tab-whitelist ">

154 <header>	156 <header>

155 <h1 class="i18n_options_tab_whitelist"></h1>	157 <h1 class="i18n_options_tab_whitelist"></h1>

156 <p id="whitelist-description" class="i18n_options_whitelist_descriptio n"></p>	158 <p>

	159 <span class="i18n_options_whitelist_description"></span>

	160 <a id="whitelist-learn-more" class="i18n_options_learn_more" target= "_blank"></a>

	161 </p>

157 </header>	162 </header>

158 <form class="section">	163 <form class="section">

159 <input id="whitelisting-textbox" type="text">	164 <input id="whitelisting-textbox" type="text">

160 <button id="whitelisting-add-button"	165 <button id="whitelisting-add-button"

161 type="submit"	166 type="submit"

162 data-action="add-domain-exception"	167 data-action="add-domain-exception"

163 class="i18n_options_whitelist_add primary" disabled>	168 class="i18n_options_whitelist_add primary" disabled>

164 </button>	169 </button>

165 </form>	170 </form>

166 <ul id="whitelisting-table" class="table list">	171 <ul id="whitelisting-table" class="table list">

(...skipping 30 matching lines...) Expand all Loading...
197 <button role="checkbox" data-action="toggle-pref"></button>	202 <button role="checkbox" data-action="toggle-pref"></button>

198 <span class="i18n_options_customize_showNotifications display"></s pan>	203 <span class="i18n_options_customize_showNotifications display"></s pan>

199 <span data-tooltip="options_customize_showNotifications_tooltip">< /span>	204 <span data-tooltip="options_customize_showNotifications_tooltip">< /span>

200 </li>	205 </li>

201 </ul>	206 </ul>

202 </section>	207 </section>

203	208

204 <section>	209 <section>

205 <header>	210 <header>

206 <h2 class="i18n_options_filterList_title"></h2>	211 <h2 class="i18n_options_filterList_title"></h2>

207 <p id="filter-lists-description" class="i18n_options_filterList_desc ription"></p>	212 <p>

	213 <span class="i18n_options_filterList_description"></span>

	214 <a id="filter-lists-learn-more" class="i18n_options_learn_more" ta rget="_blank"></a>

	215 </p>

208 </header>	216 </header>

209	217

210 <div id="all-filter-lists-table-header" class="th">	218 <div id="all-filter-lists-table-header" class="th">

211 <h3 class="i18n_options_filterList_column_status col4"></h3>	219 <h3 class="i18n_options_filterList_column_status col4"></h3>

212 <h3 class="i18n_options_filterList_column_name col4"></h3>	220 <h3 class="i18n_options_filterList_column_name col4"></h3>

213 <h3 class="i18n_options_filterList_column_update col4"></h3>	221 <h3 class="i18n_options_filterList_column_update col4"></h3>

214 <h3 class="col4"></h3>	222 <h3 class="col4"></h3>

215 </div>	223 </div>

216 <ul class="table cols" id="all-filter-lists-table">	224 <ul class="table cols" id="all-filter-lists-table">

217 <template>	225 <template>

(...skipping 20 matching lines...) Expand all Loading...
238 <li role="menuitem">	246 <li role="menuitem">

239 <button class="i18n_options_filterList_updateNow update- subscription" data-action="update-subscription"></button>	247 <button class="i18n_options_filterList_updateNow update- subscription" data-action="update-subscription"></button>

240 </li>	248 </li>

241 <li role="menuitem">	249 <li role="menuitem">

242 <a class="i18n_options_filterList_website website" targe t="_blank"></a>	250 <a class="i18n_options_filterList_website website" targe t="_blank"></a>

243 </li>	251 </li>

244 <li role="menuitem">	252 <li role="menuitem">

245 <a class="i18n_options_filterList_source source" target= "_blank"></a>	253 <a class="i18n_options_filterList_source source" target= "_blank"></a>

246 </li>	254 </li>

247 <li role="menuitem">	255 <li role="menuitem">

248 <button class="i18n_options_control_remove_title delete" data-action="remove-subscription"></button>	256 <button class="i18n_options_control_remove_title delete" data-action="remove-subscription"></button>
ire 2017/10/23 12:21:39 Should this also have the "title" attribute? Also Should this also have the "title" attribute? Also (I assume you will handle this in another issue, but I'm not currently aware if you have created an issue for this yet), most of these buttons don't have an accessible label. saroyanm 2017/10/23 14:11:08 Not sure if it's required, we clearly communicate Show quoted text On 2017/10/23 12:21:39, ire wrote: > Should this also have the "title" attribute? > > Also (I assume you will handle this in another issue, but I'm not currently > aware if you have created an issue for this yet), most of these buttons don't > have an accessible label. Not sure if it's required, we clearly communicate what the button suppose to do in the text which is "remove". So when user with screen reader focus the item the person will hear something along the lines 'Menu item with 4 items selected "remove"' providing titles will require translating them as well, I do agree that we need to communicate on icons, but I don't think we need to make explicit menu items having title attribute. We do use "title" already for the "trach" icons, but the problem is that they are not yet translated AFAIK, which still needs to be fixed. ire 2017/10/23 15:45:34 An accessible label is required, even if it does h Show quoted text On 2017/10/23 14:11:08, saroyanm wrote: > On 2017/10/23 12:21:39, ire wrote: > > Should this also have the "title" attribute? > > > > Also (I assume you will handle this in another issue, but I'm not currently > > aware if you have created an issue for this yet), most of these buttons don't > > have an accessible label. > > Not sure if it's required, we clearly communicate what the button suppose to do > in the text which is "remove". > So when user with screen reader focus the item the person will hear something > along the lines 'Menu item with 4 items selected "remove"' providing titles will > require translating them as well, I do agree that we need to communicate on > icons, but I don't think we need to make explicit menu items having title > attribute. An accessible label is required, even if it does have the title attribute (that's a different kind of label). You can provide it via an an aria-label if you don't want the textcontent in the actual button, but it's definitely a (really important) requirement. Show quoted text > We do use "title" already for the "trach" icons, but the problem is that they > are not yet translated AFAIK, which still needs to be fixed. Ack saroyanm 2017/10/23 16:14:32 Sorry I think I miss communicated here. I mean it Show quoted text On 2017/10/23 15:45:34, ire wrote: > On 2017/10/23 14:11:08, saroyanm wrote: > > On 2017/10/23 12:21:39, ire wrote: > > > Should this also have the "title" attribute? > > > > > > Also (I assume you will handle this in another issue, but I'm not currently > > > aware if you have created an issue for this yet), most of these buttons > don't > > > have an accessible label. > > > > Not sure if it's required, we clearly communicate what the button suppose to > do > > in the text which is "remove". > > So when user with screen reader focus the item the person will hear something > > along the lines 'Menu item with 4 items selected "remove"' providing titles > will > > require translating them as well, I do agree that we need to communicate on > > icons, but I don't think we need to make explicit menu items having title > > attribute. > > An accessible label is required, even if it does have the title attribute > (that's a different kind of label). You can provide it via an an aria-label if > you don't want the textcontent in the actual button, but it's definitely a > (really important) requirement. > > > We do use "title" already for the "trach" icons, but the problem is that they > > are not yet translated AFAIK, which still needs to be fixed. > > Ack > Sorry I think I miss communicated here. I mean it's already accessible and screen readers recognize the button and the text inside (according to my tests). I think aria-label needs to be used when the text is not available https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniqu... So no need to use additional accessible Technics when using <button>Remove</button> IMO. Regarding usage of title vs aria-label on other elements that are lacking text, I think we might need to test the browsers/user-agents that don't make title accessible yet, during the implementation I think I tested with Chrome and screen readers were recognizing the title fine, but didn't tested with other browsers though. It feels more like a fault of the browsers rather than "title" attribute being non accessible, I think this is something that might change in future, but let me know if I'm wrong and there is another reason of using aria-label in addition to title instead. ire 2017/10/24 07:36:07 No worries, I think I misunderstood what you were Show quoted text On 2017/10/23 16:14:32, saroyanm wrote: > On 2017/10/23 15:45:34, ire wrote: > > On 2017/10/23 14:11:08, saroyanm wrote: > > > On 2017/10/23 12:21:39, ire wrote: > > > > Should this also have the "title" attribute? > > > > > > > > Also (I assume you will handle this in another issue, but I'm not > currently > > > > aware if you have created an issue for this yet), most of these buttons > > don't > > > > have an accessible label. > > > > > > Not sure if it's required, we clearly communicate what the button suppose to > > do > > > in the text which is "remove". > > > So when user with screen reader focus the item the person will hear > something > > > along the lines 'Menu item with 4 items selected "remove"' providing titles > > will > > > require translating them as well, I do agree that we need to communicate on > > > icons, but I don't think we need to make explicit menu items having title > > > attribute. > > > > An accessible label is required, even if it does have the title attribute > > (that's a different kind of label). You can provide it via an an aria-label if > > you don't want the textcontent in the actual button, but it's definitely a > > (really important) requirement. > > > > > We do use "title" already for the "trach" icons, but the problem is that > they > > > are not yet translated AFAIK, which still needs to be fixed. > > > > Ack > > > > Sorry I think I miss communicated here. > I mean it's already accessible and screen readers recognize the button and the > text inside (according to my tests). > I think aria-label needs to be used when the text is not available > https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniqu... > > So no need to use additional accessible Technics when using > <button>Remove</button> IMO. > > Regarding usage of title vs aria-label on other elements that are lacking text, > I think we might need to test the browsers/user-agents that don't make title > accessible yet, during the implementation I think I tested with Chrome and > screen readers were recognizing the title fine, but didn't tested with other > browsers though. > > It feels more like a fault of the browsers rather than "title" attribute being > non accessible, I think this is something that might change in future, but let > me know if I'm wrong and there is another reason of using aria-label in addition > to title instead. No worries, I think I misunderstood what you were saying :) You're absolutely correct that an aria-label is not needed if the text is actually within the button (<button>Remove</button>) What I was saying was that, for some buttons on this page, there is no text content within the actual button. Instead, there is only a title attribute. The accessible name for a control is not supposed to be the title attribute. That attribute is for something totally different. The accessible name of a control element like a button has to either come from a <label>, an `aria-label`, or the actual text content of the element (see https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/) So the fact that browsers don't use the title attribute is not actually a fault of them. They aren't supposed to use it as the accessible name for the control. If you run an accessibility test on the page (you can use Lighthouse under the Audits tab in Chrome), you'll see that the controls raise an error because the label is missing (even for those with a title attribute).
249 </li>	257 </li>

250 </ul>	258 </ul>

251 </div>	259 </div>

252 </div>	260 </div>

253 <button data-action="remove-subscription" class="control delete" ></button>	261 <button data-action="remove-subscription" class="control delete" ></button>

254 </div>	262 </div>

255 </template>	263 </template>

256 </ul>	264 </ul>

257 <div class="side-controls wrap">	265 <div class="side-controls wrap">

258 <button class="i18n_options_filterList_add primary" data-action="ope n-dialog" data-dialog="import"></button>	266 <button class="i18n_options_filterList_add primary" data-action="ope n-dialog" data-dialog="import"></button>

(...skipping 139 matching lines...) Expand 10 before \| Expand all \| Expand 10 after Loading...
398 </div>	406 </div>

399 <!-- Notification -->	407 <!-- Notification -->

400 <div id="notification" aria-hidden="true" aria-live="polite">	408 <div id="notification" aria-hidden="true" aria-live="polite">

401 <strong id="notification-text"></strong>	409 <strong id="notification-text"></strong>

402 <button id="hide-notification" data-action="hide-notification">	410 <button id="hide-notification" data-action="hide-notification">

403 <span class="i18n_options_notification_hide sr-only"></span>	411 <span class="i18n_options_notification_hide sr-only"></span>

404 </button>	412 </button>

405 </div>	413 </div>

406 </body>	414 </body>

407 </html>	415 </html>

LEFT	RIGHT