define([
  'react',
  'i18n!react_files',
  'compiled/react_files/components/FilesUsage',
  'compiled/util/friendlyBytes',
  'jsx/shared/ProgressBar'
], function (React, I18n, FilesUsage, friendlyBytes, ProgressBar) {

  FilesUsage.render = function () {
    if (this.state) {
      var percentUsed = Math.round(this.state.quota_used / this.state.quota * 100);
      var label = I18n.t('%{percentUsed}% of %{bytesAvailable} used', {
        percentUsed: percentUsed,
        bytesAvailable: friendlyBytes(this.state.quota)
      });
      return (
        <div className='grid-row ef-quota-usage'>
          <div className='col-xs-5'>
            <ProgressBar progress={percentUsed} aria-label={label} />
          </div>
          <div className='col-xs-7' style={{paddingLeft: '0px'}} aria-hidden={true}>
            {label}
          </div>
        </div>
      );
    } else {
      return <div />;
    }
  };

  return React.createClass(FilesUsage);

});

define([
  'react',
  'i18n!react_files',
  'compiled/react_files/components/FilesUsage',
  'compiled/util/friendlyBytes',
], function (React, I18n, FilesUsage, friendlyBytes) {

  FilesUsage.render = function () {
    if (this.state) {
      var percentUsed = Math.round(this.state.quota_used / this.state.quota * 100);
      var label = I18n.t('%{percentUsed}% of %{bytesAvailable} used', {
        percentUsed: percentUsed,
        bytesAvailable: friendlyBytes(this.state.quota)
      });
      const srLabel = I18n.t('Files Quota: %{percentUsed}% of %{bytesAvailable} used', {
        percentUsed: percentUsed,
        bytesAvailable: friendlyBytes(this.state.quota)
      });
      return (
        <div className='grid-row ef-quota-usage'>
          <div className='col-xs-5'>
            <div ref='container' className='progress-bar__bar-container' aria-hidden={true}>
              <div
                ref='bar'
                className='progress-bar__bar'
                style={{
                  width: Math.min(percentUsed, 100) + '%'
                }}
              />
            </div>
          </div>
          <div className='col-xs-7' style={{paddingLeft: '0px'}} aria-hidden={true}>
            {label}
          </div>
          <div className='screenreader-only'>{srLabel}</div>
        </div>
      );
    } else {
      return <div />;
    }
  };

  return React.createClass(FilesUsage);

});

Remove aria progress bar information from files usage
[a11y] Remove aria progress bar information from files usage

This takes out the progress bar a11y stuff because the bar itself
is not an actual progress bar, but is rather a usage indicator.
It hides everything from screenreaders and provides them with an
explanatory bit of text instead.

closes CNVS-25695

Test Plan:
  - Go to Files
  - Using a screenreader go through the page to the files usage
    indicator.
  - The bar should not appear at all for the screenreader.
  - The screenreader should read "Files Quoata: XX% of XXX MB used"

Change-Id: Ibb84ffc3c154b4a81ca8d85bf446d546175909b3
Reviewed-on: https://gerrit.instructure.com/68618
Tested-by: Jenkins
Reviewed-by: Jeremy Stanley <b3f594e10a9edcf5413cf1190121d45078c62290@instructure.com>
QA-Review: Clare Strong <40d6bb3ed7fef516c73274131d5a837c16de74fd@instructure.com>
Product-Review: Clay Diffrient <9dff2e5c98626d20d2848250c411e8009465bb87@instructure.com>
