github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2024-11-23 21:10:17 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

A11Y: mark up custom nav section form for screen readers (#25623)

Browse Source
This commit is contained in:
Kris 2024-02-09 08:42:28 -05:00 committed by GitHub
parent b797434376
commit d93debc634
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 46 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
app/assets/javascripts/discourse/app/components/modal/sidebar-section-form.hbs
View File

@ -18,6 +18,7 @@
@type="text"
@value={{this.transformedModel.title}}
class={{this.transformedModel.titleCssClass}}
id="section-name"
{{on
"input"
(action (mut this.transformedModel.title) value="target.value")
@ -31,30 +32,48 @@
{{/if}}
</div>
{{/unless}}
<div
role="table"
aria-rowcount={{this.activeLinks.length}}
class="sidebar-section-form__links-wrapper"
>
<div class="row-wrapper header">
<div class="input-group link-icon">
<label>{{i18n "sidebar.sections.custom.links.icon.label"}}</label>
<div class="row-wrapper header" role="row">
<div
class="input-group link-icon"
role="columnheader"
aria-sort="none"
>
<label>{{i18n "sidebar.sections.custom.links.icon.label"}}</label>
</div>
<div
class="input-group link-name"
role="columnheader"
aria-sort="none"
>
<label>{{i18n "sidebar.sections.custom.links.name.label"}}</label>
</div>
<div
class="input-group link-url"
role="columnheader"
aria-sort="none"
>
<label>{{i18n "sidebar.sections.custom.links.value.label"}}</label>
</div>
</div>
<div class="input-group link-name">
<label>{{i18n "sidebar.sections.custom.links.name.label"}}</label>
</div>
{{#each this.activeLinks as |link|}}
<Sidebar::SectionFormLink
@link={{link}}
@deleteLink={{this.deleteLink}}
@reorderCallback={{this.reorder}}
@setDraggedLinkCallback={{this.setDraggedLink}}
/>
{{/each}}
<div class="input-group link-url">
<label>{{i18n "sidebar.sections.custom.links.value.label"}}</label>
</div>
</div>
{{#each this.activeLinks as |link|}}
<Sidebar::SectionFormLink
@link={{link}}
@deleteLink={{this.deleteLink}}
@reorderCallback={{this.reorder}}
@setDraggedLinkCallback={{this.setDraggedLink}}
/>
{{/each}}
<DButton
@action={{this.addLink}}
@title="sidebar.sections.custom.links.add"

11
app/assets/javascripts/discourse/app/components/sidebar/section-form-link.hbs
View File

@ -11,11 +11,12 @@
{{on "dragleave" this.dragLeave}}
{{on "dragend" this.dragEnd}}
{{on "drop" this.dropItem}}
role="row"
>
<div class="draggable" data-link-name={{@link.name}}>
{{d-icon "grip-lines"}}
</div>
<div class="input-group">
<div class="input-group" role="cell">
<IconPicker
@name="icon"
@value={{@link.icon}}
@ -28,6 +29,7 @@
class={{@link.iconCssClass}}
@onlyAvailable={{true}}
@onChange={{action (mut @link.icon)}}
ariaLabel={{i18n "sidebar.sections.custom.links.icon.label"}}
/>
{{#if @link.invalidIconMessage}}
<div class="icon warning">
@ -35,12 +37,13 @@
</div>
{{/if}}
</div>
<div class="input-group">
<div class="input-group" role="cell">
<Input
name="link-name"
@type="text"
@value={{@link.name}}
class={{@link.nameCssClass}}
ariaLabel={{i18n "sidebar.sections.custom.links.name.label"}}
{{on "input" (action (mut @link.name) value="target.value")}}
/>
{{#if @link.invalidNameMessage}}
@ -49,12 +52,13 @@
</div>
{{/if}}
</div>
<div class="input-group">
<div class="input-group" role="cell">
<Input
name="link-url"
@type="text"
@value={{@link.value}}
class={{@link.valueCssClass}}
ariaLabel={{i18n "sidebar.sections.custom.links.value.label"}}
{{on "input" (action (mut @link.value) value="target.value")}}
/>
{{#if @link.invalidValueMessage}}
@ -68,5 +72,6 @@
@action={{fn @deleteLink @link}}
@title="sidebar.sections.custom.links.delete"
class="btn-flat delete-link"
role="cell"
/>
</div>