[GitHub] [trafficcontrol] ocket8888 opened a new issue #3594: Traffic Portal Best Practices

[GitBox <gi...@apache.org>]

ocket8888 opened a new issue #3594: Traffic Portal Best Practices
URL: https://github.com/apache/trafficcontrol/issues/3594
 
 
   We have some best practices issues in Traffic Portal that ought to be addressed. These are the ones of which I'm aware:
   
   - [ ] `<label>`s need to have `for` attributes that tell the user-agent what they label (unless the labeled element is a child of the `<label>` node - but I don't think that's ever the case in TP since it's hard to style properly)
   
       e.g.
       ```html
       <label for="foo">Foo</label>
       <input id="foo" name="foo"/>
       ```
   
   
   - [ ] The text node content of `<label>`s very frequently include an asterisk (<kbd>*</kbd>) to indicate that they are required. This causes the label itself to be e.g. "Foo *" rather than merely "Foo" - and assistive technologies like screen readers will read them as such. Instead, the `required` attribute of a form control designates it as required, and if the asterisk is desired to indicate by appearance that the labeled object is required, then CSS styling should be used (probably via `some-selector::after { content: "*"; }`) to achieve that
   
       e.g.
       ```html
       <style type="text/css">
       label > input:required::before, label > select:required::before, label > textarea:required::before {
           content: " *";
           color: inherit;
       }
       </style>
       ...
       <label>foo <input name="foo" required/></label>
       ```
   
   - [ ] `ng-required` should be used to create a *data-binding* to a property of the `$scope` that determines whether or not a certain form control is required. Often we have this set to a constant, which causes bloat in the form of objects and event listeners, since it could easily be simply `required` instead (which also causes it to semantically have the attached notion of being 'required')
   
       e.g.
       ```html
       <input name="foo" required/>
       ```
   
   - [ ] Similarly, `ng-maxlength`, `ng-minlength` and `ng-pattern` should never be set to constants. If a constant maximum, minimum or pattern is known at compile time, then instead use the standard `maxlength`, `minlength`, `pattern` etc. attributes
   
       e.g.
       ```html
       <input name="foo" maxlength="27" minlength="1" pattern="\S+"/>
       ```
   
   - [ ] `pattern` (or `ng-pattern`) should NOT be used to make constraints on numerical inputs. Instead of using e.g. an `input[type="text"][pattern]` to represent a numeric input, use the standard `input[type="number"][min][max][step]`.
   
       e.g.
       ```html
       <input name="foo" type="number" min="1" max="15" step="1"/>
       <!-- ^ This allows the user to input an integer on the range [1,15] -->
       ```
   
   - [ ] The default `type` of a `<button>` is `submit`. In many cases, we use `<button>`s which not only do not submit a form, but are unrelated to any `<form>`, and merely trigger Javascript actions. These should be marked up as `button[type="button"]` to indicate that.
   
       e.g.
       ```html
       <button type="button" ng-click="someControllerMethod($event)">Foo</button>
       ```

----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
 
For queries about this service, please contact Infrastructure at:
users@infra.apache.org


With regards,
Apache Git Services