added label, accessibility tags & attrs

prathamVaidya · Mar 29, 2024 · 11bf449 · 11bf449
1 parent 6b4a715
commit 11bf449
Show file tree

Hide file tree

Showing 10 changed files with 84 additions and 43 deletions.
diff --git a/app/assets/javascripts/components/common/enroll_button.jsx b/app/assets/javascripts/components/common/enroll_button.jsx
@@ -181,6 +181,7 @@ const EnrollButton = ({ users, role, course, current_user, allowed, inline }) =>
 
   const button = (
     <button
+      aria-label={I18n.t('courses.enroll_button_aria_label')}
       className={buttonClass}
       onClick={() => {
         open();

diff --git a/app/assets/javascripts/components/common/namespace_select.jsx b/app/assets/javascripts/components/common/namespace_select.jsx
@@ -87,7 +87,20 @@ const NamespaceSelect = (props) => {
   }
 
   return (
-    <div>
+    <>
+      <label id="namespace-label" htmlFor="namespace_select" className="text-input-component__label inline-label">
+        <strong>
+          {I18n.t('courses.namespaces')}:&nbsp;
+        </strong>
+      </label>
+      <div className="tooltip-trigger">
+        <img src ="/assets/images/info.svg" alt = "tooltip default logo" />
+        <div className="tooltip large dark">
+          <p>
+            {I18n.t('namespace.tracked_namespaces_info')}
+          </p>
+        </div>
+      </div>
       <Select
         id = "namespace_select"
         value = {selectedNamespaces}
@@ -96,8 +109,9 @@ const NamespaceSelect = (props) => {
         styles={props.styles}
         isMulti = {true}
         isClearable={false}
+        aria-labelledby="namespace-label"
       />
-    </div>
+    </>
   );
 };
 

diff --git a/app/assets/javascripts/components/common/text_input.jsx b/app/assets/javascripts/components/common/text_input.jsx
@@ -88,12 +88,13 @@ const TextInput = createReactClass({
           title={title}
           min={0}
           ref="inputbox"
+          aria-labelledby={`${this.props.id}-label`}
         />
       );
 
       return (
         <div className="form-group">
-          <label htmlFor={this.props.id} className={labelClass}>{label}</label>
+          <label id={`${this.props.id}-label`} htmlFor={this.props.id} className={labelClass}>{label}</label>
           {input}
           {this.props.children}
         </div>

diff --git a/app/assets/javascripts/components/common/wiki_select.jsx b/app/assets/javascripts/components/common/wiki_select.jsx
@@ -37,6 +37,17 @@ const WikiSelect = createReactClass({
      *  Should the Wikis be read-only
      */
     readOnly: PropTypes.bool,
+
+    /**
+     *  Label for the select input
+     */
+    label: PropTypes.string,
+
+    /**
+     *  Label for the select input
+     */
+    id: PropTypes.string,
+
     /**
      * Wikis for options, in article finder (through selected_wiki_options)
      * and assign button (through new assigment input and selected wiki options)  tracked Wikis,
@@ -133,18 +144,32 @@ const WikiSelect = createReactClass({
       callback(filterOptionsLong(inputValue));
     };
 
-    return <AsyncSelect
-      isMulti={this.props.multi}
-      placeholder={I18n.t('multi_wiki.selector_placeholder')}
-      noOptionsMessage={() => I18n.t('multi_wiki.selector_placeholder')}
-      value={wikis.length ? wikis : undefined}
-      loadOptions={loadOptions}
-      onChange={preprocess}
-      styles={this.props.styles}
-      isClearable={false}
-      defaultValue={home_wiki && formatOption(home_wiki)}
-      className="multi-wiki-selector"
-    />;
+   return (
+     <>
+       <label
+         id={`${this.props.id}-label`}
+         htmlFor={this.props.id} className="text-input-component__label"
+       >
+         <strong>
+           {this.props.label}:&nbsp;
+         </strong>
+       </label>
+       <AsyncSelect
+         id={this.props.id}
+         isMulti={this.props.multi}
+         placeholder={I18n.t('multi_wiki.selector_placeholder')}
+         noOptionsMessage={() => I18n.t('multi_wiki.selector_placeholder')}
+         value={wikis.length ? wikis : undefined}
+         loadOptions={loadOptions}
+         onChange={preprocess}
+         styles={this.props.styles}
+         isClearable={false}
+         defaultValue={home_wiki && formatOption(home_wiki)}
+         className="multi-wiki-selector"
+         aria-labelledby={`${this.props.id}-label`}
+       />
+     </>
+   );
   }
 }
 );

diff --git a/app/assets/javascripts/components/overview/campaign_editable.jsx b/app/assets/javascripts/components/overview/campaign_editable.jsx
@@ -124,7 +124,11 @@ const CampaignEditable = ({ course_id }) => {
 
   return (
     <div key="campaigns" className="pop__container campaigns open" ref={ref}>
-      <button className="button border plus open" onClick={openPopover}>+</button>
+      <button
+        className="button border plus open" onClick={openPopover}
+        aria-label={I18n.t('courses.add_campaign_aria_label')}
+      >+
+      </button>
       <Popover
         is_open={isOpen}
         edit_row={campaignSelect}

diff --git a/app/assets/javascripts/components/overview/details.jsx b/app/assets/javascripts/components/overview/details.jsx
@@ -474,12 +474,9 @@ const Details = createReactClass({
     if (this.props.current_user.admin || !Features.wikiEd || (this.props.editable && Features.wikiEd && !isClassroomProgramType)) {
       wikiSelector = (
         <div className="form-group home-wiki">
-          <span className="text-input-component__label">
-            <strong>
-              {I18n.t('courses.home_wiki')}:&nbsp;
-            </strong>
-          </span>
           <WikiSelect
+            id="home_wiki"
+            label={I18n.t('courses.home_wiki')}
             wikis={
               [home_wiki]
             }
@@ -493,12 +490,9 @@ const Details = createReactClass({
       );
       multiWikiSelector = (
         <div className="form-group multi-wiki">
-          <span className="text-input-component__label">
-            <strong>
-              {I18n.t('courses.multi_wiki')}:&nbsp;
-            </strong>
-          </span>
           <WikiSelect
+            id="multi_wiki"
+            label={I18n.t('courses.multi_wiki')}
             wikis={this.props.course.wikis}
             homeWiki={home_wiki}
             readOnly={!this.props.editable}
@@ -512,19 +506,6 @@ const Details = createReactClass({
 
       namespaceSelector = (
         <div className="form-group namespace-select">
-          <span className="text-input-component__label">
-            <strong>
-              {I18n.t('courses.namespaces')}:&nbsp;
-            </strong>
-          </span>
-          <div className="tooltip-trigger">
-            <img src ="/assets/images/info.svg" alt = "tooltip default logo" />
-            <div className="tooltip large dark">
-              <p>
-                {I18n.t('namespace.tracked_namespaces_info')}
-              </p>
-            </div>
-          </div>
           <NamespaceSelect
             wikis={this.props.course.wikis}
             namespaces={this.props.course.namespaces}

diff --git a/app/assets/javascripts/components/overview/tag_editable.jsx b/app/assets/javascripts/components/overview/tag_editable.jsx
@@ -105,7 +105,11 @@ const TagEditable = ({ course_id }) => {
 
   return (
     <div key="tags" className="pop__container tags open" ref={ref}>
-      <button className="button border plus open" onClick={openPopover}>+</button>
+      <button
+        className="button border plus open" onClick={openPopover}
+        aria-label={I18n.t('courses.new_tag_button_aria_label')}
+      >+
+      </button>
       <Popover
         is_open={isOpen}
         edit_row={tagSelect}

diff --git a/app/assets/javascripts/components/overview/yes_no_selector.jsx b/app/assets/javascripts/components/overview/yes_no_selector.jsx
@@ -58,9 +58,13 @@ const YesNoSelector = createReactClass({
       ];
       selector = (
         <div className="form-group">
-          <span htmlFor={`${this.props.courseProperty}Toggle`}>
+          <label
+            id={`${this.props.courseProperty}-label`}
+            className="inline-label"
+            htmlFor={`${this.props.courseProperty}Toggle`}
+          >
             <strong>{this.props.label}:</strong>
-          </span>
+          </label>
           {tooltip}
           <Select
             id={`${this.props.courseProperty}Toggle`}
@@ -69,6 +73,7 @@ const YesNoSelector = createReactClass({
             onChange={this._handleChange}
             options={options}
             styles={selectStyles}
+            aria-labelledby={`${this.props.courseProperty}-label`}
           />
         </div>
       );

diff --git a/app/assets/stylesheets/modules/_forms.styl b/app/assets/stylesheets/modules/_forms.styl
@@ -5,6 +5,9 @@
   font-weight 400
   -webkit-font-smoothing antialiased
 
+.form-group > .inline-label
+  display inline
+
 .form-group > label
   margin-bottom 4px
   display block

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -134,7 +134,7 @@ en:
         heading: Username rules
         avoid_offensive_usernames: Do not choose a username that is offensive, misleading, disruptive, or promotional.
         represent_individual: Usernames must represent an individual editor. Do not use the name of a school or organization.
-      additional_advice: 
+      additional_advice:
         heading: Advice
         anonymous_username_recommendation: Wiki Education recommends choosing an anonymous username, not one that includes your real name or other identifying information.
     sign_up_help: >
@@ -472,6 +472,9 @@ en:
     articles_i_will_create_wikidata: Items I will create
     articles_i_am_updating: Articles I'm updating
     articles_i_am_updating_wikidata: Items I'm updating
+    add_campaign_aria_label: Add Campaign Button
+    new_tag_button_aria_label: Create or Update Tag Button
+    enroll_button_aria_label: Enroll Button
     assignment_headings:
       assigned_articles: Assigned Articles
       assigned_articles_wikidata: Assigned Items